我对Sencha Extjs6很陌生。我正在制作一个通用的应用程序(现在专注于移动设备),并试图将NestedList添加到菜单中。我让菜单从左边滑入,我可以显示嵌套列表,但当我向下搜索列表中的项目时,会混淆吗?即,它将显示父项及其子项。如果我点击回到根,那么它仍然会显示所有的叶节点等,而它应该只显示根项目。项目之间也没有幻灯片动画,所以这让我认为目前不可能以这种方式使用它?
当我单独创建NestedList(未添加到Ext.Menu)时,它会按预期工作(类似于KitchenSink示例)。
这就是我迄今为止所拥有的:
MenuList.js
Ext.define('mobile.view.menu.MenuList', {
extend: 'Ext.NestedList',
xtype: 'menulist',
store: 'mobile.store.menu.MenuListStore',
controller: 'listcontroller',
displayField: 'text',
title: 'Menu',
width: '100%',
itemId: 'menulist',
layout: 'fit',
styleHtmlContent: true,
useTitleAsBackText: false,
backText: ' ',
scrollable: true
});
NavigationMenu.js嵌套列表被添加到其中。
Ext.define('mobile.view.menu.NavigationMenu', {
extend: 'Ext.Menu',
xtype: 'navigation',
controller: 'navigation-controller',
renderTo: document.body
...
...
...
getMenuCfg: function(side) {
var me = this;
return {
items:[{
xtype: 'menulist'
}, {
text: 'Log out',
textAlign: 'left'
...
}]
}
}
MenuListStore.js我有自己的数据,但我在carregions示例中尝试过,仍然没有改变行为。
Ext.define('mobile.store.menu.MenuListStore', {
extend: 'Ext.data.TreeStore',
config: {
model: 'mobile.model.menu.MenuItem',
root: {},
proxy: {
type: 'ajax',
url: 'resources/carregions.json'
}
}
});
MenuItem.js
Ext.define('mobile.model.menu.MenuItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
简而言之,当添加到视口中时,它可以作为一个独立的组件工作,但当我将它作为一个组件添加到菜单中时,就不能了。任何帮助或指导都将是美妙的。非常感谢大家。:)
我设法解决了这个问题。似乎去掉layout:'fit'让它工作了。