CODEWITHSUNDEEP
extjsgridclickcomponentspanel
Clay Banks
Clay Banks

Reputation: 4581

Displaying a grid inside the viewport on click - Ext JS

What I'm trying to do is add a grid that is 65% width of the panel created in my app.js

Ext.application({
    name: 'AM',
    appFolder: 'app',
    controllers: [ 'Metadata', 'Print', 'Export' ],
    launch: function() {
        var types = Ext.create('AM.store.Type');
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            width: 1000,
            height: 600,
            title: '<center>MetaCenter</center>',
            layout: 'hbox',
            style: { marginLeft: 'auto', marginRight: 'auto' },
            items: [ 
                { xtype: 'panel', padding: 5, height: 500, width: '35%',
                    items: [ 
                                            ...

                        { xtype: 'button', text: 'Search', 
                            listeners: { 
                                click: function() {
                                    console.log('Search Button clicked');
                                    //Code to create panel view?
                            } 
                        },
                    ],

                }

I'm not explicitly creating a viewport, so I don't believe I could do a viewport.add('grid') function, but I'm not sure. Any ideas?

Upvotes: 0

Views: 595

Answers (1)

kevhender
kevhender

Reputation: 4405

You could add the grid when creating the container, with hidden: true, then show it when the button is clicked:

{
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [
        { 
            xtype: 'panel', 
            flex: 0.35,
            items: [
                ...
                { 
                    xtype: 'button', 
                    text: 'Search',
                    listeners: {
                        click: function(btn) {
                            btn.up('panel').nextSibling().show();
                        }
                    }
                }
            ]
        },
        {
            xtype: 'grid',
            flex: 0.65,
            hidden: true,
            ...
        }
    ]
}

Upvotes: 1

Related Questions