如何使按钮在网格中不可见？

Question

I have the following JavaScript code. By using ExtJS I have docked button in my grid and I want to keep it invisible when the grid is empty.

var grid = Ext.create('Ext.grid.property.Grid', 
{
    // width: '100%',
    // height: '100%'
    dockedItems:
    [{
        xtype: 'toolbar',
        id: 'save_t',
        dock: 'bottom',
        ui: 'footer',
        items: ['->', 
        {
            text: 'Save',
            handler: function() 
            {
                // get values
                var gridvalues = this.up('propertygrid').getSource();

                alert(gridvalues.Version);
                // send AJAX request
                Ext.Ajax.request({
                    url: '../php/updateVars.php?v=' + JSON.stringify(gridvalues),
                    success: function(response) 
                    {
                        var obj = JSON.parse(response.responseText);
                        // alert(Object.prototype.toString.apply(obj));                     
                    },
                    failure: function(response) 
                    {
                        alert('server-side failure with status code ' + response.status);
                    }
                }); 
            }
        }]
    }]
});

As you can see the grid has no source. I want to keep the code for Save button but not to show until I set the source: grid.setSource("data") .

In some other function I will get the data and set it as grid's source , then I want to make the button visible. Thanks

Answer 1

You should define your button as hidden for the initial config, and assign it an itemId :

{
    text: 'Save',
    itemId: 'saveButton',
    hidden: true,
    handler: function() { ... }
}

Then, when you are ready to show it, you can use this:

grid.down('#saveButton').show();