ExtJs « Проблемы с группировкой в гриде
Всем привет. есть простая таблица, содержит - id, name, text.
Мне нужно вывести эти данные в grid с группировкой по полю name.
Во всех примерах, что я нашёл (например статья - http://www.ezdia.com/epad/extjs-grid-tutorial-grouping/1891/) используется переменная с уже определёнными данными. А мне нужно получить данные из Store.
ExtJs 3
Код такой:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
Ext.onReady(function() {
Ext.grid.Info =
[
{"id":"1","name":"andy","text":"text 1"},
{"id":"2","name":"sasha","text":"text 2"},
{"id":"3","name":"3","text":"text 3"}
];
var TestStore = new Ext.data.GroupingStore({
url : 'get_from_db.php',
//data : Ext.grid.Info,
groupOnSort : true,
remoteGroup : true,
sortInfo : {
field : 'id',
direction : 'ASC'
},
groupField : 'name',
reader : new Ext.data.JsonReader({
idProperty : 'id',
remoteSort : true,
fields : [
{name : 'id', type : 'int'},
{name : 'name', type : 'String'},
{name : 'text', type : 'String'}
]
})
});
var TaskGrid = new Ext.grid.GridPanel({
store : TestStore,
colModel : new Ext.grid.ColumnModel({
columns : [
{id : 'id', header : 'Id', dataIndex : 'id'},
{header : 'Name', dataIndex : 'name'},
{header : 'Text', dataIndex : 'text'}
],
defaults : {
sortable : true,
menuDisabled : false,
width : 20
}
}),
view : new Ext.grid.GroupingView({
forceFit : true,
groupTextTpl : '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
frame : true,
width : 700,
height : 450,
collapsible : true,
animCollapse : false,
title : 'Grouping',
renderTo : document.body
});
});
В результате выводится grid без единой ошибки, но пустой. А в случае, если закомментировать строку url и раскомментировать data - всё работает.
Мне нужно вывести эти данные в grid с группировкой по полю name.
Во всех примерах, что я нашёл (например статья - http://www.ezdia.com/epad/extjs-grid-tutorial-grouping/1891/) используется переменная с уже определёнными данными. А мне нужно получить данные из Store.
ExtJs 3
Код такой:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
Ext.onReady(function() {
Ext.grid.Info =
[
{"id":"1","name":"andy","text":"text 1"},
{"id":"2","name":"sasha","text":"text 2"},
{"id":"3","name":"3","text":"text 3"}
];
var TestStore = new Ext.data.GroupingStore({
url : 'get_from_db.php',
//data : Ext.grid.Info,
groupOnSort : true,
remoteGroup : true,
sortInfo : {
field : 'id',
direction : 'ASC'
},
groupField : 'name',
reader : new Ext.data.JsonReader({
idProperty : 'id',
remoteSort : true,
fields : [
{name : 'id', type : 'int'},
{name : 'name', type : 'String'},
{name : 'text', type : 'String'}
]
})
});
var TaskGrid = new Ext.grid.GridPanel({
store : TestStore,
colModel : new Ext.grid.ColumnModel({
columns : [
{id : 'id', header : 'Id', dataIndex : 'id'},
{header : 'Name', dataIndex : 'name'},
{header : 'Text', dataIndex : 'text'}
],
defaults : {
sortable : true,
menuDisabled : false,
width : 20
}
}),
view : new Ext.grid.GroupingView({
forceFit : true,
groupTextTpl : '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
frame : true,
width : 700,
height : 450,
collapsible : true,
animCollapse : false,
title : 'Grouping',
renderTo : document.body
});
});
В результате выводится grid без единой ошибки, но пустой. А в случае, если закомментировать строку url и раскомментировать data - всё работает.