Кнопка Ext js на панели инструментов

Question

Я хотел бы спросить, есть ли возможность показывать только кнопку на панели инструментов, если утверждение if истинно.

для моего случая у меня есть фрагмент кода здесь,

 { 
      xtype: 'toolbar', 
      dock: 'bottom', 
      items: [ 
       { 
        xtype: 'button', 
        text: 'Pay!', 
        handler: function() { 
         console.log('haha'); 
        } 
       } 
      ] 
     } 

панель инструментов, которая имеет кнопку

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

как это возможно.

СПАСИБО!

Answer 1

Вы должны привязываться ко всем событиям, которые указывают на изменение количества строк. Большинство из них являются событиями в магазине:

xtype:'grid', 
tbar:[{ 
    xtype:'button', 
    itemId:'Test' 
}], 
buttonchange:function() { 
    this.down('button[itemId=Test]').setVisible(this.getStore().getCount()>0); 
}, 
listeners:{ 
    viewready:function(gridview) { 
    var grid = gridview.ownerCt; 
    grid.buttonchange(); 
    store.on({ 
     load: grid.buttonchange(), 
     add: grid.buttonchange(), 
     remove: grid.buttonchange(), 
     clear: grid.buttonchange(), 
     filterchange: grid.buttonchange(), 
     scope: grid 
    }); 
    } 
} 

Answer 2

Поскольку данные сетки обрабатываются хранилищем, вам необходимо добавить слушателя событий загрузки загрузки.

Я создаю working fiddle для вас.

Answer 3

Если вы используете ExtJs5/6 +, вы можете привязать видимость вашей кнопки к счету магазина.

Что-то вроде:

{ 
    xtype: 'toolbar', 
    dock: 'bottom', 
    items: [ 
     { 
      xtype: 'button', 
      text: 'Pay!', 
      bind: { 
       hidden: '{!storeCount}' 
      } 
      handler: function() { 
       console.log('haha'); 
      } 
     } 
    ] 
} 

И нужно установить storeCount себя как свойство не доступен напрямую (см https://www.sencha.com/forum/showthread.php?286770-unable-to-bind-view-to-store-size)

Предполагая, что вы yourStore заявил в своем ViewModel, в ViewController вы должны быть в состоянии сделать

initViewModel: function(viewModel) { 
    viewModel.bind('{yourStore}', function(store) { 
     if(store) { 
      store.on('datachanged', function() { 
       this.set('storeCount', this.getCount()) // this is the viewModel as I set the scope of the function 
      }); 
     } 
    }, viewModel); 
}