我得到了这个类,我试图在同一个容器中显示来自同一个商店的一些数据。我是这样做的,因为我希望在一条单独的线上各有两行而我没有 对他们的控制太多了。这是班级:
Ext.define('Clue.view.ListQuestions', {
extend: 'Ext.Container',
requires: ['Ext.dataview.List'],
xtype: 'listquestions',
config: {
id: 'listquestions',
items: [{
xtype: 'list',
id: 'questionLi1',
baseCls: 'questionLi1',
flex: 1,
store: {
xtype: 'levelstore',
filters: [{
filterFn: function(item) {
return item.data.levelId < 2 && item.data.questionId < 6;
}
}]
},
itemTpl: '<div>{questionId}</div>'
},{
xtype: 'list',
id: 'questionLi2',
baseCls: 'questionLi2',
flex: 1,
store: {
xtype: 'levelstore',
filters: [{
filterFn: function(item) {
return item.data.levelId < 2 && item.data.questionId > 5;
}
}]
},
itemTpl: '<div>{questionId}</div>'
}]
}
})
如果删除第二个列表,则显示第一个列表,否则不显示第一个列表。我做错了什么? 这是商店:
Ext.define('Clue.store.LQuestions', {
extend: 'Ext.data.Store',
xtype: 'levelstore',
requires: ['Ext.data.proxy.LocalStorage'],
config: {
model: 'Clue.model.LQuestions',
storeId: 'levelStore',
sorters: [{
property: 'levelId',
direction: 'ASC'
}],
proxy: {
type: 'localstorage',
id: 'levelstorage'
}
}
})
其他详情
我在问题Li1和questionLi2及其项目上添加了一些CSS。 3px红色边框。列表占用空间,但在第一个列表元素不存在(甚至在html中)第二个列表被渲染得很好。如果我在第一个filterFn函数中放置一个console.log()没有显示出来......所以我在想,也许我会覆盖一些东西......
这就是我得到的
如果我这样做:
...
flex: 1,
/*store: {
xtype: 'levelstore',
filters: [{
filterFn: function(item) {
return item.data.levelId < 2 && item.data.questionId > 5;
}
}]
},*/
itemTpl: '<div>{questionId}</div>'
...
我得到的第二个清单上的
答案 0 :(得分:0)
仅当您为其父级指定hbox布局的vbox时,才能将flex配置添加到组件
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'vbox',
items: [{
xtype: 'list',
itemTpl: '{title}',
flex: 1,
data: [
{ title: 'List 1: Item 1' },
{ title: 'List 1: Item 2' },
{ title: 'List 1: Item 3' },
{ title: 'List 1: Item 4' }
]
}, {
xtype: 'list',
itemTpl: '{title}',
flex: 1,
data: [
{ title: 'List 2: Item 1' },
{ title: 'List 2: Item 2' },
{ title: 'List 2: Item 3' },
{ title: 'List 2: Item 4' }
]
}]
});