ExtJs - Problems with grouping in grid
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']);
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