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!!!!');
190 // this.maskEl = Roo.DomHelper.append(this.el.select('.TableGrid', true).first(), {tag: "div", cls:"x-dlg-mask"}, true);
191 // this.maskEl.enableDisplayMode("block");
192 // this.maskEl.show();
194 this.store.on('load', this.onLoad, this);
195 this.store.on('beforeload', this.onBeforeLoad, this);
203 renderHeader : function()
212 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
213 var lookup = cm.looup;
214 Roo.log('header!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
218 html: cm.getColumnHeader(i)
225 renderBody : function()
235 renderFooter : function()
247 Roo.log('ds onload');
251 var tbody = this.el.select('tbody', true).first();
255 if(this.store.getCount() > 0){
256 this.store.data.each(function(d){
262 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
263 var renderer = cm.getRenderer(i);
264 var config = cm.config[i];
268 if(typeof(renderer) !== 'undefined'){
269 value = renderer(d.data[cm.getDataIndex(i)], false, d);
272 if(typeof(value) === 'object'){
282 html: (typeof(value) === 'object') ? '' : value
285 if(typeof(config.width) != 'undefined'){
286 td.width = config.width;
293 tbody.createChild(row);
301 Roo.each(renders, function(r){
302 _this.renderColumn(r);
306 // if(this.loadMask){
307 // this.maskEl.hide();
311 onBeforeLoad : function()
313 Roo.log('ds onBeforeLoad');
317 // if(this.loadMask){
318 // this.maskEl.show();
324 this.el.select('tbody', true).first().dom.innerHTML = '';
327 getSelectionModel : function(){
329 this.selModel = new Roo.bootstrap.Table.RowSelectionModel();
331 return this.selModel;
334 renderColumn : function(r)
337 r.cfg.render(Roo.get(r.id));
340 Roo.each(r.cfg.cn, function(c){
345 _this.renderColumn(child);