Сетка Extjs с функцией множественного выбора для получения значения выбранных списков - PullRequest
Новая
       51

Сетка Extjs с функцией множественного выбора для получения значения выбранных списков

0 голосов
/ 11 августа 2011

Допустим, у меня включена сетка с опцией множественного выбора, когда пользователь выбирает 4 списка и хочет получить значения (оповещенные на экране), как бы я это сделал?А как бы отключить кнопки, пока не выбран хотя бы один список?

1 Ответ

5 голосов
/ 11 августа 2011

На все заданные вами вопросы уже дан ответ много раз.Также на sencha.com есть хороших примеров ExtJS .Например, сетка просмотра списка показывает множественный выбор и редактируемая сетка с доступным для записи хранилищем показывает кнопку включения при нажатии.Но САМОЕ важно документация !Позвольте мне объяснить функциональность следующего кода.Большая часть из примера list view.

Эта сетка получает JSON от list.php, которая имеет следующую структуру 

{"authors":[{"surname":"Autho1"},{"surname":"Autho2"}]}

И сетку: 

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.panel.*'
]);
Ext.onReady(function(){
    // Here i've definned simple model with just one field
    Ext.define('ImageModel', {
        extend: 'Ext.data.Model',
        fields: ['surname']
    });
    var store = Ext.create('Ext.data.JsonStore', {
        model: 'ImageModel',
        proxy: {
            type: 'ajax',
            url: 'list.php',
            reader: {
                type: 'json',
                root: 'authors'
            }
        }
    });
    store.load();

    var listView = Ext.create('Ext.grid.Panel', {
        id: 'myPanel', // Notice unique ID of panel
        width:425,
        height:250,
        collapsible:true,
        renderTo: Ext.getBody(),

        store: store,
        multiSelect: true,
        viewConfig: {
            emptyText: 'No authors to display'
        },

        columns: [{
            text: 'File',
            flex: 50,
            // dataIndex means which field from model to load in column
            dataIndex: 'surname' 
        }],
    dockedItems: [{
        xtype: 'toolbar',
        items: [{
            // This button will log to console authors surname who are selected
            // (show via firebug or in chrome js console for example)
            text: 'Show selected',
            handler: function() {
                // Notice that i'm using getCmp(unique Id of my panel) 
                // to get panel regerence. I could also use 
                // this.up('toolbar').up('myPanel')
                // see documentation for up() meaning
                var selection = Ext.getCmp('myPanel').getSelectionModel().getSelection();
                for (var i=0; i < selection.length; i++) {
                    console.log(selection[i].data.surname);
                }
            }
        },{
            text: 'Disabled btn',
            id: 'myHiddenBtn', // Notice unique ID of my button
            disabled: true // disabled by default
        }]
    }]
    });

    // Here i'm waiting for event which is fired
    // by grid panel automatically when you click on 
    // any item of grid panel. Then I lookup
    // my button via unique ID and set 'disabled' property to false
    listView.on('itemclick', function(view, nodes){
        Ext.getCmp('myHiddenBtn').setDisabled(false);
    });
});

Я не знал, как это сделать, но использовал документацию, и результат работает ;-).См. Панель сетки документы для получения дополнительной информации.

...