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);
208 sort : function(e,el)
210 var col = Roo.get(el)
211 var sort = col.attr('sort');
217 this.store.sortInfo = {field:sort,direction:'ASC'};
222 renderHeader : function()
231 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
233 var config = cm.config[i];
237 html: cm.getColumnHeader(i)
240 if(typeof(config.dataIndex) != 'undefined'){
241 c.sort = config.dataIndex;
244 if(typeof(config.sortable) != 'undefined' && config.sortable){
254 renderBody : function()
264 renderFooter : function()
276 Roo.log('ds onload');
280 var tbody = this.el.select('tbody', true).first();
284 if(this.store.getCount() > 0){
285 this.store.data.each(function(d){
291 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
292 var renderer = cm.getRenderer(i);
293 var config = cm.config[i];
297 if(typeof(renderer) !== 'undefined'){
298 value = renderer(d.data[cm.getDataIndex(i)], false, d);
301 if(typeof(value) === 'object'){
311 html: (typeof(value) === 'object') ? '' : value
314 if(typeof(config.width) != 'undefined'){
315 td.width = config.width;
322 tbody.createChild(row);
330 Roo.each(renders, function(r){
331 _this.renderColumn(r);
335 // if(this.loadMask){
336 // this.maskEl.hide();
340 onBeforeLoad : function()
342 Roo.log('ds onBeforeLoad');
346 // if(this.loadMask){
347 // this.maskEl.show();
353 this.el.select('tbody', true).first().dom.innerHTML = '';
356 getSelectionModel : function(){
358 this.selModel = new Roo.bootstrap.Table.RowSelectionModel();
360 return this.selModel;
363 renderColumn : function(r)
366 r.cfg.render(Roo.get(r.id));
369 Roo.each(r.cfg.cn, function(c){
374 _this.renderColumn(child);