Dynamic Grid(二)

Ext.grid.DynamicColumnModel = function(store) {
var cols = [];
var recordType = store.reader.recordType;
var fields = recordType.prototype.fields;

if ( fields.length == 0 )
{
fields = store.reader.headers;
for ( var i = 0; i < store.reader.headers.length; i++ )
{
var header = store.reader.headers[i]
cols[i] = {
header: header.text,
dataIndex: header.name,
tooltip: '',
hidden: header.hidden,
renderer: function(value,atts){
atts.attr = 'ext:qtip="'+Ext.util.Format.htmlEncode(value) +'"';
return value;
}
};
}
}
else
{
for (var i = 0; i < fields.keys.length; i++) {
var fieldName = fields.keys[i];
var field = recordType.getField(fieldName);
cols[i] = {
header: field.header,
dataIndex: field.name,
tooltip: field.tooltip,
hidden: field.hidden,
sortable:true, //for sorting
renderer: function(value,atts){
atts.attr = 'ext:qtip="'+Ext.util.Format.htmlEncode(value) +'"';
return value;
}
};
}
}
// for sorting
store.fields = store.reader.recordType.prototype.fields;

Ext.grid.DynamicColumnModel.superclass.constructor .call(this, cols);
};
Ext.extend(Ext.grid.DynamicColumnModel, Ext.grid.ColumnModel, {});


Ext.data.DynamicXmlReader = function(config) {
Ext.data.DynamicXmlReader.superclass.constructor.c all(this, config, []);
};
Ext.extend(Ext.data.DynamicXmlReader, Ext.data.XmlReader, {
getRecordType : function(data) {
recordDefinition = Ext.DomQuery.select(this.meta.recordDefinition + ' > *', data);
var arr = [];
for (var i = 0; i < recordDefinition.length; i++) {
arr[i] = {
name: recordDefinition[i].tagName,
header: recordDefinition[i].getAttribute('header'),
tooltip: recordDefinition[i].getAttribute('tooltip'),
hidden: recordDefinition[i].getAttribute('hidden') == "true" ? true : false
};
}

this.recordType = Ext.data.Record.create(arr);
return this.recordType;
},

readRecords : function(doc) {
this.xmlData = doc;
var root = doc.documentElement || doc;
this.getRecordType(root);
return Ext.data.DynamicXmlReader.superclass.readRecords.c all(this, doc);
}
});

Ext.grid.GridView.prototype.bindColumnModel = function(cm) {
if(this.cm){
this.cm.un("widthchange", this.updateColumns, this);
this.cm.un("headerchange", this.updateHeaders, this);
this.cm.un("hiddenchange", this.handleHiddenChange, this);
this.cm.un("columnmoved", this.handleColumnMove, this);
}
if(cm){
cm.on("widthchange", this.updateColumns, this);
cm.on("headerchange", this.updateHeaders, this);
cm.on("hiddenchange", this.handleHiddenChange, this);
cm.on("columnmoved", this.handleColumnMove, this);
}
this.cm = cm;
};

Ext.grid.DynamicGridPanel = function(config) {
this.store = config.store;
this.renderTo = config.renderTo;
this.view = config.view;
this.plugins = config.plugins;
Ext.grid.DynamicGridPanel.superclass.constructor.c all(this, this.renderTo, config);
};
Ext.extend(Ext.grid.DynamicGridPanel, Ext.grid.GridPanel, {
render : function() {
this.store.addListener('load', this.doReconfiguration, this);
this.colModel = new Ext.grid.DefaultColumnModel([{ header: '', dataIndex: '' }]);
Ext.grid.DynamicGridPanel.superclass.render.call(t his);
},

doReconfiguration : function() {
this.colModel = new Ext.grid.DynamicColumnModel(this.store);
this.view.bindColumnModel(this.colModel);
this.view.refresh(true);
this.store.removeListener("load", this.doReconfiguration);
}
});


And here is an example:


viewgrid = new Ext.grid.DynamicGridPanel({
renderTo: 'view-south-grid',
store: viewds,
enableColumnMove: true,
sortable: true,
autoheight:true,
bodyBorder : false,
monitorWindowResize : true,
autoScroll: true,
listeners: {
destroy: function(c) {
c.getStore().destroy();
}
},
viewConfig: {
forceFit: true
},
view: new Ext.grid.GroupingView({
autofill : true,
forceFit: true,
startCollapsed : true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
});
viewgrid.render();