PDA

View Full Version : Help on Dynamic EditorGridPanel with selector & combobox columns



LatikaVig
11 Jan 2013, 3:20 AM
Hi Team,
Can you please help us in achieving this? We were trying to create a dynamic grid with 2 types of columns.
1. SampleColumn - an entity selector – pop up window with multiple entity data linked with the PK i.e. GUID
2. ReadingEditorColumn - A combo box which will have different data (either 2 values or 5) for each column.
Questions:
1. How can we get the selected entity’s GUID on selecting any of the entity for each row?
2. How can we assign unique values/data as store to each column dynamically? The value are available in the store fields items i.e. upperLimitFail, targetPass etc.
The code is as below:
var testDefaultColumns = [];
SampleColumn = {
width: 80,
allowBlank: false,
editable: true,
editor: {
xtype: 'sampleSelector',
allowBlank: false,
listeners: {
entityselect: function (cb, node) {
this.testStore.fields.item("SampleId").sampleId = node.id;
},
scope: this
}
},
sortable: false,
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
if (colIndex > 0) {
//store.fields.item("SampleId").sampleId = node.id;
}
return value;
}
};
ReadingEditorColumn = {
width: 50,
allowBlank: false,
editable: true,
editor: new Ext.form.ComboBox({
displayField: 'Name',
//valueField: 'Id',
forceSelection: true,
editable: false,
triggerAction: 'all',
lazyRender: false,
mode: 'local',
emptyText: ' --- SELECT --- ',
store: new Ext.data.ArrayStore({
autoDestroy: true,
fields: ['Name']
})
}),
sortable: false
};

var testStore = new Ext.data.JsonStore({
autoDestroy: true
});

testStore.addListener("metachange", function (store, meta) {

testGrid = Ext.getCmp('testGrid');
var testColumns = clone(testDefaultColumns);

for (var i = 1; i < meta.fields.length; i++) {
if (meta.fields[i].root == "RecordSample") {
if (meta.fields[i].header != null) {
if (meta.fields[i].type == "string") {
var editorAttributeEventColumn = clone(ReadingEditorColumn);

editorAttributeEventColumn.grid = testGrid;
editorAttributeEventColumn.header = meta.fields[i].header;
editorAttributeEventColumn.testID = meta.fields[i].testID;
editorAttributeEventColumn.dataIndex = meta.fields[i].name;
editorAttributeEventColumn.name = meta.fields[i].name;

if (meta.fields[i].upperLimitFail != "") {
var AttributeTestLimitData = [[meta.fields[i].upperLimitFail], [meta.fields[i].upperLimitWarning], [meta.fields[i].targetPass], [meta.fields[i].lowerLimitWarning], [meta.fields[i].lowerLimitFail]];
editorAttributeEventColumn.editor.store.loadData(AttributeTestLimitData);
testColumns.push(editorAttributeEventColumn);
} else {
var eventTestLimitData = [[meta.fields[i].targetPass], [meta.fields[i].lowerLimitFail]];
editorAttributeEventColumn.editor.store.loadData(eventTestLimitData);
testColumns.push(editorAttributeEventColumn);
}
//testColumns.push(editorAttributeEventColumn);
}
}
else if (meta.fields[i].header == "Sample") {
var sampleColumn = clone(SampleColumn)

sampleColumn.grid = testGrid;
sampleColumn.header = meta.fields[i].header;
sampleColumn.id = meta.fields[i].name;
sampleColumn.dataIndex = meta.fields[i].name;
sampleColumn.name = meta.fields[i].name;

testColumns.push(sampleColumn);
}
}
}

testGrid.reconfigure(testStore, new Ext.grid.ColumnModel(testColumns));
});

// Test Grid ----------------------------------------------------------------------
TestGrid = Ext.extend(Ext.grid.EditorGridPanel, {
id: 'testGrid',
enableColumnHide: false,
enableHdMenu: false,
enableColumnResize: false,
enableColumnMove: false,
enableDragDrop: false,
layout: 'fit',
columnLines: true,
frame: false,
viewConfig: { scrollOffset: 0, forceFit: true },
clicksToEdit: 1,
autoHeight: true,
autoScroll: true,
buttonAlign: 'left',
enableRowAdd: true,
store: testStore,
selModel: new Ext.grid.RowSelectionModel({ singleSelect: true }),
cm: new Ext.grid.ColumnModel(testDefaultColumns),
initComponent: function () {
this.gridValidator = new Ext.ux.grid.GridValidator();
this.plugins = this.gridValidator;
TestGrid.superclass.initComponent.call(this);
if (this.enableRowAdd) {
this.addButton({
iconCls: 'grid-add-button',
style: 'margin-left: -7px',
text: 'Add Line',
handler: function () {
var rowIndex = this.store.getCount();
var e = new testStore.reader.recordType();
this.stopEditing();
this.store.insert(rowIndex, e);
this.getView().refresh();
this.startEditing(rowIndex, 0);
},
scope: this
});
}
}
getDataItems: function () {
var dateItems = [];
var rows = this.store.getCount();
var r;
for (r = 0; r < rows; r++) {
var record = this.store.getAt(r);
if (record.dirty || (record.data && !isEmptyObject(record.data))) {
dateItems[dateItems.length] = record;
}
}
return dateItems;
}
});