问ExtJS4 -卡片布局项目
EN

Stack Overflow用户

提问于 2011-11-21 01:40:44

回答 1查看 3.1K关注 0票数 0

是否可以更改卡片布局中的项目？我想使用这种布局，就像对文档进行分页一样。从下面的代码中，它确实显示了页面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的网格？

extjs4

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-11-21 02:09:37

这是一种错误的做法，首先，按照您编写的方式，表单面板使用您在一开始定义的3张卡片进行呈现，在选项处理程序上，卡片变量的新对象属性与表单面板无关，要更改或添加新元素，请使用面板的add方法，然后使用layout 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);
}

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

至于只有一个单元格方法的网格，这取决于你想要完成什么，如果你的页面是相似的，只是你可以使用的数据不同。只需创建一个Ext.XTemplate，其中包含要呈现的html，并对网格列使用渲染器函数。

....
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);
    }
},
....

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8203372

复制

相似问题

问ExtJS4 -卡片布局项目
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ExtJS4 -卡片布局项目EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ExtJS4 -卡片布局项目
EN