0

我得到了这个类，我试图在同一个容器中显示来自同一个商店的一些数据。我这样做是因为我想在单独的行上有两行，而且我对它们没有太多的控制权。这是课程：

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'
    }
}
})

其他详情

我在 questionLi1 和 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>'
...

在我得到的第二个名单上 在此处输入图像描述

4

1 回答 1

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' }
            ]
        }]
    });

煎茶小提琴

于 2013-05-02T15:20:10.043 回答