I am trying to create a grid within an accordion panel. Thing is, grid already has a header, so I get 2 headers, one beneath the other. My intention is to add sort buttons and filter search box to the header. I just don't really know which one should I hide, and how..
And.. I am a Newb to js and ext.js.. Using ext.js 4.2.2:
contactListView.js:
Ext.define( 'AcWeb.view.ContactListView',
{
extend: 'Ext.grid.Panel',
xtype: 'contact-list-view',
requires: [
'Ext.grid.feature.Grouping'
],
collapsible: true,
iconCls: 'icon-grid',
frame: false,
resizable: false,
initComponent: function()
{
this.store = new AcWeb.store.ContactList();
this.columns = [
{
text : 'Contact List',
width : '100%',
sortable : true,
flex : 1,
dataIndex: 'userName'
}];
this.callParent();
},
});
container accordion - westview.js:
Ext.define('AcWeb.view.WestView', {
extend: 'Ext.panel.Panel',
requires: [
'Ext.layout.container.Accordion',
'AcWeb.view.ContactListView'
],
xtype: 'west-view',
layout: 'accordion',
title: '',
defaults: {
bodyPadding: 10
},
initComponent: function() {
Ext.apply(this, {
items: [
{
// preventHeader: true,
// html: 'david'
//hidden: true ,
// title: 'Accordion Item 3',
xtype: 'contact-list-view'
}, {
title: 'Accordion Item 3',
html: 'moshe'
}, {
title: 'Accordion Item 4',
html: 'david'
}, {
title: 'Accordion Item 5',
html: 'davidmoshe'
}]
});
this.callParent();
}
});
That was simple...
To hide the headers simply add:
hideHeaders: true
Works like a charm :)