Связь чекбоксов с grig

[Екатерина Машковская]

Добрый день. у меня тут возникла проблема.
У меня не получается настроить фильтрацию таблицы в зависимости от выбранного чекбокса.


Вот структура проекта

List.js
Ext.define('UserApp.view.user.List',
   {
    extend: 'Ext.grid.Panel',
    alias : 'widget.userList',
    store: 'User',
    title : 'Список пользователей',
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: 'User',   // mismo que el store GridPanel
        dock: 'bottom',
        displayInfo: true
    }],
    initComponent: function() {
        this.columns = [
            {header: 'Имя Фамилия',  dataIndex: 'name',  flex: 1},
            {header: 'Образование',  dataIndex: 'education',  flex: 1},
            {header: 'Город', dataIndex: 'city', flex: 1}
        ];
        this.callParent(arguments);
    }
   }
);

Ext.onReady(function(){
    var checkboxGroup = new Ext.form.CheckboxGroup({
        columns: 2,
        fieldLabel: 'Образование',
        name: 'education_check',
        style: {
            padding: '5px 10px 5px 10px'
        },
        items: [{
            xtype: 'checkbox',
            boxLabel: 'Среднее',
            name: 'education_check',
            id: '1',
	    handler: function() {
            var checked = Ext.getCmp('1').getValue();                                          
             /*
             что я только не пробовала вместо этого кода
             if(checked)
			 {
                 if (grid.store!=undefined) 
			     {
                    grid.store.filterBy(function(record) 
					 {
                        return record. === '' ;
                     });
                    grid.getView().refresh();
                 }

             }
            else{
                var grid = Ext.getCmp('');
                grid.store.clearFilter(true);
                grid.getView().refresh();
             }
          */
         }
        },
		{
            xtype: 'checkbox',
            boxLabel: 'Высшее',
            name: 'education_check',
            id: '2',
			handler: function() {
			
			
			}
        },
        {
            xtype: 'checkbox',
            boxLabel: 'Бакалавр',
            name: 'education_check',
            id: '3',
			handler: function() {
			
			
			}
        },
        {
            xtype: 'checkbox',
            boxLabel: 'Магистр',
            name: 'education_check',
            id: '4',
			handler: function() {
			
			
			}
        }]
    });
	
    var checkboxGroup2 = new Ext.form.CheckboxGroup({
        columns: 3,
        fieldLabel: 'Город',
        name: 'city_check',
        style: {
            padding: '5px 10px 5px 10px'
        },
        items: [{
            xtype: 'checkbox',
            boxLabel: 'Минск',
            name: 'city_check',
            inputValue: '1'
        },
		{
            xtype: 'checkbox',
            boxLabel: 'Брест',
            name: 'city_check',
            inputValue: '2'
         },
		 {
            xtype: 'checkbox',
            boxLabel: 'Витебск',
            name: 'city_check',
            inputValue: '3'
         },
         {
            xtype: 'checkbox',
            boxLabel: 'Гомель',
            name: 'city_check',
            inputValue: '4'
         },
         {
            xtype: 'checkbox',
            boxLabel: 'Гродно',
            name: 'city_check',
            inputValue: '5'
         },  
         {
            xtype: 'checkbox',
            boxLabel: 'Могилев',
            name: 'city_check',
            inputValue: '6'
         }]
    });
    var panel = new Ext.Panel({
        renderTo: Ext.getBody(),
        width:400,
        height:150,
        items: [checkboxGroup,checkboxGroup2]
    });
});

[novikov]

для чекбокса вы определяете handler. В нём можно использовать два параметра checkbox и checked.

handler: function(checkbox, checked) { ... }

Дальше нужно найти компонент грида извлечь из него стор при помощи getStore() и отфильтровать записи.

Накидал примерчик в Fiddle.

Ext.application({
    name : 'Fiddle',

    launch : function() {
        
        Ext.create('Ext.container.Container', {
            renderTo: Ext.getBody(),
            width: 300,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            itemId: 'myContainer',
            items: [
                {
                    xtype: 'grid',
                    itemId: 'myGrid',
                    flex: 1,
                    store: Ext.create('Ext.data.Store', {
                        fields: [
                            { name: 'education', type: 'string' }
                        ],
                        data: [
                            { education: 'Высшее' },
                            { education: 'Среднее' }
                        ]
                    }),
                    //plugins: 'gridfilters',
                    columns: [
                        {
                            header: 'Образование',
                            dataIndex: 'education',
                            flex: 1//,
                            //filter: {
                            //    type: 'list'
                            //}
                        }
                    ]
                },
                {
                    xtype: 'checkboxgroup',
                    flex: 1,
                    fieldLabel: 'Образование',
                    items: [
                        {
                            xtype: 'checkbox',
                            boxLabel: 'Среднее',
                            handler: function(checkbox, checked) {
                                
                                var grid = checkbox.up('#myContainer').down('#myGrid');
                                var store = grid.getStore();
                                if (checked) {
                                    store.filterBy(function(record) {
                                        return record.get('education') === checkbox.initialConfig.boxLabel;
                                    });
                                } else {
                                    store.clearFilter();
                                }
                            }
                        }
                    ]
                }
            ]
        });
    }
});

Либо используйте плагин gridfilters - пример.

[Екатерина Машковская]

проблема в том, что данные в grid подтягиваются c БД
они формируются с помощью php
а еще мне же нужно учесть, что могут быть выбраны сразу несколько чекбоксов

[Екатерина Машковская]

могу выслать код формирования базы

[novikov]

по-моему, при старте приложения вам нужно запросить у веб-сервера списки уникальных значений в полях "Город" и "Образование", затем динамически сформировать набор чекбоксов для каждого поля. Когда пользователь щёлкнет по чекбоксу, не нужно фильтровать стор грида методом filterBy. Нужно заставить стор обновиться через метод load и передать на сервер все значения чекбоксов.

myGrid.getStore().load({
    params: {
        city: ['Витебск', 'Могилёв'],
        education: ['Высшее']
    }
}
});

Для сбора значений фильтра лучше назначить один обработчик в контроллере для всех чекбоксов, навесив его на событие change.

Если будет проблематично настроить proxy для стора Users, можно подгружать данные через Ext.Ajax.request() и затем отправлять их в стор через store.loadData(myData).

Какую версию ExtJs вы используете? Как у вас настроен store таблицы?