PDA

View Full Version : Correct format of data store to grid widget.



optimusvlad
17 May 2009, 7:28 PM
Hello, All

First of, I would like to say how wonderful I find ExtJS. I find it a very well designed and intuitive API. Up to now, I have been able to figure things out from the docs and examples. Keep up the good work.

My question is very simple, though after trying different things for a while, I haven't been able to figure out how to get it working.

I would like to create a grid of configuration settings, in the form:

[NAME, VALUE]
foo, <combo-box>,
bar, <combo-box>,
....

I have been able to create the grid fine, but the combo-box's values is what's giving me some trouble.


I tried many versions of an ArrayStore to pass to the EditorGridPanel widget. This is what it currently looks like:



// List of available saved filters.
var filterStore = new Ext.data.ArrayStore({
fields: ['filterName', 'filterValue'],
data : [
['version',
[{name: 'foo', value: 'bar'},
{name: 'foo2', value: 'bar2'}
]
],
['assigned', ['foo', 'bar']]
]
});

The code for creating the grid panel is as follows. In the definition of function
_getFilters(filterStore), in creation of Ext.grid.EditorGridPanel, you can see the store being assigned.

var FilterPanel = function(savedFiltersMenu, filterStore) {

return {
id:'filter-panel',
region:'west',
title:'Filter Tasks',
split:true,
width: '100%',
minSize: 175,
maxSize: 400,
margins:'0 0 5 5',
cmargins:'0 5 5 5',
rootVisible:false,
lines:false,
autoScroll:true,
collapseFirst:false,
items: _getFilters(filterStore),
tbar: [{
text:'Apply',
handler: this.showWindow,
scope: this
}, {
id:'delete',
text:'Reset',
handler: function(){
alert('clicked');
},
scope: this
}, '->',
savedFiltersMenu, {
text:'Save',
scope: this
}
]
}
};

/************************************************************/

/**
* Get a grid of filters and filter values.
*/
function _getFilters(filterStore) {

// Value editor widget.
var combo = new Ext.form.ComboBox({
typeAhead: false,
triggerAction: 'all',
lazyRender:true,
listClass: 'x-combo-list-small'
});

// Grid column information.
var cm = new Ext.grid.ColumnModel([{
id:'filterName',
header: 'Filter',
dataIndex: 'filterName',
width: 100,
sortable: false
},{
id: 'filterValue',
header: "Value",
dataIndex: 'filterValue',
width: 125,
sortable: false,
mode: 'local',
editor: combo
}
]);

// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: filterStore,
height: 300,
cm: cm,
autoExpandColumn:'filterValue',
frame:0,
clicksToEdit:1
});

return grid;
}
Regards,

Vlad