ExtJS的 - <em>ID</em>，<em>名</em>，<em>文本</em> - 网格

Question

一个简单的表包含分组问题。 我需要将这些数据放入网格中，并按字段分组，名称为。 在我找到的所有示例中（例如 - 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

Answer 1

发布的代码'get_from_db.php'，如果可以的话，请。

$ connect = mysql_connect（'localhost'，'root'，''）;如果（$连接）mysql_select_db（'网格'）或死（'错误与选择表'）; $ select = mysql_query（“select * from test”）; while（$ rec = mysql_fetch_array（$ select））$ rows [] = $ rec; echo json_encode（$ rows）;

您在返回JSON时犯了错误。相反

$ rows [] = $ rec;

你需要

$行[] =阵列（ “ID”=> $ REC [ '身份证']， “名”=> $ REC [ '名']， “文本” => $ REC [ '文本']）;

Answer 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