PDA

View Full Version : Having Problems with adding new Columns on-the-fly



markus.hammerschmid
21 Sep 2011, 5:34 AM
Hi!

I have to generate an extjs based Grid which should be able to modified CMS like by a user.

Adding, deleting Records to a Grid is easy going, but I stuck adding Columns to the grid with an Add-Button.

By pressing the Add button, a modal form should appear where the properties of the Column can be entered.

I found out, that I have to define a new Model an a new Store for adding a column. Here is my basic code for dynamic stores:


Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
// The default config
config: {
fields: ['name', 'email'],
proxy: {
type: 'ajax',
api: {
read: 'data/ajax.php?mode=read',
update: 'data/ajax.php?mode=update',
create: 'data/ajax.php?mode=create'
},
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
},
writer: {
type: 'json',
root: 'users',
successProperty: 'success'
}
}
},
constructor: function(config) {
this.initConfig(config);
return this;
}
});

Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
// The default config
config: {
model: 'AM.model.User',
storeId: 'usersStore',
autoLoad: true
},
constructor: function(config) {
this.initConfig(config);
return this;
}
});

Ext.onReady(function() {

var model = Ext.create('AM.model.User');
var store = Ext.create('AM.store.Users', { model:model});

var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{
text : 'Name',
flex : 1,
sortable : false,
dataIndex: 'name'
},
{
text : 'Email',
width : 75,
sortable : true,
dataIndex: 'email'
}
],
height: 350,
width: 600,
title: 'Array Grid'
});

});

With that I could overwrite a model an add more columns on-the-fly I think, but I run in the following error: TypeError: 'undefined' is not an object (evaluating 'me.events[ename]') -- Observable.js:397

I'm very new at ExtJs, and I'm relly stuck. I found some HowTo's for adding dynamic column functionality, but they where thought for earlier Versions of ExtJs, so I would be happy for some ExtJs 4 approaches.

Thanks in Advance!