PDA

View Full Version : Creating a Dynamic Grid with ExtJS



darkhorni
12 Jun 2012, 12:44 AM
I'm trying to make a Dynamic Grid class (where I do not know any information about the columns but they are given from the json response and the gird prepares itself accordingly). Here (http://www.jicdesign.com/blog/web-development/extjs-dynamically-creating-grid-panel.html) I have found exactly what I was looking for however it gives me an error:



me.model is undefined
me.setProxy(me.proxy || me.model.getProxy());
ext-all-debug.js (line 47323)


I have tried to add both proxy and model but I was not successful, I kept getting the same error.
Here is the ExtJS code that I'm working on:




// ExtJS 4.1
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../extjs-4.1.0/examples/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
]);


Ext.define('DynamicGrid', {
extend: 'Ext.grid.GridPanel',
storeUrl: '',
enableColumnHide:true,
initComponent: function(){
var store = new Ext.data.Store({
url: this.storeUrl,
reader: new Ext.data.JsonReader(),
autoLoad: true,
scope: this,
listeners: {
scope: this,
metachange: function(store, meta) {
if(typeof(store.reader.jsonData.columns) === 'object') {
var columns = [];
/**
* Adding RowNumberer or setting selection model as CheckboxSelectionModel
* We need to add them before other columns to display first
*/
if(this.rowNumberer) {
columns.push(new Ext.grid.RowNumberer());
}
if(this.checkboxSelModel) {
columns.push(new Ext.grid.CheckboxSelectionModel());
}
Ext.each(store.reader.jsonData.columns, function(column){
columns.push(column);
}); // Set column model configuration
this.getColumnModel().setConfig(columns);
this.reconfigure(store, this.getColumnModel());
}
}
}
});
var config = {
title: 'Dynamic Columns',
viewConfig:{
emptyText:'No rows to display'
},
loadMask: true,
border: false,
stripeRows: true,
store: store,
columns: []
}
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
DynamicGrid.superclass.initComponent.apply(this, arguments);
},
onRender: function(ct, position){
this.colModel.defaultSortable = true;
DynamicGrid.superclass.onRender.call(this, ct, position);
}
});

Ext.onReady(function(){


Ext.QuickTips.init();

var grid = Ext.create('DynamicGrid', {
storeUrl: 'http://300.79.103.188/ApplicationJs/jsontest.json'
});

var depV = Ext.create('Ext.Viewport', {
title: 'Departman Tan?mlar?',
layout: 'fit',
items: grid
}).show();

});


What I have to do inorder to make it run?

scottmartin
23 Jun 2012, 2:17 PM
Have a look at the following thread?
http://www.sencha.com/forum/showthread.php?223802

Scott.