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

@Хани · Регистрация: 19.12.2011

Студворк — интернет-сервис помощи студентам

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

http://i9.pixs.ru/storage/4/1/... 687412.png
Вот структура проекта
http://i9.pixs.ru/storage/6/0/... 687604.png

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
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]
    });
});

Donald28 · 22.01.2015, 08:47

Скорее всего, ты не смог определить свой грид, для которого надо применить фильтр.
к гриду кидаешь id. Допустим он равен 'my_grid'. Пишем код для группы чекбоксов:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var checkboxGroup = new Ext.form.CheckboxGroup({
            columns: 2,
            fieldLabel: 'Образование',
            name: 'education_check',
            style: {
                padding: '5px 10px 5px 10px'
            },
            items: [{
                xtype: 'checkbox',
                boxLabel: 'Среднее',
                name: 'middle', // тут в качестве name надо писать значение "образования"
            },{
                xtype: 'checkbox',
                boxLabel: 'Высшее',
                name: 'high', // тут в качестве name надо писать значение "образования"
            }],
            listeners: { // обработчик сгруппированных чекбоксов
                change: function(checkboxgroup , newValue){ // отслеживаем изменение значения чекбокса в группе
                    var grid = Ext.getCmp('my_grid'), // находим грид
                    store = grid.getStore(); // получаем стор для грида
 
                    store.clearFilter(true); // очищаем фильтр стора (желательно всегда это делать иначе фильтры будут складываться)
 
                    Ext.Object.each( newValue, function(key, value) { // проходимся по всем значениям чекбоксов в группе
                          store.filter({
                                property: 'education',
                                value: key,
                          });
                    });
                },
            },
 
        });

@Хани · 22.01.2015, 11:04 **[ТС]**

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

Donald28 · 22.01.2015, 11:13

какая разница? стор для грида является обязательным, а как этот стор формируется - не имеет никакого значения

@Хани · 22.01.2015, 11:15 **[ТС]**

мне выдает ошибку
Uncaught TypeError: Cannot read property 'getStore' of undefined

Donald28 · 22.01.2015, 12:57

это означает, что переменная grid пустая. Т.е. скрипт не нашел твою таблицу
ты id поставил для грид?

@Хани · 22.01.2015, 13:20 **[ТС]**

Вроде да

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Ext.define('UserApp.view.user.List',
   {
    extend: 'Ext.grid.Panel',
    itemId: 'my_grid',
    alias : 'widget.userList',
    store: 'User',
    title : 'Список пользователей',
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: 'User',
        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);
    }
   }
);

или не тут надо?
и я поставилА =)

Donald28 · 22.01.2015, 13:32

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Ext.define('UserApp.view.user.List',
   {
    extend: 'Ext.grid.Panel',
    id: 'my_grid', // !!! вот так надо
    alias : 'widget.userList',
    store: 'User',
    title : 'Список пользователей',
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: 'User',
        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);
    }
   }
);

Не по теме:

Сообщение от Хани

и я поставилА =)

Процитирую фразу из фильма "В джазе только девушки": У каждого свои недостатки ))

@Хани · 22.01.2015, 13:49 **[ТС]**

Так с эти разобралась.
Но теперь другая проблема, он выбирает только один активный чекбокс.
А как сделать, что бы если я выберу один город и одно образование, то выводил соответствующую строку двум параметрам. Или два образования, два города

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
Ext.define('UserApp.view.user.List',
   {
    extend: 'Ext.grid.Panel',
    id: 'myGrid',
    alias : 'widget.userList',
    store: 'User',
    title : 'Список пользователей',
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: 'User',
        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: 'Среднее',
            id: '1',
            handler: function(checkbox, checked) {
                var grid = Ext.getCmp('myGrid');
                var store = grid.getStore();
                if (checked) {
                    store.filterBy(function(record) {
                        return record.get('education') === checkbox.initialConfig.boxLabel;
                    });
                } else {
                    store.clearFilter();
                }
            }
        },
        {
            xtype: 'checkbox',
            boxLabel: 'Высшее',
            id: '2',
            handler: function(checkbox, checked) {
                var grid = Ext.getCmp('myGrid');
                var store = grid.getStore();
                if (checked) {
                    store.filterBy(function(record) {
                        return record.get('education') === checkbox.initialConfig.boxLabel;
                    });
                } else {
                    store.clearFilter();
                }
            }
        },
        {
            xtype: 'checkbox',
            boxLabel: 'Бакалавр',
            name: 'education',
            id: '3',
            handler: function(checkbox, checked) {
                var grid = Ext.getCmp('myGrid');
                var store = grid.getStore();
                if (checked) {
                    store.filterBy(function(record) {
                        return record.get('education') === checkbox.initialConfig.boxLabel;
                    });
                } else {
                    store.clearFilter();
                }
            }
        },
        {
            xtype: 'checkbox',
            boxLabel: 'Магистр',
            name: 'education',
            id: '4',
            handler: function(checkbox, checked) {
                var grid = Ext.getCmp('myGrid');
                var store = grid.getStore();
                if (checked) {
                    store.filterBy(function(record) {
                        return record.get('education') === checkbox.initialConfig.boxLabel;
                    });
                } else {
                    store.clearFilter();
                }
            }
        }]
    });
    
    var checkboxGroup2 = new Ext.form.CheckboxGroup({
        columns: 3,
        fieldLabel: 'Город',
        name: 'city_check',
        style: {
            padding: '5px 10px 5px 10px'
        },
        items: [{
            xtype: 'checkbox',
            boxLabel: 'Минск',
            handler: function(checkbox, checked) {
                var grid = Ext.getCmp('myGrid');
                var store = grid.getStore();
                if (checked) {
                    store.filterBy(function(record) {
                        return record.get('city') === checkbox.initialConfig.boxLabel;
                    });
                } else {
                    store.clearFilter();
                }
            }
        },
        {
            xtype: 'checkbox',
            boxLabel: 'Брест',
            handler: function(checkbox, checked) {
                var grid = Ext.getCmp('myGrid');
                var store = grid.getStore();
                if (checked) {
                    store.filterBy(function(record) {
                        return record.get('city') === checkbox.initialConfig.boxLabel;
                    });
                } else {
                    store.clearFilter();
                }
            }
         },
         {
            xtype: 'checkbox',
            boxLabel: 'Витебск',
             handler: function(checkbox, checked) {
                 var grid = Ext.getCmp('myGrid');
                 var store = grid.getStore();
                 if (checked) {
                     store.filterBy(function(record) {
                         return record.get('city') === checkbox.initialConfig.boxLabel;
                     });
                 } else {
                     store.clearFilter();
                 }
             }
         },
         {
            xtype: 'checkbox',
            boxLabel: 'Гомель',
             handler: function(checkbox, checked) {
                 var grid = Ext.getCmp('myGrid');
                 var store = grid.getStore();
                 if (checked) {
                     store.filterBy(function(record) {
                         return record.get('city') === checkbox.initialConfig.boxLabel;
                     });
                 } else {
                     store.clearFilter();
                 }
             }
         },
         {
            xtype: 'checkbox',
            boxLabel: 'Гродно',
             handler: function(checkbox, checked) {
                 var grid = Ext.getCmp('myGrid');
                 var store = grid.getStore();
                 if (checked) {
                     store.filterBy(function(record) {
                         return record.get('city') === checkbox.initialConfig.boxLabel;
                     });
                 } else {
                     store.clearFilter();
                 }
             }
         },  
         {
            xtype: 'checkbox',
            boxLabel: 'Могилев',
             handler: function(checkbox, checked) {
                 var grid = Ext.getCmp('myGrid');
                 var store = grid.getStore();
                 if (checked) {
                     store.filterBy(function(record) {
                         return record.get('city') === checkbox.initialConfig.boxLabel;
                     });
                 } else {
                     store.clearFilter();
                 }
             }
         }]
    });
    var panel = new Ext.Panel({
        renderTo: Ext.getBody(),
        width:400,
        height:150,
        items: [checkboxGroup,checkboxGroup2]
    });
});

СПАСИБО ЗА ПОМОЩЬ!!!

Donald28 · 22.01.2015, 14:27

я не понимаю, почему вы не понравился мой вариант обработки выбора checkbox

В вашем коде я предвижу неисправность: выберите сначала среднее образование. Затем выберите высшее образование. А после уберите галочку с высшего - в итоге вам покажется весь список пользователей

@Хани · 22.01.2015, 16:22 **[ТС]**

я пробовала и со своим кодом и с Вашем.
Проблема все равно одна и та же: Список не выводится, если нажато больше одно чекбокса.
И при использовании Вашего года, при отмене чекбокса, он не возвращает весь список

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
Ext.define('UserApp.view.user.List',
   {
    extend: 'Ext.grid.Panel',
    id: 'myGrid',
    alias : 'widget.userList',
    store: 'User',
    title : 'Список пользователей',
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: 'User',
        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: 'Среднее'
        },{
            xtype: 'checkbox',
            boxLabel: 'Высшее',
            name: 'Высшее'
        },{
            xtype: 'checkbox',
            boxLabel: 'Бакалавр',
            name: 'Бакалавр'
        },{
            xtype: 'checkbox',
            boxLabel: 'Магистр',
            name: 'Магистр'
        }],
        listeners: {
            change: function(checkboxgroup , newValue){
                var grid = Ext.getCmp('myGrid'),
                    store = grid.getStore();
 
                store.clearFilter(true);
 
                Ext.Object.each( newValue, function(key, value) {
                    store.filter({
                        property: 'education',
                        value: key
                    });
                });
            }
        }
    });
 
    var checkboxGroup2 = new Ext.form.CheckboxGroup({
        columns: 3,
        fieldLabel: 'Город',
        name: 'city_check',
        style: {
            padding: '5px 10px 5px 10px'
        },
        items: [{
            xtype: 'checkbox',
            boxLabel: 'Минск',
            handler: function(checkbox, checked) {
                var grid = Ext.getCmp('myGrid');
                var store = grid.getStore();
                if (checked) {
                    store.filterBy(function(record) {
                        return record.get('city') === checkbox.initialConfig.boxLabel;
                    });
                } else {
                    store.clearFilter();
                }
            }
        },
        {
            xtype: 'checkbox',
            boxLabel: 'Брест',
            handler: function(checkbox, checked) {
                var grid = Ext.getCmp('myGrid');
                var store = grid.getStore();
                if (checked) {
                    store.filterBy(function(record) {
                        return record.get('city') === checkbox.initialConfig.boxLabel;
                    });
                } else {
                    store.clearFilter();
                }
            }
         },
         {
            xtype: 'checkbox',
            boxLabel: 'Витебск',
             handler: function(checkbox, checked) {
                 var grid = Ext.getCmp('myGrid');
                 var store = grid.getStore();
                 if (checked) {
                     store.filterBy(function(record) {
                         return record.get('city') === checkbox.initialConfig.boxLabel;
                     });
                 } else {
                     store.clearFilter();
                 }
             }
         },
         {
            xtype: 'checkbox',
            boxLabel: 'Гомель',
             handler: function(checkbox, checked) {
                 var grid = Ext.getCmp('myGrid');
                 var store = grid.getStore();
                 if (checked) {
                     store.filterBy(function(record) {
                         return record.get('city') === checkbox.initialConfig.boxLabel;
                     });
                 } else {
                     store.clearFilter();
                 }
             }
         },
         {
            xtype: 'checkbox',
            boxLabel: 'Гродно',
             handler: function(checkbox, checked) {
                 var grid = Ext.getCmp('myGrid');
                 var store = grid.getStore();
                 if (checked) {
                     store.filterBy(function(record) {
                         return record.get('city') === checkbox.initialConfig.boxLabel;
                     });
                 } else {
                     store.clearFilter();
                 }
             }
         },  
         {
            xtype: 'checkbox',
            boxLabel: 'Могилев',
             handler: function(checkbox, checked) {
                 var grid = Ext.getCmp('myGrid');
                 var store = grid.getStore();
                 if (checked) {
                     store.filterBy(function(record) {
                         return record.get('city') === checkbox.initialConfig.boxLabel;
                     });
                 } else {
                     store.clearFilter();
                 }
             }
         }]
    });
 
 
 
    var panel = new Ext.Panel({
        renderTo: Ext.getBody(),
        width:400,
        height:150,
        items: [checkboxGroup,checkboxGroup2]
    });
});

Donald28 · 23.01.2015, 08:45

для того, чтобы таблица фильтровалась по двум CheckGroup надо вторую CheckGroup ("Город") переписать в том же духе как и первую ("Образование").

обработчик события change для первого CheckGroup будет выглядеть так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
                var grid = Ext.getCmp('myGrid'),
                    store = grid.getStore();
 
                store.clearFilter(true);
 
                Ext.Object.each( newValue, function(key, value) {
                    store.filter({
                        property: 'education',
                        value: key
                    });
                });
                Ext.Object.each( checkboxGroup2.getValue(), function( key, value ) {
                    store.filter({
                        property: 'city',
                        value: key,
                    });
                });

По аналогии пишите такой же обработчик и для второй CheckGroup

@Хани · 23.01.2015, 09:26 **[ТС]**

Проблема: Список не выводится, если нажато больше одно чекбокса, если они из одной группы. Наример я хочу посмотреть только высшее и среднее образование, либо людей и из Минска, и из Гомеля.
Также при отмене чекбоксов, он не возвращает весь список

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
    var checkboxGroup = new Ext.form.CheckboxGroup({
        columns: 2,
        fieldLabel: 'Образование',
        name: 'education_check',
        style: {
            padding: '5px 10px 5px 10px'
        },
        items: [{
            xtype: 'checkbox',
            boxLabel: 'Среднее',
            name: 'Среднее'
        },{
            xtype: 'checkbox',
            boxLabel: 'Высшее',
            name: 'Высшее'
        },{
            xtype: 'checkbox',
            boxLabel: 'Бакалавр',
            name: 'Бакалавр'
        },{
            xtype: 'checkbox',
            boxLabel: 'Магистр',
            name: 'Магистр'
        }],
        listeners: {
            change: function(checkboxgroup , newValue){
                var grid = Ext.getCmp('myGrid'),
                    store = grid.getStore();
 
                store.clearFilter(true);
 
                Ext.Object.each( newValue, function(key, value) {
                    store.filter({
                        property: 'education',
                        value: key
                    });
                });
                Ext.Object.each( checkboxGroup2.getValue(), function( key, value ) {
                    store.filter({
                        property: 'city',
                        value: key
                    });
                });
            }
        }
    });
 
    var checkboxGroup2 = new Ext.form.CheckboxGroup({
        columns: 3,
        fieldLabel: 'Город',
        name: 'city_check',
        style: {
            padding: '5px 10px 5px 10px'
        },
        items: [{
            xtype: 'checkbox',
            boxLabel: 'Минск',
            name: 'Минск'
        },{
            xtype: 'checkbox',
            boxLabel: 'Брест',
            name: 'Брест'
        },{
            xtype: 'checkbox',
            boxLabel: 'Витебск',
            name: 'Витебск'
        },{
            xtype: 'checkbox',
            boxLabel: 'Гомель',
            name: 'Гомель'
        },{
            xtype: 'checkbox',
            boxLabel: 'Гродно',
            name: 'Гродно'
        },{
            xtype: 'checkbox',
            boxLabel: 'Могилев',
            name: 'Могилев'
        }],
        listeners: {
            change: function(checkboxgroup , newValue){
                var grid = Ext.getCmp('myGrid'),
                    store = grid.getStore();
 
                store.clearFilter(true);
 
                Ext.Object.each( newValue, function(key, value) {
                    store.filter({
                        property: 'city',
                        value: key
                    });
                });
                Ext.Object.each( checkboxGroup.getValue(), function( key, value ) {
                    store.filter({
                        property: 'education',
                        value: key
                    });
                });
            }
        }
    });
 
    var panel = new Ext.Panel({
        renderTo: Ext.getBody(),
        width:400,
        height:150,
        items: [checkboxGroup,checkboxGroup2]
    });
});

Donald28 · 23.01.2015, 11:12

да, это мой просчет. Фильтры складываются в логике И, а не в логике ИЛИ. Поэтому пойдем следующим путем:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
                var grid = Ext.getCmp('myGrid'),
                    store = grid.getStore();
 
                store.clearFilter(true);
 
                var eduArray = []; // в этом массиве будем хранить выбранные значения для фильтра 
                Ext.Object.each( newValue, function(key, value) {
                    eduArray.push( key ); // добавляем в указанный выше массив новое значение
 
                });
                // добавляем фильтр по образованию
                store.filter({
                    filterFn: function( item ){
                         return Ext.Array.contains(eduArray, item.education);
                    }
                });
 
                // проделываем тоже самое с другим фильтром
                var cityArray = [];
                Ext.Object.each( checkboxGroup2.getValue(), function( key, value ) {
                    cityArray.push( key );
                });
 
                // добавляем фильтр по городу
                store.filter({
                    filterFn: function( item ){
                         return Ext.Array.contains(cityArray , item.city);
                    }
                });

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

В случае если нужны люди с каким-то образованием ИЛИ из какого-то города, то надо переделать следующим образом:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
                var grid = Ext.getCmp('myGrid'),
                    store = grid.getStore();
 
                store.clearFilter(true);
 
                // формируем массивы
                var eduArray = [],
                cityArray = [];
                Ext.Object.each( newValue, function(key, value) {
                    eduArray.push( key );
                });
                Ext.Object.each( checkboxGroup2.getValue(), function( key, value ) {
                    cityArray.push( key );
                });
 
                // добавляем фильтр
                store.filter({
                    filterFn: function( item ){
                         return ( Ext.Array.contains(eduArray, item.education) || Ext.Array.contains(cityArray , item.city));
                    }
                });

@Хани · 23.01.2015, 12:51 **[ТС]**

вот так должно быть?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
var checkboxGroup = new Ext.form.CheckboxGroup({
        columns: 2,
        fieldLabel: 'Образование',
        name: 'education_check',
        style: {
            padding: '5px 10px 5px 10px'
        },
        items: [{
            xtype: 'checkbox',
            boxLabel: 'Среднее',
            name: 'Среднее'
        },{
            xtype: 'checkbox',
            boxLabel: 'Высшее',
            name: 'Высшее'
        },{
            xtype: 'checkbox',
            boxLabel: 'Бакалавр',
            name: 'Бакалавр'
        },{
            xtype: 'checkbox',
            boxLabel: 'Магистр',
            name: 'Магистр'
        }],
        listeners: {
            change: function(checkboxgroup , newValue){
                var grid = Ext.getCmp('myGrid'),
                    store = grid.getStore();
 
                store.clearFilter(true);
 
                var eduArray = []; // в этом массиве будем хранить выбранные значения для фильтра
                Ext.Object.each( newValue, function(key, value) {
                    eduArray.push( key ); // добавляем в указанный выше массив новое значение
 
                });
                // добавляем фильтр по образованию
                store.filter({
                    filterFn: function( item ){
                        return Ext.Array.contains(eduArray, item.education);
                    }
                });
            }
        }
    });
 
    var checkboxGroup2 = new Ext.form.CheckboxGroup({
        columns: 3,
        fieldLabel: 'Город',
        name: 'city_check',
        style: {
            padding: '5px 10px 5px 10px'
        },
        items: [{
            xtype: 'checkbox',
            boxLabel: 'Минск',
            name: 'Минск'
        },{
            xtype: 'checkbox',
            boxLabel: 'Брест',
            name: 'Брест'
        },{
            xtype: 'checkbox',
            boxLabel: 'Витебск',
            name: 'Витебск'
        },{
            xtype: 'checkbox',
            boxLabel: 'Гомель',
            name: 'Гомель'
        },{
            xtype: 'checkbox',
            boxLabel: 'Гродно',
            name: 'Гродно'
        },{
            xtype: 'checkbox',
            boxLabel: 'Могилев',
            name: 'Могилев'
        }],
        listeners: {
            change: function(checkboxgroup , newValue){
                var grid = Ext.getCmp('myGrid'),
                    store = grid.getStore();
 
                store.clearFilter(true);
 
                var cityArray = [];
                Ext.Object.each( checkboxGroup2.getValue(), function( key, value ) {
                    cityArray.push( key );
                });
 
                // добавляем фильтр по городу
                store.filter({
                    filterFn: function( item ){
                        return Ext.Array.contains(cityArray , item.city);
                    }
                });
            }
        }
    });

Donald28 · 23.01.2015, 15:20

нет,
все что я написал выше - для

JavaScript
1
var checkboxGroup = new Ext.form.CheckboxGroup({

@Хани · 23.01.2015, 17:09 **[ТС]**

а для второй группы чекбоксов что тогда будет?

Donald28 · 23.01.2015, 18:00

практически тоже самое:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
                var grid = Ext.getCmp('myGrid'),
                    store = grid.getStore();
 
                store.clearFilter(true);
 
                var eduArray = []; // в этом массиве будем хранить выбранные значения для фильтра 
                Ext.Object.each( checkboxGroup.getValue(), function(key, value) { // !!тут меняем!!
                    eduArray.push( key ); // добавляем в указанный выше массив новое значение
 
                });
                // добавляем фильтр по образованию
                store.filter({
                    filterFn: function( item ){
                         return Ext.Array.contains(eduArray, item.education);
                    }
                });
 
                // проделываем тоже самое с другим фильтром
                var cityArray = [];
                Ext.Object.each( newValue, function( key, value ) { // !! и тут меняем!!
                    cityArray.push( key );
                });
 
                // добавляем фильтр по городу
                store.filter({
                    filterFn: function( item ){
                         return Ext.Array.contains(cityArray , item.city);
                    }
                });

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@Хани 0 / 0 / 0 Регистрация: 19.12.2011 Сообщений: 13
	22.01.2015, 11:04 [ТС]
	проблема в том, что данные в grid подтягиваются c БД они формируются с помощью php 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	22.01.2015, 11:13
	какая разница? стор для грида является обязательным, а как этот стор формируется - не имеет никакого значения 0

@Хани 0 / 0 / 0 Регистрация: 19.12.2011 Сообщений: 13
	22.01.2015, 11:15 [ТС]
	мне выдает ошибку Uncaught TypeError: Cannot read property 'getStore' of undefined 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	22.01.2015, 12:57
	это означает, что переменная grid пустая. Т.е. скрипт не нашел твою таблицу ты id поставил для грид? 1

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	22.01.2015, 14:27
	я не понимаю, почему вы не понравился мой вариант обработки выбора checkbox В вашем коде я предвижу неисправность: выберите сначала среднее образование. Затем выберите высшее образование. А после уберите галочку с высшего - в итоге вам покажется весь список пользователей 0

@Хани 0 / 0 / 0 Регистрация: 19.12.2011 Сообщений: 13
	23.01.2015, 17:09 [ТС]
	а для второй группы чекбоксов что тогда будет? 0