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）

假设您在 ViewModel 中声明 yourStore ，在 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);
}

工具栏中的Ext js按钮

3 个答案: