9 * @class Roo.bootstrap.Table
10 * @extends Roo.bootstrap.Component
11 * Bootstrap Table class
12 * @cfg {String} cls table class
13 * @cfg {String} align (left|center|right) Specifies the alignment of a table according to surrounding text
14 * @cfg {String} bgcolor Specifies the background color for a table
15 * @cfg {Number} border Specifies whether the table cells should have borders or not
16 * @cfg {Number} cellpadding Specifies the space between the cell wall and the cell content
17 * @cfg {Number} cellspacing Specifies the space between cells
18 * @cfg {String} frame Specifies which parts of the outside borders that should be visible
19 * @cfg {String} rules Specifies which parts of the inside borders that should be visible
20 * @cfg {String} sortable Specifies that the table should be sortable
21 * @cfg {String} summary Specifies a summary of the content of a table
22 * @cfg {Number} width Specifies the width of a table
24 * @cfg {boolean} striped Should the rows be alternative striped
25 * @cfg {boolean} bordered Add borders to the table
26 * @cfg {boolean} hover Add hover highlighting
27 * @cfg {boolean} condensed Format condensed
28 * @cfg {boolean} responsive Format condensed
35 * @param {Object} config The config object
38 Roo.bootstrap.Table = function(config){
39 Roo.bootstrap.Table.superclass.constructor.call(this, config);
42 this.selModel = Roo.factory(this.sm, Roo.bootstrap.Table);
43 this.sm = this.selModel;
44 this.sm.xmodule = this.xmodule || false;
46 if (this.cm && typeof(this.cm.config) == 'undefined') {
47 this.colModel = new Roo.bootstrap.Table.ColumnModel(this.cm);
48 this.cm = this.colModel;
49 this.cm.xmodule = this.xmodule || false;
52 this.store= Roo.factory(this.store, Roo.data);
54 this.ds.xmodule = this.xmodule || false;
59 Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, {
81 getAutoCreate : function(){
82 var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
91 cfg.cls += ' table-striped';
94 cfg.cls += ' table-hover';
97 cfg.cls += ' table-bordered';
100 cfg.cls += ' table-condensed';
102 if (this.responsive) {
103 cfg.cls += ' table-responsive';
110 cfg.cls+= ' ' +this.cls;
113 // this lot should be simplifed...
116 cfg.align=this.align;
119 cfg.bgcolor=this.bgcolor;
122 cfg.border=this.border;
124 if (this.cellpadding) {
125 cfg.cellpadding=this.cellpadding;
127 if (this.cellspacing) {
128 cfg.cellspacing=this.cellspacing;
131 cfg.frame=this.frame;
134 cfg.rules=this.rules;
137 cfg.sortable=this.sortable;
140 cfg.summary=this.summary;
143 cfg.width=this.width;
146 if(this.store || this.cm){
147 cfg.cn.push(this.renderHeader());
148 cfg.cn.push(this.renderBody());
149 cfg.cn.push(this.renderFooter());
151 cfg.cls+= ' TableGrid';
157 // initTableGrid : function()
168 // for(var i = 0, len = cm.getColumnCount(); i < len; i++){
171 // html: cm.getColumnHeader(i)
182 initEvents : function()
184 if(!this.store || !this.cm){
188 Roo.log('initEvents with ds!!!!');
192 Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
193 e.on('click', _this.sort, _this);
195 // this.maskEl = Roo.DomHelper.append(this.el.select('.TableGrid', true).first(), {tag: "div", cls:"x-dlg-mask"}, true);
196 // this.maskEl.enableDisplayMode("block");
197 // this.maskEl.show();
199 this.store.on('load', this.onLoad, this);
200 this.store.on('beforeload', this.onBeforeLoad, this);
210 this.store.sortInfo = {field:'created_dt',direction:'DESC'};
215 renderHeader : function()
224 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
226 var config = cm.config[i];
230 html: cm.getColumnHeader(i)
233 if(typeof(config.dataIndex) != 'undefined'){
234 c.sort = config.dataIndex;
237 if(typeof(config.sortable) != 'undefined' && config.sortable){
247 renderBody : function()
257 renderFooter : function()
269 Roo.log('ds onload');
273 var tbody = this.el.select('tbody', true).first();
277 if(this.store.getCount() > 0){
278 this.store.data.each(function(d){
284 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
285 var renderer = cm.getRenderer(i);
286 var config = cm.config[i];
290 if(typeof(renderer) !== 'undefined'){
291 value = renderer(d.data[cm.getDataIndex(i)], false, d);
294 if(typeof(value) === 'object'){
304 html: (typeof(value) === 'object') ? '' : value
307 if(typeof(config.width) != 'undefined'){
308 td.width = config.width;
315 tbody.createChild(row);
323 Roo.each(renders, function(r){
324 _this.renderColumn(r);
328 // if(this.loadMask){
329 // this.maskEl.hide();
333 onBeforeLoad : function()
335 Roo.log('ds onBeforeLoad');
339 // if(this.loadMask){
340 // this.maskEl.show();
346 this.el.select('tbody', true).first().dom.innerHTML = '';
349 getSelectionModel : function(){
351 this.selModel = new Roo.bootstrap.Table.RowSelectionModel();
353 return this.selModel;
356 renderColumn : function(r)
359 r.cfg.render(Roo.get(r.id));
362 Roo.each(r.cfg.cn, function(c){
367 _this.renderColumn(child);