ExtJs - Problems with grouping in grid - json

Question

a simple table contains - id, name, text.
I need to bring these data in the grid with the grouping by the field name.
In all the examples that I found (for example - paper) uses the variable already defined the data. And I need to get data from Store.
ExtJs 3
The code:
Ext.onReady(function() {
var store = new Ext.data.JsonStore({
url : 'get_from_db.php',
storeId : 'MyStore',
totalProperty : 'totalCount',
idProperty : 'id',
remoteSort : true,
fields : [
{name : 'id', type : 'int'},
{name : 'name', type : 'String'},
{name : 'text', type : 'String'}
]
});
store.load();
var TestReader = new Ext.data.JsonReader({
idProperty : 'id',
fields : [
{name : 'id', type : 'int'},
{name : 'name', type : 'String'},
{name : 'text', type : 'String'}
]
});
var TestStore = new Ext.data.GroupingStore({
reader : TestReader,
data : 'get_from_db.php',
sortInfo : {
field : 'id',
direction : 'ASC'
},
groupField : 'name'
});
var TaskGrid = new Ext.grid.GridPanel({
store : TestStore,
columns : [
{id : 'id', header : 'Id', dataIndex : 'id'},
{id : 'name', header : 'Name', dataIndex : 'name'},
{id : 'text', header : 'Text', dataIndex : 'text'}
],
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
});
});
As a result, output grid without a single error, the group is - but here's the column values - all zeros

Answer 1

post the code of 'get_from_db.php', if you can, please.
$connect = mysql_connect('localhost', 'root', ''); if ($connect) mysql_select_db('grid') or die('error with select table'); $select = mysql_query("select * from test"); while ($rec = mysql_fetch_array($select)) $rows[] = $rec; echo json_encode($rows);
You made mistake in returning JSON. Instead
$rows[] = $rec;
you need
$rows[] = array ("id"=>$rec['id'], "name"=>$rec['name'], "text"=>$rec['text']);

Answer 2

decided. code:
Ext.onReady(function() {
var TestStore = new Ext.data.GroupingStore({
url : 'http://extjs/get_from_db.php',
autoLoad : true,
remoteGroup : true,
groupField : 'name',
sortInfo : {
field : 'id',
direction : 'ASC'
},
reader : new Ext.data.JsonReader({
totalProperty : 'totalCount',
root : 'items',
idProperty : 'id',
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({
startCollapsed : true,
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
});
});
More details in this note