ExtJS4 - Элементы макета карты - PullRequest
0 голосов
/ 20 ноября 2011

Можно ли поменять элементы в макете карты? Я хочу использовать этот макет, как при разбивке на страницы документа. Исходя из приведенного ниже кода, он отображает страницы 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: '« 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
        });

Есть ли другие подходы? Сетка с 1 ячейкой, отображающей html?

1 Ответ

0 голосов
/ 20 ноября 2011

Это своего рода неправильный подход, во-первых, так, как вы его написали, панель форм визуализируется с 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);
}

Я имею в виду, что это макет карты, есть несколько компонентов на панели и их переключение, и они показывают только один.

Что касается сетки с подходом на одну ячейку, это зависит от того, чего вы хотите достичь, если ваши страницы похожи и отличаются только данными, которые вы можете использовать. Просто создайте шаблон 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);
    }
},
....
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...