Home/ Questions/Q 6839721
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T23:45:11+00:00

Is it possible to change the items in a card Layout? I want to

  • 0

Is it possible to change the items in a card Layout? I want to use this layout like that of paging a document. From the code below, it does display page 1, 2 and 3. What I tried to test was when I click “Option”, change the items in the card layout.

        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: '« Previous',
                handler: function (btn) {
                    navigate(btn.up("panel"), "prev");
                },
                disabled: true
            }, {
                id: 'move-next',
                text: 'Next »',
                handler: function (btn) {
                    navigate(btn.up("panel"), "next");
                }
            }],
            items: cards
        });

Are there any other approaches? Grid with 1 cell displaying html?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s kind of a wrong aproach, first of all the way you written it , the form panel renders with the 3 cards you defined at the begining, on the option handler, the attribution of new objects to the card variable has nothing to do with the form panel, to change or add new elements use the panel’s add method and then the 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);
}

    I mean this is the purose of the card layout, have a number of components in a panel and switching them and show only one.

    As for the grid with one cell aproach, it depends what you wish to accomplish, if your pages are similar and differ only by the data you can use that. Just create an Ext.XTemplate containing the html you want to render and use the renderer function for the grid column.

    ....
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