1

单击按钮时，我试图拥有一棵树。基本上这个视图在顶部有一个工具栏，我希望树显示在工具栏下方。首先，我很困惑我应该使用什么 xtype，无论是

xtype : 'treepanel'

或其

xtype : 'treeview'.

这是我的树的代码

Ext.define('Campus.view.Hierarchy', {
    alias: 'widget.hierarchy',
    extend: 'Ext.panel.Panel',

    initComponent: function () {
        var config = {
            xtype: 'panel',
            border: false,
            autoScroll: true,
            baseCls: 'topMenu',

            dockedItems: [{
                xtype: 'toolbar',
                border: false,
                dock: 'top',
                items: [{
                    xtype: 'button',
                    text: LANG.BTADDREG,
                    iconCls: 'icon-add-tb',
                    cls: 'tip-btn',
                    iconAlign: 'right',
                    action: 'addRegion',
                    id: 'ADDREGION'
                }],
                items: [{
                    xtype: 'treepanel',
                    title: '',
                    border: false,
                    enableDD: true,
                    viewConfig: {
                        enableDD: true,
                        plugins: {
                            ptype: 'treeviewdragdrop'
                        }
                    },
                    collapsible: false,
                    useArrows: true,
                    rootVisible: false,
                    store: 'HierarchyTree',



                    multiSelect: false,
                    singleExpand: false,
                    id: 'TREE'

                }]
                var holder = Ext.getCmp('center');
                holder.remove(0);
                holder.add(Ext.apply(config));
            }

我在树内定义商店，因为在 app/store 文件夹中定义树商店，显示错误如下：

me.store.getRootNode is not a function
node: me.store.getRootNode()

/模型

Ext.define('App.model.HierarchyTree', {
extend : 'Ext.data.Model',
fields : ['Title', 'ID', 'LevelID', 'ParentID']
});

/店铺

Ext.define('App.store.HierarchyTree', {
extend : 'Ext.data.Store',
model : 'Campus.model.HierarchyTree',
storeID : 'HierarchyTree',

proxy : {
    type : 'ajax',
    url : 'data/Locations.aspx',
    reader : {
        type : 'json',
        root : 'Rows'
    },
    actionMethods : {
        create : 'POST',
        read : 'POST'
    },
    extraParams : {
        mode : 'HIERARCHYFULLLIST'

    }
},
autoLoad : true

});

另外，当我使用时xtype :'treepanel'，它只显示一个水平滚动条，没有别的。当我使用时xtype: 'treeview'，它的显示

me.panel is undefined
treeStore = me.panel.getStore();

谁能告诉我我做错了什么

编辑

配置应用于 Ext.getCmp('center') 因为应用程序分为三个部分，所以每当我们显示一个视图时，我们都会抓住应用程序的中心区域，然后显示它

4

2 回答 2

4

您的代码有一些错误。您在面板配置中有两个“项目”，第一个应该是“tbar”。

另一个错误是您如何添加商店，您应该只添加类store : 'HierarchyTree'或创建商店store: Ext.create('App.store.HierarchyTree',{})。

你应该使用树形面板，因为树形视图只是树形面板使用的视图。添加此修复程序，看看它是否有效，或者是否不发布新问题。希望能帮助到你。

编辑

好的，另一件事，initComponent函数必须包含对父函数的调用。

this.callParent(); // at the end of the initComponent function.

而且我还有一些问题，为什么要将配置应用于通过 ext.getCmp 获得的项目，这不是“Campus.view.Hierarchy”对象的配置吗？如果是这样，您应该直接应用于“this”对象。

Ext.apply(this,config);
this.callParent();

就像现在一样，它没有应用配置，因为 apply 需要两个参数，即目标对象和配置对象。

编辑 关于配置的问题，你不能像这样将配置应用到中心面板，因为它没有被渲染。因此，您应该将配置添加到当前面板，并将当前面板添加到视口，而不是这样做，我猜它有布局边框。这应该是初始化组件函数：

config = {
...}
Ext.apply(this,config);
this.callParent();

并且包含中心区域的面板应该将面板作为一个项目。

 ...some viewport...
   layout:'border',
   items: [
        { 
           xtype:'hierarchy',
           region: 'center'
        }
   ]
于 2012-09-03T15:34:36.610 回答
0

谢谢nscrob。你太棒了：）对于初学者来说，你很耐心地提供帮助。好的，现在商店正在加载并且能够看到响应

{"text":"Asia Pacific","id":"537","level":"1", "expanded": 
false,"singleClickExpand":true,"children":[{"text":"Japan", "cls":"xtreenode-Level2-
Indent", "id":"538", "hl1":"537","level":"2","singleClickExpand":true, "expanded": false,
"children":[{}]

但由于某种原因，树没有显示。我正在努力。当我在萤火虫窗口中浏览 html 时，它显示的树的相同 div id 与停靠菜单重叠，它就像一个水平滚动条。所以，我只是想，错误在哪里

于 2012-09-04T09:19:21.353 回答