использование одного и того же элемента в нескольких вкладках в extjs - PullRequest
Новая
       24

использование одного и того же элемента в нескольких вкладках в extjs

2 голосов
/ 12 августа 2011

как повторно использовать один и тот же элемент в нескольких вкладках, чтобы при изменении этого элемента другие вкладки отражали изменения

я пробую этот код, но ярлык на первой вкладке не отображается: 

var label = Ext.create('Ext.form.Label', {
    text : 'mylabel'
});

Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
    width : 200,
    height : 200,
    renderTo : Ext.getBody(),
    items : [{
        title : 'tab1',
        items : [label, {
            xtype : 'button',
            handler : function() {
                label.setText('changed from tab1');
            }
        }]
    }, {
        title : 'tab2',
        items : [label, {
            xtype : 'button',
            handler : function() {
                label.setText('changed from tab2');
            }
        }]
    }]
});
});

Извините, я имею в виду глобальное использование метки (например, глобальной переменной), чтобы один и тот же экземпляр метки можно было отображать и изменять на каждой вкладке

Ответы [ 2 ]

2 голосов
/ 12 августа 2011

вы можете определить свой компонент метки: 

Ext.define('MyLabel', {
   extend: 'Ext.form.Label',
   alias: 'widget.mylabel',
   text : 'mylabel'
});

свойство alias является псевдонимом для имени класса (в данном случае MyLabel), и поэтому вы можете использовать «mylabel» в качестве xtype

таким образом, вы можете повторно использовать компонент, как это 

var panel = Ext.create('Ext.tab.Panel', {
    width : 200,
    height : 200,
    renderTo : Ext.getBody(),

    items : [{
       title : 'tab1',             
       items : [{
           xtype: 'mylabel',
           itemId: 'item1'
       }, {
          xtype : 'button',                   
          handler : function(button) {
             panel.down('#item2').setText('changed from tab1');
       }
     }]
     }, {
       title : 'tab2',             
       items : [{
          xtype: 'mylabel',
          itemId: 'item2'              
       }, {
          xtype : 'button',
          handler : function(button) {
             panel.down('#item1').setText('changed from tab2');
         }
     }]

});
0 голосов
/ 12 августа 2011

Вы не можете делать именно то, что вы хотите здесь.Видите ли, когда вы создаете метку, она имеет базовый DOM, и естественно, что DOM может существовать только в одном месте (поэтому он не может показывать одно и то же на обеих вкладках).

Если есть компонентТо, что вы хотите показать на обеих вкладках, кажется, что это «выше» с иерархической точки зрения данных.Возможно, он принадлежит за пределами панели вкладок?

Если метка действительно принадлежит обеим вкладкам и должна быть «одинаковой», вам нужно либо подделать ее, либо вручную переместить ее между вкладками.

Вариант 1: Fake It

Здесь вы можете получить наибольшее количество повторного использования кода, создав собственный класс Label, например, опубликованный laurac.Вам по-прежнему необходимо синхронизировать текст метки, поэтому вам нужно будет обновить одну из них при изменении текста другой: 

var label1 = Ext.create('Ext.form.Label', {
    text : 'mylabel'
});
var label2 = Ext.create('Ext.form.Label', {
    text : 'mylabel'
});

Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
    width : 200,
    height : 200,
    renderTo : Ext.getBody(),
    items : [{
        title : 'tab1',
        items : [label1, {
            xtype : 'button',
            handler : function() {
                label1.setText('changed from tab1');
                label2.setText('changed from tab1');
            }
        }]
    }, {
        title : 'tab2',
        items : [label2, {
            xtype : 'button',
            handler : function() {
                labe2.setText('changed from tab2');
                labe1.setText('changed from tab2');
            }
        }]
    }]
});
});

Очевидно, что это не похоже на "очистку".

Вариант 2: ручное управление

Это может быть хакерским, но чуть менее хакерским, чем вариант 1. Основная идея - переместить метку между двумя вкладками, когда они активированы: 

var label = Ext.create('Ext.form.Label', {
    text : 'mylabel'
});

Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
    width : 200,
    height : 200,
    renderTo : Ext.getBody(),
    items : [{
        title : 'tab1',
        items : [{
            xtype : 'button',
            handler : function() {
                label.setText('changed from tab1');
            }
        }],
        listeners: {
            scope: this,
            activate: function(panel) {
                panel.insert(0, label);
                panel.doLayout();
            }
        }
    }, {
        title : 'tab2',
        items : [{
            xtype : 'button',
            handler : function() {
                label.setText('changed from tab2');
            }
        }],
        listeners: {
            scope: this,
            activate: function(panel) {
                panel.insert(0, label);
                panel.doLayout();
            }
        }
    }]
});
});

Примечание. Я еще не начал использовать Ext4, поэтому может потребоваться изменить код, добавленный мною для Ext4 (думаю, что doLayout ушло?).

В любом случае, это единственные два способа решения вашей проблемы, которые я могу придумать.

Удачи!

...