Как обновить компоненты внутри вкладки в extjs4? - PullRequest
Новая
       31

Как обновить компоненты внутри вкладки в extjs4?

2 голосов
/ 28 июля 2011

для моего приложения, которое я разрабатываю с помощью extjs4 и c #, основываясь на примере browser-layout .
, поэтому у меня есть меню с левой стороны и вкладки, в каждой вкладке я называю свойкомпоненты (сетки, деревья, диаграммы ..)

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

как я могу это сделать?

Я использую слушателя на вкладке, как это: 

listeners: { activate: function () {
                              alert('tab1');
                          }

, но у меня есть две проблемы:

1- как мне на самом деле обновить компоненту какГрафики сетки или дерева?я знаю, что могу использовать getCmp(chart1) для доступа к своему компоненту, но тогда я не знаю, что делать, чтобы обновить отображаемые данные

2- , как я сказал, основываясь на примере макета браузера,так что у меня есть левое меню, затем при нажатии на каждый элемент этого меню у меня на правой стороне все мои вкладки, теперь слушатель, которого я использую на вкладках, работает, только когда я нажимаю на вкладку, но не работает, когда я выбираю изЛевое меню, кроме первого раза, чтобы быть более понятным, когда я впервые загружаю свое приложение, мне нужно выбрать элемент из левого меню, затем оно показывает мою вкладку с активированной tab1, теперь все работает хорошо, но если я выбираю другой элемент, тогда идивернуться к моей вкладке, это не работает !!

вот код, вызываемый при нажатии кнопки меню: 

    menuPanel.getSelectionModel().on('select', function (selModel, record) {
        if (record.get('leaf')) {
            Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel');
            Ext.getCmp('dash-tabpanel').setActiveTab(0);//getActiveTab()//if (record.getId() = 'dash')
}}

заранее спасибо за помощь

Ответы [ 3 ]

4 голосов
/ 28 июля 2011

Вы можете использовать tabchange событие: 

myTabPanel.on('tabchange', function(me, newCard, oldCard){
  // newCard is newly activated item of tab.Panel. You can refresh it or manage it as you like here
});

UPDATE

По поводу вашего обновленного вопроса:

Где актуально tab.Panel?

Если вы добавите tab.Panel с id:'tab1': 

var panel = Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    id: 'tab1',
    items: [
        {title: 'first tab', html: 'dkjgkdkgjk'},
        Ext.create('Ext.app.myGauge')
        ]
});

и если вы переместите Ext.getCmp('tab1').on('tabchange', ... в конец (чтобы он вызывался после создания панели), ваш пример должен работать. Вот рабочая демка .

3 голосов
/ 04 августа 2011

создать модель и ссылаться в магазине следующим образом вместо JsonStore. 

Ext.define("Post", {
       extend: 'Ext.data.Model',
       proxy: {
           type: 'ajax',
           url : 'yourURL',

           method:'GET',

           reader: {
               type: 'json',
               root: 'rows'
               //,totalProperty: 'totalCount'
           }
               //,autoLoad:false
       },

       fields: [
           {name: 'docid', mapping: 'docid'},

       ]
   });

      var gridDataStore = Ext.create('Ext.data.Store', {
         // pageSize: 10,
          //autoLoad:false,
         // border:false,
         // frame:false,
          model: 'Post'
      });

теперь используйте gridDataStore.load (); это будет работать.

1 голос
/ 29 июля 2011

Если вы хотите обновить, который обновляется из базы данных. 

DataStoreName.load();
Ext.getCmp('id').doLayout();

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

...