Question

是否可以更改卡片布局中的项目？我想使用这种布局，就像分页文档一样。从下面的代码中，它显示第1页，第2页和第3页。我尝试测试的是当我点击“选项”时，更改卡片布局中的项目。

        var cards = [{
            id: 'card-0',
            html: 'Page 1',
            border: false
        }, {
            id: 'card-1',
            html: 'Page 2',
            border: false
        }, {
            id: 'card-2',
            html: 'Page 3',
            border: false
        }];

        var document = Ext.create('Ext.form.Panel', {
            id: 'testcard',
            padding: '0 0 5 5',
            title: 'test',
            layout: 'card',
            region: 'center',
            activeItem: 0, // index or id
            tbar: [{
                id: 'test',
                text: 'Options',
                handler: function (btn) {
                    cards = [{
                        id: 'card-1',
                        html: 'Page AAAAAAAAAAAA',
                        border: false
                    }, {
                        id: 'card-2',
                        html: 'Page BBBBBBBBBBBB',
                        border: false
                    }];

                    Ext.getCmp('testcard').doLayout();
                }
            }],
            bbar: ['->', {
                id: 'move-prev',
                text: '&laquo; Previous',
                handler: function (btn) {
                    navigate(btn.up("panel"), "prev");
                },
                disabled: true
            }, {
                id: 'move-next',
                text: 'Next &raquo;',
                handler: function (btn) {
                    navigate(btn.up("panel"), "next");
                }
            }],
            items: cards
        });

还有其他方法吗？网格有1个单元格显示html？

Answer 1

这是一种错误的方法，首先是你编写它的方式，表单面板使用你在开头定义的3张卡片呈现，在选项处理程序上，新对象到卡片变量的归属没有任何关系使用表单面板，更改或添加新元素使用面板的add方法，然后使用布局setActive。

function (btn){
    btn.up('panel').add([{
                        id: 'card-1',
                        html: 'Page AAAAAAAAAAAA',
                        border: false
                    }, {
                        id: 'card-2',
                        html: 'Page BBBBBBBBBBBB',
                        border: false
                    }]);
    btn.up('panel').getLayout().setActiveItem(aPage);
}

我的意思是这是卡片布局的假设，在面板中有许多组件并切换它们并只显示一个。

对于具有一个单元格的网格，它取决于您希望完成的内容，如果您的页面相似并且仅与您可以使用的数据不同。只需创建一个包含要渲染的html的Ext.XTemplate，并使用网格列的渲染器功能。

....
xtype: 'gridpanel',
tpl: new Ext.XTemplate('<html goes here/>').compile(),
columns: [
{
   dataIndex: 'id',
   header: 'theColumn',
   renderer: function(value,meta,record){
        return this.tpl.applyTemplate(record.data);
    }
},
....

ExtJS4 - 卡片布局项目

1 个答案: