Javascript 来自PHP的ExtJS 4.2树面板数据

我将树形面板插入选项卡面板：

树面板

var storeTreePanel= Ext.create('App.store.strTreePanel');
var tabpanelsecundario4_1 = new Ext.tab.Panel({
        itemId : 'tabpanelsecundario4_1',
        region : 'center',
        layout : 'fit',
        width : "100%",
        height : "100%",
        border : false,
        activeTab: 1,
        items:[
               {
                   itemId : 'tabDatosEconomicos',
                   title : '<span style="color:#C85E00;font-weight:bold;">Datos Economicos</span>',
                   layout:'fit',
                   items:[
                          {
                              xtype : 'treepanel',
                              itemId : 'gridCriteriosLostes',
                              autoScroll : true,
                              store : storeTreePanel,
                              rootVisible : false,
                              columns : [
                                         {header:'<span style="color:#C85E00;">Column1</span>', dataIndex:'text',       itemId:'',  flex:3.5},
                                         {header:'<span style="color:#C85E00;">Column2</span>', dataIndex:'referencia', itemId:'',  flex:1},
                                         {header:'<span style="color:#C85E00;">Column3</span>', dataIndex:'producto',   itemId:'',  flex:2},
                                         {header:'<span style="color:#C85E00;">Column4</span>', dataIndex:'unidades',   itemId:'',  flex:1},
                                         {header:'<span style="color:#C85E00;">Column5</span>', dataIndex:'ofertado',   itemId:'',  flex:1,     align:'center'},
                                         {header:'<span style="color:#C85E00;">Column6</span>', dataIndex:'importe',    itemId:'',  flex:1,     align:'right'},
                                         {header:'<span style="color:#C85E00;">Column7</span>', dataIndex:'baja',       itemId:'',  flex:0.5,   align:'right'},
                                         {header:'<span style="color:#C85E00;">Column8</span>', dataIndex:'adj',        itemId:'',  flex:0.5,   align:'center'},
                                         {header:'<span style="color:#C85E00;">Column9</span>', dataIndex:'motivos',    itemId:'',  flex:2.5}
                              ]
                          }
                   ]
               }
        ]
    });

Ext.define('App.model.mdlTreePanel', {
    extend: 'Ext.data.Model',
    fields:[
            {name:'id',                 type:'string',      mapping:''},
            {name:'text',               type:'string',      mapping:''},
            {name:'referencia',         type:'string',      mapping:''},
            {name:'producto',           type:'string',      mapping:''},
            {name:'unidades',           type:'integer',     mapping:''},
            {name:'ofertado',           type:'boolean',     mapping:''},
            {name:'importe',            type:'float',       mapping:''},
            {name:'baja',               type:'float',       mapping:''},
            {name:'adj',                type:'boolean',     mapping:''},
            {name:'motivos',            type:'text',        mapping:''},
            {name:'leaf',               type:'boolean',     mapping:''}
    ]
});

树面板模型

var storeTreePanel= Ext.create('App.store.strTreePanel');
var tabpanelsecundario4_1 = new Ext.tab.Panel({
        itemId : 'tabpanelsecundario4_1',
        region : 'center',
        layout : 'fit',
        width : "100%",
        height : "100%",
        border : false,
        activeTab: 1,
        items:[
               {
                   itemId : 'tabDatosEconomicos',
                   title : '<span style="color:#C85E00;font-weight:bold;">Datos Economicos</span>',
                   layout:'fit',
                   items:[
                          {
                              xtype : 'treepanel',
                              itemId : 'gridCriteriosLostes',
                              autoScroll : true,
                              store : storeTreePanel,
                              rootVisible : false,
                              columns : [
                                         {header:'<span style="color:#C85E00;">Column1</span>', dataIndex:'text',       itemId:'',  flex:3.5},
                                         {header:'<span style="color:#C85E00;">Column2</span>', dataIndex:'referencia', itemId:'',  flex:1},
                                         {header:'<span style="color:#C85E00;">Column3</span>', dataIndex:'producto',   itemId:'',  flex:2},
                                         {header:'<span style="color:#C85E00;">Column4</span>', dataIndex:'unidades',   itemId:'',  flex:1},
                                         {header:'<span style="color:#C85E00;">Column5</span>', dataIndex:'ofertado',   itemId:'',  flex:1,     align:'center'},
                                         {header:'<span style="color:#C85E00;">Column6</span>', dataIndex:'importe',    itemId:'',  flex:1,     align:'right'},
                                         {header:'<span style="color:#C85E00;">Column7</span>', dataIndex:'baja',       itemId:'',  flex:0.5,   align:'right'},
                                         {header:'<span style="color:#C85E00;">Column8</span>', dataIndex:'adj',        itemId:'',  flex:0.5,   align:'center'},
                                         {header:'<span style="color:#C85E00;">Column9</span>', dataIndex:'motivos',    itemId:'',  flex:2.5}
                              ]
                          }
                   ]
               }
        ]
    });

Ext.define('App.model.mdlTreePanel', {
    extend: 'Ext.data.Model',
    fields:[
            {name:'id',                 type:'string',      mapping:''},
            {name:'text',               type:'string',      mapping:''},
            {name:'referencia',         type:'string',      mapping:''},
            {name:'producto',           type:'string',      mapping:''},
            {name:'unidades',           type:'integer',     mapping:''},
            {name:'ofertado',           type:'boolean',     mapping:''},
            {name:'importe',            type:'float',       mapping:''},
            {name:'baja',               type:'float',       mapping:''},
            {name:'adj',                type:'boolean',     mapping:''},
            {name:'motivos',            type:'text',        mapping:''},
            {name:'leaf',               type:'boolean',     mapping:''}
    ]
});

PHP文件

Ext.define('App.store.strTreePanel', {
    extend: 'Ext.data.TreeStore',
    model:  'App.model.mdlTreePanel',
    autoLoad: false,
    folderSort: true,
    proxy: {
        type: 'ajax', 
        api: {read: './data/php/FillTreePanel.php'},
        reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty: 'total',
                    successProperty: 'success'
        }
    }
});

<?php
mysqli_query($connection,"SET NAMES 'utf8'");

$sql="some select";

$result=mysqli_query($connection,$sql);
$data = array();

while($row = mysqli_fetch_array($result)){
    array_push($data, array(
            "id"            => $row[data1],
            "text"          => $row[data2],
            "referencia"    => $row[data3],
            "producto"      => $row[data4],
            "unidades"      => $row[data5],
            "ofertado"      => $row[data6],
            "importe"       => $row[data7],
            "baja"          => $row[data8],
            "adj"           => $row[data9],
            "motivos"       => $row[data10]
    ));
    $linea++;
}
echo json_encode(array(
        'success'=>true,
        'total'=>count($data),
        'data'=> $data,
        'sql'=> $sql
));
?>

---

已解决

我忘记了一点细节，在我的treepanel列声明中，我忘记了将第一列声明为“xtype:'treecolumn'”，因此，第一列是不可扩展的

在文件中（）没有说什么