一个简单的表包含 - id , name , text 。 我需要通过字段 name 对这些数据进行分组。 在我找到的所有示例中(例如 - paper)使用已定义数据的变量。我需要从商店获取数据。
ExtJs 3
代码:
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
});
});
结果,输出网格没有一个错误,该组是 - 但这里是列值 - all zeros
答案 0 :(得分:2)
发布'get_from_db.php'的代码,如果可以,请。
$ connect = mysql_connect('localhost','root',''); if($ connect)mysql_select_db('grid')或die('select table'错误); $ select = mysql_query(“select * from test”); while($ rec = mysql_fetch_array($ select))$ rows [] = $ rec; echo json_encode($ rows);
你在返回JSON时犯了错误。代替
$ rows [] = $ rec;
你需要
$ rows [] = array(“id”=> $ rec ['id'],“name”=> $ rec ['name'],“text”=> $ rec ['text' ]);
答案 1 :(得分:2)
<强>决定即可。代码:
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
});
});
此note
中的详细信息