ExtJs框架官方例子Treelist问题

[u010679101]

看到Extjs6里的官方例子有一个treelist做导航栏，想用到自己项目中，但却无线显示，只显示一片空白

以下是我自己项目，想做出上面的效果
左边区域显示不出来。
以下是部分代码：
Ext.define('app.view.navigationTree.TreeList', {
extend: 'Ext.panel.Panel',
xtype: 'tree-list',
width: '100%',
height: 900,
title: 'TreeList',

requires: [
'Ext.button.Segmented',
'Ext.list.Tree'
],

iconCls: 'fa fa-gears',
layout: 'border',


header: {
items: [
{
xtype: 'button',
text: 'Options',
menu: [{
text: 'Expander Only',
checked: true,
handler: 'onToggleConfig',
config: 'expanderOnly'
}, {
text: 'Single Expand',
checked: false,
handler: 'onToggleConfig',
config: 'singleExpand'
}]
},
{
xtype: 'button',
text: 'Nav',
enableToggle: true,
reference: 'navBtn',
toggleHandler: 'onToggleNav'
},
{
xtype: 'button',
text: 'Micro',
enableToggle: true,
toggleHandler: 'onToggleMicro'
}
]
},
items: [
{
region: 'west',
width: 250,
split: true,
reference: 'treelistContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
scrollable: 'y',
items: [
{
xtype: 'treelist',
width: 250,
expanderFirst: false,
expanderOnly: false
}
]
},
{
region: 'center',
bodyPadding: 10,
xtype: 'usermodule'
}
]
});


Ext.define('app.view.main.Main', {
extend: 'Ext.container.Container',
xtype: 'app-main',

requires: [

'app.view.navigationTree.TreeList'
],
controller: 'main',

// MVVM架构的控制器的名称，会在当前路径中根据‘Main’ + Controller 来确定文件名
viewModel: {
type: 'main'
// MVVM架构的viewModel的类型，会在当前路径中根据‘Main’ + Model 来确定文件名
},

showOrHiddenToolbar: null,

layout: {
type: 'border' // 系统的主页面的布局
},

listeners: {
resize: 'onMainResize'
},

ui: 'navigation',

tabBarHeaderPosition: 1,
titleRotation: 0,
tabRotation: 0,

initComponent : function() {
Ext.setGlyphFontFamily('FontAwesome'); // 设置图标字体文件，只有设置了以后才能用glyph属性
this.callParent();
},

header: {
layout: {
align: 'stretchmax'
},
title: {
bind: {
text: '{name}'
},
flex: 0
},
iconCls: 'fa-th-list'
},

tabBar: {
flex: 1,
layout: {
align: 'stretch',
overflowHandler: 'none'
}
},

responsiveConfig: {
tall: {
headerPosition: 'top'
},
wide: {
headerPosition: 'left'
}
},

defaults: {
bodyPadding: 20,
tabConfig: {
plugins: 'responsive',
responsiveConfig: {
wide: {
iconAlign: 'left',
textAlign: 'left'
},
tall: {
iconAlign: 'top',
textAlign: 'center',
width: 120
}
}
}
},
items: [

{
region : 'center', // 中间面版
xtype : 'container',
reference: 'maincenter',
width: '100%',
id: 'maincenter',
autoScroll: 'true',
items: [
{xtype: 'tree-list'}
]
}
]

});

希望大神能帮我看下

[Go 旅城通票]

什么浏览器？chrome及其他webkit核心浏览器发布网站后通过http协议访问

[pg_guo]

楼主问题解决了吗，我也遇到同样的问题，求解，感谢

[douby]

使用ext-all.js可以用treelist，ext-modern-all.js就不行。。。 我也想知道怎么办

[huangfei0809]

没有绑定store

[qq_39149543]

从你贴出来的代码看到的，只有使用treelist，然后treelist里面的store没有定义，数据好像都没有怎么显示呢。 朋友，我个人觉得你的思路有点乱。main里面一个panel，引用了你自己定义的tree-list，main是border类型，并且你的tree-list也是border，相当于装了两层，只不过外层只有center，内层全部扩充显示了，你想用的extjs treelist在你自己的tree-list的left区域，显示出来是这样而已。其实外层main就可以了，在region:left区域使用treelist。 建议你看下官方api，记得treelist和treepanel不同！一般定义了一个gridpanel或者treelist这样的组件，一定要有一个store提供数据，不管是本地数据还是服务器数据，都要用store来提供，并且treelist的store是treestore，需要按特定方式组装数据。 我个人遇到的treelist显示不出来，数据返回一切正常的问题，你可以参考下： treelist和treepanel不一样，treepanel可以指定显示的字段，而treelist只能使用text属性。

[飘渺云001]

没有指定store，你也没有定义它的store，所以肯定不会显示了