1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    1
    Vote Rating
    0
    LatikaVig is on a distinguished road

      0  

    Default Help on Dynamic EditorGridPanel with selector & combobox columns

    Help on Dynamic EditorGridPanel with selector & combobox columns


    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;
    }
    });
    Attached Files