Question

我试图让一个非常基本的树网格工作，但我得到的只是一个空面板。

我从一个工作的treepanel示例中复制了json字符串，并自己为额外的网格添加了日期和文件名。因此，调用位根和子项为基本面板工作（当它只有字段文本时直接在商店中工作。所以我认为它适用于树网格。

搜索后我发现树库没有数据配置，必须将其移动到代理。现在我只有空日期和文件名列。

所以这是我的模特

Ext.define('Coda.common.repository.model.RepositoryMaintModel',{
extend: 'Ext.data.Model',
fields: [
    {name: 'date', type: 'string'},
    {name: 'filename', type: 'string'},
    {name: 'text', type: 'string'},

    {name: 'iconCls'  , type: 'string', defaultValue: 'treenode-no-icon'},
    {name: 'expanded' , type: 'boolean', defaultValue: true, persist: false},
    {name: 'index'     , type: 'int'}

]
});

这是我的观点

Ext.define('view.RepositoryMaintView', {
extend: 'U4.panel.Panel',
requires: ['Ext.layout.container.HBox',
           'model.RepositoryMaintModel',
           'Ext.tree.Panel'],

EVENT_DOWNLOAD: 'download',
layout: 'hbox',

constructor: function (config) {
        var me = this;

        me.addEvents(
            /**
             * @event download
             * @param {view.RepositoryMaintView} when pressing the download button
             */
            me.EVENT_DOWNLOAD
            );

        var data = {root: {
                expanded: true,
                root: [
                    { text: "detention",date:'10-01-2013', filename:'boo.txt', leaf: true },
                    { text: "homework",date:'10-01-2013', filename:'boo.txt', expanded: true,
                    root: [
                        { text: "book report",date:'10-01-2013', filename:'boo.txt', leaf: true },
                        { text: "algebra",date:'10-01-2013', filename:'boo.txt', leaf: true}
                    ] },
                    { text: "buy lottery tickets",date:'10-01-2013', filename:'boo.txt', leaf: true }
                ]
            }};
        var store = Ext.create('Ext.data.TreeStore', {
            model: 'blah.blah.model.RepositoryMaintModel',
          //  data: data, <-- remove from here
            proxy: {
                type: 'memory',
                data: data, // <-- place here
                reader: {
                    type: 'json',
                    root: 'root'
                }
            },
            folderSort: true
        });

        var center = Ext.create('Ext.tree.Panel',{
            title: 'Folders Companies Items',
            //region: 'center',
            width: 1000,
            height: 200,
            collapsible: false,
            useArrows: true,
            rootVisible: false,
            store: store,
            multiSelect: true,
            columns: [
               {
                xtype: 'treecolumn', //this is so we know which column will show the tree
                text: 'hmm',
                flex: 2,
                sortable: true
            },{
                text: 'Date',
                sortable: true,
                dataIndex: 'date'
            },{
                text: 'filename',
                sortable: true,
                dataIndex: 'filename'
            }]
        });
        me.items = [center];
        me.callParent(arguments);
}

});

extjs treegrid显示空网格列

0 个答案: