Accordion and gridpanel rendering issue

**KingKahn** · 19 Apr 2009 3:22 PM

Folks,
I am but a day old to the world of ExtJS, so if I sound like a ExtJS rookie - I AM!. Well, I love what I see and have been playing with it. My first page using ExtJS has basically four accordions. The first one provides search functionality and the other three are gridpanel containers. My first issue is when I add the grids to the other accordions that are gridpanels, the controls within my search accordion vanish.
1. How can I overcome this.
2. In the search accordion, I need a button right beside the first textbox and when the user clicks the button, only then do I need to show the grid in the search accordion, i.e. I do not want to lazy load the grid. Also, it would help if someone can tell me how to set the height of the search panel dynamically. As you can see, I am just trying get my hands around the rendering of the differnt controls. Data is another issue and I will deal with it when I get there. Right now I am using the data from Saki's example. Here's my code.....and thanks for all your help!

Code:

Ext.ns('Example');
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
Example.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
// hard coded - cannot be changed from outside 
var config = {
store: new Ext.data.SimpleStore({
id: 0
, fields: [
{ name: 'company' }
, { name: 'price', type: 'float' }
, { name: 'change', type: 'float' }
, { name: 'pctChange', type: 'float' }
, { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' }
, { name: 'industry' }
, { name: 'desc' }
]
, data: [
['3m Co', 71.72, 0.02, 0.03, '8/1 12:00am', 'Manufacturing'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'],
['Altria Group Inc', 83.81, 0.28, 0.34, '10/1 12:00am', 'Manufacturing'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 10:00am', 'Finance'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 11:00am', 'Services'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am', 'Services'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am', 'Manufacturing'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am', 'Services'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am', 'Finance'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am', 'Manufacturing'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am', 'Manufacturing'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am', 'Manufacturing'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am', 'Automotive'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am', 'Computer'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am', 'Manufacturing'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am', 'Computer'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am', 'Computer'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am', 'Medical'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am', 'Finance'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am', 'Food'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am', 'Medical'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am', 'Computer'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am', 'Services', 'Medical'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am', 'Food'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am', 'Retail'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am', 'Manufacturing'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am', 'Computer'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am', 'Services'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)', 29.89, 0.24, 0.81, '9/1 12:00am', 'Services']
]
})
, columns: [
{ id: 'company', header: "Company", width: 40, sortable: true, dataIndex: 'company' }
, { header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price' }
, { header: "Change", width: 20, sortable: true, dataIndex: 'change' }
, { header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange' }
, { header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }
]
, viewConfig: { forceFit: true }
}; // eo config object 
// apply config 
Ext.apply(this, Ext.apply(this.initialConfig, config));
// call parent 
Example.Grid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent 
});
Ext.reg('examplegrid', Example.Grid);
 
Ext.onReady(function() {
var tabs = new Ext.TabPanel({
renderTo: 'main',
width: 1130,
height: 800,
activeTab: 0,
frame: true,
xtype: 'tabpanel',
defaults: { autoHeight: true },
items: [
{ title: 'Registration', // First tab panel - Registration
layout: 'accordion', // Accordion object literal properties
layoutConfig:
{
titleCollapse: true,
animate: true,
activeOnTop: true
},
defaults: {
bodyStyle: 'padding:15px'
},
items: [{ // Search accordion defs
title: 'LOOK UP - Search Customers',
layout: 'form',
labelWidth: 105,
height: 200,
frame: true,
bodyStyle: 'padding:5px',
autoWidth: true,
items: [{ // Search Form Fields
xtype: 'fieldset',
title: 'Search',
autoHeight: true,
collapsible: true,
items: [{
layout: 'form',
defaultType: "textfield",
defaults: {
allowBlank: true
},
items: [{
fieldLabel: 'E-Ticket Number',
id: 'txtETicketNumber',
width: 700
},
{
fieldLabel: 'Last Name',
id: 'txtLastName',
width: 200
},
{
fieldLabel: 'Zip Code:',
id: 'txtZipCode',
width: 200
},
{
layout: 'gridpanel',
xtype: 'examplegrid',
iconCls: 'icon-grid'
}] // Search Window controls
}] // Field Defs
}]
},
{ title: 'Pre-Registered',
frame: true,
bodyStyle: 'padding:5px',
autoWidth: true

},
{ title: 'Attendance',
frame: true,
bodyStyle: 'padding:5px',
autoWidth: true
},
{ title : 'Purchase',
frame: true,
bodyStyle: 'padding:5px',
autoWidth: true}
 
]
}, // END Registration tab panel
{title: 'Report & Finalize' }, // Second tab panel - Report & Finalize
{title: 'Session Info'} // Third tab panel - Session Info
]
 
}).show(); // Tabs
var win = new Ext.Window({
});
})// Ext.onReady

**jay@moduscreate.com** · 19 Apr 2009 5:19 PM

can you repost your indented code in code tags???

**KingKahn** · 20 Apr 2009 6:46 AM

Code:

Ext.ns('Example');
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
Example.Grid = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function() {
        // hard coded - cannot be changed from outside 
        var config = {
            store: new Ext.data.SimpleStore({
                id: 0,
                fields: [{
                    name: 'company'
                },
                {
                    name: 'price',
                    type: 'float'
                },
                {
                    name: 'change',
                    type: 'float'
                },
                {
                    name: 'pctChange',
                    type: 'float'
                },
                {
                    name: 'lastChange',
                    type: 'date',
                    dateFormat: 'n/j h:ia'
                },
                {
                    name: 'industry'
                },
                {
                    name: 'desc'
                }],
                data: [['3m Co', 71.72, 0.02, 0.03, '8/1 12:00am', 'Manufacturing'], ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'], ['Altria Group Inc', 83.81, 0.28, 0.34, '10/1 12:00am', 'Manufacturing'], ['American Express Company', 52.55, 0.01, 0.02, '9/1 10:00am', 'Finance'], ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 11:00am', 'Services'], ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am', 'Services'], ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am', 'Manufacturing'], ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am', 'Services'], ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am', 'Finance'], ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am', 'Manufacturing'], ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am', 'Manufacturing'], ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am', 'Manufacturing'], ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am', 'Automotive'], ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am', 'Computer'], ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am', 'Manufacturing'], ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am', 'Computer'], ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am', 'Computer'], ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am', 'Medical'], ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am', 'Finance'], ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am', 'Food'], ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am', 'Medical'], ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am', 'Computer'], ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am', 'Services', 'Medical'], ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am', 'Food'], ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am', 'Retail'], ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am', 'Manufacturing'], ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am', 'Computer'], ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am', 'Services'], ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am', 'Retail'], ['Walt Disney Company (The) (Holding Company)', 29.89, 0.24, 0.81, '9/1 12:00am', 'Services']]
            }),
            columns: [{
                id: 'company',
                header: "Company",
                width: 40,
                sortable: true,
                dataIndex: 'company'
            },
            {
                header: "Price",
                width: 20,
                sortable: true,
                renderer: Ext.util.Format.usMoney,
                dataIndex: 'price'
            },
            {
                header: "Change",
                width: 20,
                sortable: true,
                dataIndex: 'change'
            },
            {
                header: "% Change",
                width: 20,
                sortable: true,
                dataIndex: 'pctChange'
            },
            {
                header: "Last Updated",
                width: 20,
                sortable: true,
                renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex: 'lastChange'
            }],
            viewConfig: {
                forceFit: true
            }
        }; // eo config object 
        // apply config 
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        // call parent 
        Example.Grid.superclass.initComponent.apply(this, arguments);
    } // eo function initComponent 
});
Ext.reg('examplegrid', Example.Grid);
Ext.onReady(function() {
    var tabs = new Ext.TabPanel({
        renderTo: 'main',
        width: 1130,
        height: 800,
        activeTab: 0,
        frame: true,
        xtype: 'tabpanel',
        defaults: {
            autoHeight: true
        },
        items: [{
            title: 'Registration',
            // First tab panel - Registration
            layout: 'accordion',
            // Accordion object literal properties
            layoutConfig: {
                titleCollapse: true,
                animate: true,
                activeOnTop: true
            },
            defaults: {
                bodyStyle: 'padding:15px',
                collapsed: false
            },
            items: [{ // Search accordion defs
                title: 'LOOK UP - Search Customers',
                layout: 'form',
                labelWidth: 105,
                autoheight: true,
                frame: true,
                bodyStyle: 'padding:5px',
                autoWidth: true,
                items: [{ // Search Form Fields
                    xtype: 'fieldset',
                    title: 'Search',
                    autoHeight: true,
                    collapsible: true,
                    items: [{
                        layout: 'form',
                        defaultType: "textfield",
                        defaults: {
                            allowBlank: true
                        },
                        items: [{
                            fieldLabel: 'E-Ticket Number',
                            id: 'txtETicketNumber',
                            width: 700
                        },
                        {
                            fieldLabel: 'Last Name',
                            id: 'txtLastName',
                            width: 200
                        },
                        {
                            fieldLabel: 'Zip Code:',
                            id: 'txtZipCode',
                            width: 200
                        },
                        {
                            layout: 'grid',
                            defaults: {
                                autoheight: true
                            },
                            xtype: 'examplegrid',
                            iconCls: 'icon-grid'
                        }] // Search Window controls
                    }] // Field Defs
                }]
            },
            {
                title: 'Pre-Registered',
                frame: true,
                bodyStyle: 'padding:5px',
                height: 300,
                autoWidth: true
            },
            {
                title: 'Attendance',
                frame: true,
                bodyStyle: 'padding:5px',
                autoWidth: true,
                height: 300
            },
            {
                title: 'Purchase',
                frame: true,
                bodyStyle: 'padding:5px',
                autoWidth: true,
                height: 300
            }
            ]
        },
        // END Registration tab panel
        {
            title: 'Report & Finalize'
        },
        // Second tab panel - Report & Finalize
        {
            title: 'Session Info'
        } // Third tab panel - Session Info
        ]
    }).show(); // Tabs
    var win = new Ext.Window({
});
}) // Ext.onReady

**jay@moduscreate.com** · 20 Apr 2009 6:50 AM

Eh,

Code:

Ext.ns('Example');
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
Example.Grid = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function() {
        // hard coded - cannot be changed from outside 
        var config = {
            store: new Ext.data.SimpleStore({
                id: 0,
                fields: [{
                    name: 'company'
                },
                {
                    name: 'price',
                    type: 'float'
                },
                {
                    name: 'change',
                    type: 'float'
                },
                {
                    name: 'pctChange',
                    type: 'float'
                },
                {
                    name: 'lastChange',
                    type: 'date',
                    dateFormat: 'n/j h:ia'
                },
                {
                    name: 'industry'
                },
                {
                    name: 'desc'
                }],
                data: [['3m Co', 71.72, 0.02, 0.03, '8/1 12:00am', 'Manufacturing'], ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'], ['Altria Group Inc', 83.81, 0.28, 0.34, '10/1 12:00am', 'Manufacturing'], ['American Express Company', 52.55, 0.01, 0.02, '9/1 10:00am', 'Finance'], ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 11:00am', 'Services'], ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am', 'Services'], ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am', 'Manufacturing'], ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am', 'Services'], ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am', 'Finance'], ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am', 'Manufacturing'], ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am', 'Manufacturing'], ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am', 'Manufacturing'], ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am', 'Automotive'], ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am', 'Computer'], ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am', 'Manufacturing'], ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am', 'Computer'], ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am', 'Computer'], ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am', 'Medical'], ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am', 'Finance'], ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am', 'Food'], ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am', 'Medical'], ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am', 'Computer'], ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am', 'Services', 'Medical'], ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am', 'Food'], ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am', 'Retail'], ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am', 'Manufacturing'], ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am', 'Computer'], ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am', 'Services'], ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am', 'Retail'], ['Walt Disney Company (The) (Holding Company)', 29.89, 0.24, 0.81, '9/1 12:00am', 'Services']]
            }),
            columns: [{
                id: 'company',
                header: "Company",
                width: 40,
                sortable: true,
                dataIndex: 'company'
            },
            {
                header: "Price",
                width: 20,
                sortable: true,
                renderer: Ext.util.Format.usMoney,
                dataIndex: 'price'
            },
            {
                header: "Change",
                width: 20,
                sortable: true,
                dataIndex: 'change'
            },
            {
                header: "% Change",
                width: 20,
                sortable: true,
                dataIndex: 'pctChange'
            },
            {
                header: "Last Updated",
                width: 20,
                sortable: true,
                renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex: 'lastChange'
            }],
            viewConfig: {
                forceFit: true
            }
        }; // eo config object 
        // apply config 
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        // call parent 
        Example.Grid.superclass.initComponent.apply(this, arguments);
    } // eo function initComponent 
});
Ext.reg('examplegrid', Example.Grid);

Ext.onReady(function() {
    var tabs = new Ext.TabPanel({
        renderTo: 'main',
        width: 1130,
        height: 800,
        activeTab: 0,
        frame: true,
        xtype: 'tabpanel',
        defaults: {
            autoHeight: true
        },
        items: [{
            title: 'Registration',
            // First tab panel - Registration
            layout: 'accordion',
            // Accordion object literal properties
            layoutConfig: {
                titleCollapse: true,
                animate: true,
                activeOnTop: true
            },
            defaults: {
                bodyStyle: 'padding:15px',
                collapsed: false
            },
            items: [{ // Search accordion defs
                title: 'LOOK UP - Search Customers',
                layout: 'form',
                labelWidth: 105,
                height: 300,
                frame: true,
                bodyStyle: 'padding:5px',
                autoWidth: true,
                items: [{ // Search Form Fields
                    xtype: 'fieldset',
                    title: 'Search',
                    autoHeight: true,
                    collapsible: true,
                    items: [{
                        layout: 'form',
                        defaultType: "textfield",
                        defaults: {
                            allowBlank: true
                        },
                        items: [{
                            fieldLabel: 'E-Ticket Number',
                            id: 'txtETicketNumber',
                            width: 700
                        },
                        {
                            fieldLabel: 'Last Name',
                            id: 'txtLastName',
                            width: 200
                        },
                        {
                            fieldLabel: 'Zip Code:',
                            id: 'txtZipCode',
                            width: 200
                        },
                        {
                            layout: 'gridpanel',
                            xtype: 'examplegrid',
                            iconCls: 'icon-grid'
                        }] // Search Window controls
                    }] // Field Defs
                }]
            },
            {
                title: 'Pre-Registered',
                frame: true,
                bodyStyle: 'padding:5px',
                height: 300,
                autoWidth: true

            },
            {
                title: 'Attendance',
                frame: true,
                bodyStyle: 'padding:5px',
                autoWidth: true,
                height: 300
            },
            {
                title: 'Purchase',
                frame: true,
                bodyStyle: 'padding:5px',
                autoWidth: true,
                height: 300
            }

            ]
        },
        // END Registration tab panel
        {
            title: 'Report & Finalize'
        },
        // Second tab panel - Report & Finalize
        {
            title: 'Session Info'
        } // Third tab panel - Session Info
        ]

    }).show(); // Tabs
    var win = new Ext.Window({});
}) // Ext.onReady

**Condor** · 20 Apr 2009 6:53 AM

I browsed over this quickly and noticed:
1. Your grid uses a non-existing layout.
2. The grid isn't sized in any way. It needs a width and a height or autoHeight:true.

**KingKahn** · 20 Apr 2009 7:01 AM

Since indenting takes long time and cut and paste does not work, I am attaching the script as a txt doc.

**jay@moduscreate.com** · 20 Apr 2009 7:06 AM

KingKhan use jsbeautifier.org

**KingKahn** · 20 Apr 2009 7:09 AM

for the tip!

**mjlecomte** · 20 Apr 2009 7:13 AM

FYI: http://extjs.com/learn/Ext_Forum_Hel..._code_properly

**KingKahn** · 20 Apr 2009 7:24 AM

Pardon my ignorance to the forum rules!

Accordion and gridpanel rendering issue

Thread Tools

Search Thread

Display

Accordion and gridpanel rendering issue

Accordion and gridpanel rendering issue

Indented Code

Indented Code

Nah...That was not indented. Please ignore the previous post.

Nah...That was not indented. Please ignore the previous post.

Thanks.....

Thanks.....

Thanks and I will remember this from now on.

Thanks and I will remember this from now on.