ExtJs dos o más cuadrículas en la misma página

3

Soy nuevo en ExtJS.

Tengo dos cuadrículas en la misma página. La primera cuadrícula tiene 3 columnas. Segundo solo uno. El problema es que cuando se renderiza la segunda, se sobrescriben las propiedades de la primera cuadrícula.

Por ejemplo, cuando intento editar la fila en la primera cuadrícula, toma el ancho de la fila de la segunda cuadrícula.

var $booleanArray = [
    ['denied', 'Denied'],
    ['allowed', 'Allowed']
];

var myPageSize = 10;

Ext.Loader.setConfig({ enabled: true });

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*'
]);

Ext.onReady(function () {

    Ext.define('CharacteristicModel', {
        extend: 'Ext.data.Model',
        fields: [ {name: 'name'}, {name: 'value'}, {name: 'order'} ],
        validations: [
            {
                type : 'length',
                field: 'name',
                min  : 1
            }
        ]
    });

    var characteristicsStore = new Ext.data.Store({
        proxy    : {
            model   : 'CharacteristicModel',
            type    : 'rest',
            api     : {
                read   : admin_path + '/getCharacteristics/1/',
                create : admin_path + '/saveCharacteristics/1/',
                update : admin_path + '/saveCharacteristics/1/',
                destroy: admin_path + '/destroyCharacteristic/1/'
            },
            reader  : {
                type         : 'json',
                root         : 'data',
                totalProperty: 'total_count'
            },
            writer  : {
                type: 'json',
                root: 'data'
            },
            buffered: true
        },
        listeners: {
            read : function (response) {
            },
            load : function (store) {
            },
            write: function (store, operation) {
                store.load();
            }
        },
        pageSize : myPageSize,
        autoLoad : { start: 0, limit: myPageSize },
        autoSync : true
    });

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

    var characteristicsGrid = new Ext.grid.GridPanel({
        id         : 'characteristicsGrid',
        renderTo   : 'characteristics_grid_div_1',
        store      : characteristicsStore,
        width      : 480,
        stateful   : true,
        stateId    : 'characteristicsGrid',
        title      : 'Grid "1"',
        iconCls    : 'icon-user',
        listeners  : {
            itemdblclick: function (dv, row, item, index, e) {
                dv.refresh();
                dv.getGridColumns()[0].setEditor({
                    disabled: true,
                    editable: false
                });

                if (row.data.id == 6 || row.data.id == 7) {
                    dv.getGridColumns()[1].setEditor({
                        xtype        : 'combo',
                        store        : new Ext.data.ArrayStore({
                            fields: ['abbr', 'action'],
                            data  : $booleanArray
                        }),
                        displayField : 'action',
                        valueField   : 'abbr',
                        mode         : 'local',
                        typeAhead    : false,
                        triggerAction: 'all',
                        lazyRender   : true,
                        emptyText    : 'Select action'
                    });
                }
                else if (row.data.id == 8 || row.data.id == 11) {
                    dv.getGridColumns()[1].setEditor({
                        disabled: true,
                        editable: false
                    });
                }
                else {
                    dv.getGridColumns()[1].setEditor({
                        xtype: 'textfield'
                    });
                }
            }
        },
        columns    : [
            {
                id       : 'name',
                text     : 'Account characteristic',
                sortable : false,
                width    : 340,
                fixed    : true,
                dataIndex: 'name'
            },
            {
                id       : 'value',
                text     : 'Value',
                sortable : false,
                dataIndex: 'value',
                width    : 70,
                fixed    : true,
                editor   : {
                    xtype: 'textfield'
                },
                renderer : function (value, field) {
                    if (field.record.data.id == 6 || field.record.data.id == 7) {

                        if ($booleanArray[0][0] != value) {
                            value = $booleanArray[1][1];
                        }
                        else {
                            value = $booleanArray[0][1];
                        }
                    }
                    return value;
                }
            },
            {
                id       : 'order',
                text     : 'Order',
                sortable : false,
                dataIndex: 'order',
                width    : 70,
                fixed    : true,
                editor   : {
                    xtype: 'textfield'
                },
                renderer : function (value, field) {
                    return value;
                }
            }
        ],
        bbar       : Ext.create('Ext.PagingToolbar', {
            store      : characteristicsStore,
            displayInfo: true,
            pageSize   : myPageSize,
            displayMsg : 'Show {0} - {1} из {2}',
            emptyMsg   : "0 rows"
        }),
        dockedItems: [
            {
                xtype: 'toolbar',
                items: [
                    {
                        text   : 'Add',
                        iconCls: 'icon-add',
                        handler: function () {
                            var grid_colums = rowEditing.cmp.getSelectionModel().view.getGridColumns();
                            grid_colums[0].setEditor({
                                xtype        : 'combo',
                                store        : new Ext.data.ArrayStore({
                                    fields: ['id', 'name'],
                                    data  : $characteristics
                                }),
                                displayField : 'name',
                                valueField   : 'id',
                                mode         : 'local',
                                typeAhead    : false,
                                triggerAction: 'all',
                                lazyRender   : true,
                                emptyText    : 'Select action'
                            });
                            grid_colums[1].setEditor({
                                xtype: 'textfield'
                            });
                            // empty record
                            //characteristicsStore.autoSync = false;
                            characteristicsStore.insert(0, new CharacteristicModel());
                            rowEditing.startEdit(0, 0);
                            //characteristicsStore.autoSync = true;
                        }
                    },
                    '-',
                    {
                        itemId  : 'delete',
                        text    : 'Delete',
                        iconCls : 'icon-delete',
                        disabled: true,
                        handler : function () {
                            var selection = characteristicsGrid.getView().getSelectionModel().getSelection()[0];
                            if (selection) {
                                characteristicsStore.remove(selection);
                            }
                        }
                    }
                ]
            }
        ],
        plugins    : [rowEditing]
    });

    characteristicsGrid.getSelectionModel().on('selectionchange', function (selModel, selections) {
        characteristicsGrid.down('#delete').setDisabled(selections.length === 0);
    });

});


Ext.onReady(function () {

    Ext.define('AdvantagesModel', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'name'}
        ]
    });

    // setup the state provider, all state information will be saved to a cookie
    //Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

    var advantagesStore = new Ext.data.Store({
        idProperty: 'AdvantagesModel',
        proxy    : {
            model   : 'AdvantagesModel',
            type    : 'rest',
            api     : {
                read   : admin_path + '/getAdvantages/1/',
                create : admin_path + '/saveAdvantages/1/',
                destroy: admin_path + '/destroyAdvantages/1/'
            },
            reader  : {
                type         : 'json',
                root         : 'data',
                totalProperty: 'totalCount'
            },
            writer  : {
                type: 'json',
                root: 'data'
            },
            buffered: true
        },
        listeners: {
            read : function (response) {
            },
            load : function (store) {
            },
            write: function (store, operation) {
                store.load();
            }
        },
        pageSize : myPageSize,
        autoLoad : { start: 0, limit: myPageSize },
        autoSync : true
    });

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

    var advantagesGrid = new Ext.grid.GridPanel({
        id         : 'advantagesGrid',
        renderTo   : 'advantages_grid_div_1',
        store      : advantagesStore,
        width      : 482,
        height     : 355,
        stateful   : true,
        stateId    : 'advantagesGrid',
        title      : 'Grid 2',
        iconCls    : 'icon-user',
        listeners  : {
            beforeedit: function (dv, row, item) {
                //advantagesGrid.getView().refresh();
                if (row.record.raw)
                {
                    return false;
                }
            }
        },
        columns    : [
            {
                id       : 'name',
                text     : 'Advantages',
                sortable : false,
                dataIndex: 'name',
                width    : 480
            }
        ],
        bbar       : Ext.create('Ext.PagingToolbar', {
            store      : advantagesStore,
            displayInfo: true,
            pageSize   : myPageSize,
            displayMsg : 'Show {0} - {1} из {2}',
            emptyMsg   : "0 rows"
        }),
        dockedItems: [
            {
                xtype: 'toolbar',
                items: [
                    {
                        text   : 'Add',
                        iconCls: 'icon-add',
                        handler: function () {
                            var grid_colums = rowEditing.cmp.getSelectionModel().view.getGridColumns();
                            grid_colums[0].setEditor({
                                xtype        : 'combo',
                                store        : new Ext.data.ArrayStore({
                                    fields: ['id', 'name'],
                                    data  : $advantages
                                }),
                                displayField : 'name',
                                valueField   : 'id',
                                mode         : 'local',
                                typeAhead    : false,
                                triggerAction: 'all',
                                lazyRender   : true,
                                emptyText    : 'Select action'
                            });
                            // empty record
                            advantagesStore.autoSync = false;
                            advantagesStore.insert(0, new AdvantagesModel());
                            rowEditing.startEdit(0, 0);
                            advantagesStore.autoSync = true;
                        }
                    },
                    '-',
                    {
                        itemId  : 'delete',
                        text    : 'Delete',
                        iconCls : 'icon-delete',
                        disabled: true,
                        handler : function () {
                            var selection = advantagesGrid.getView().getSelectionModel().getSelection()[0];
                            if (selection) {
                                advantagesStore.remove(selection);
                            }
                        }
                    }
                ]
            }
        ],
        plugins    : [rowEditing]
    });

    advantagesGrid.getSelectionModel().on('selectionchange', function (selModel, selections) {
        advantagesGrid.down('#delete').setDisabled(selections.length === 0);
    });

});
1
  • Debe usar dos objetos diferentes de la clase Ext.grid.plugin.RowEditing para diferentes cuadrículas. 1/10/18 a las 10:22
3

La alternativa a tener sus dos columnas de identificación de cuadrícula identificadas de manera diferente es tener dos instancias / objetos diferentes de la clase Ext.grid.plugin.RowEditing si tiene dos cuadrículas editables en la misma página. Muchas veces es importante tener la misma identificación.

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

var rowEditing2 = Ext.create('Ext.grid.plugin.RowEditing');

plugins    : [rowEditing]

plugins    : [rowEditing2]
0

encontrado el problema.

columns    : [
        {
            id       : 'name',

Los ID de las columnas deben ser diferentes, incluso si están en diferentes cuadrículas

1
  • 3
    use itemId en lugar de id. Tiene un alcance por objeto 10/04/2013 a las 19:16