Roo.log('initEvents with ds!!!!');
+ var _this = this;
+
+ Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
+ e.on('click', _this.sort, _this);
+ });
// this.maskEl = Roo.DomHelper.append(this.el.select('.TableGrid', true).first(), {tag: "div", cls:"x-dlg-mask"}, true);
// this.maskEl.enableDisplayMode("block");
// this.maskEl.show();
},
+ sort : function(e,el)
+ {
+ var col = Roo.get(el)
+
+ if(!col.hasClass('sortable')){
+ return;
+ }
+
+ var sort = col.attr('sort');
+ var dir = 'ASC';
+
+ if(col.hasClass('glyphicon-arrow-up')){
+ dir = 'DESC';
+ }
+
+ this.store.sortInfo = {field : sort, direction : dir};
+
+ this.store.load();
+ },
+
renderHeader : function()
{
var header = {
};
var cm = this.cm;
- var cls = '';
- var config = '';
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- cls = 'glyphicon';
- config = cm.config[i];
+ var config = cm.config[i];
+
+ var c = {
+ tag: 'th',
+ html: cm.getColumnHeader(i)
+ };
+
+ if(typeof(config.dataIndex) != 'undefined'){
+ c.sort = config.dataIndex;
+ }
if(typeof(config.sortable) != 'undefined' && config.sortable){
- cls += ' sortable';
+ c.cls = 'sortable';
}
- header.cn.push({
- tag: 'th',
- cls: cls,
- sort: (typeof(config.dataIndex) != 'undefined') ? config.dataIndex : '',
- html: cm.getColumnHeader(i)
- })
+ if(typeof(config.width) != 'undefined'){
+ c.style = 'width:' + config.width + 'px';
+ }
+
+ header.cn.push(c)
}
return header;
{
Roo.log('ds onload');
+ var _this = this;
var cm = this.cm;
+ Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
+ e.removeClass(['glyphicon', 'glyphicon-arrow-up', 'glyphicon-arrow-down']);
+
+ if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'ASC'){
+ e.addClass(['glyphicon', 'glyphicon-arrow-up']);
+ }
+
+ if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'DESC'){
+ e.addClass(['glyphicon', 'glyphicon-arrow-down']);
+ }
+ });
+
var tbody = this.el.select('tbody', true).first();
var renders = [];
};
if(typeof(config.width) != 'undefined'){
- td.width = config.width;
+ td.style = 'width:' + config.width + 'px';
}
row.cn.push(td);