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