PDA

View Full Version : Problem in enhancing Accordion Layout



tabish
12 Feb 2014, 11:15 PM
Hi
I created 2 panels having some text fields.
I am having problem in overriding the collapse function to set a certain height of top panel during collapse and add some text fields in that collapsed area(with a certain height) of top panel and as usual bottom panel should expand when top panel collapse.After defining collapse function the toggle button of top panel stops working.
Thanks in advance

Ext.require([
'Ext.container.*','Ext.util.Format'
]);
Ext.application({
name: 'HelloExt',
launch: function() {
var container = Ext.create('Ext.panel.Panel', {
title: 'Employee Details',
width: 400,
//height: 400,

defaults: {

bodyStyle: 'padding:30px'
},
layout: {

type: 'accordion',
titleCollapse: false,
animate: true,
activeOnTop: false
},
items: [
{
title: 'Personal Details',
id : 't',
//icon : 'testing.png',
collapse : function()
{
Ext.getCmp('t').add([{xtype:'textfield', id : 'u',fieldLabel:'Age'}]);
Ext.getCmp('t').collapsed = true;
Ext.getCmp('a').expand();
alert('2');
Ext.getCmp('f').setVisible(false);
Ext.getCmp('m').setVisible(false);
alert('3');
Ext.getCmp('l').setVisible(false);
Ext.getCmp('e').setVisible(false);
alert('4');
this.setHeight(100);
alert('5');
return this;



},
beforecollapse : function(p, direction, animate, eOpts) {
console.log('before collpased called..');
alert('before collapse');
this.setHeight(100);
return true;
},
expand : function()
{
Ext.getCmp('a').collapse();
Ext.getCmp('t').collapsed = false;
Ext.getCmp('f').setVisible(true);
Ext.getCmp('m').setVisible(true);
Ext.getCmp('l').setVisible(true);
Ext.getCmp('e').setVisible(true);

Ext.getCmp('u').setVisible(false);
this.setHeight(300);

},
items:[
{
xtype:'textfield',
id : 'f',
fieldLabel:'First Name'
},
{
xtype:'textfield',
id : 'm',
fieldLabel:'Middle Name'
},
{
xtype:'textfield',
id : 'l',
fieldLabel:'Last Name'
},
{
xtype:'textfield',
id : 'e',
fieldLabel:'EmpId'
}



]


},{
title : 'Contact Details',
id : 'a',

items:[
{
xtype:'textfield',
fieldLabel:'Email Id'
},
{
xtype:'textfield',
fieldLabel:'Phone number'
}
]

}],
renderTo: Ext.getBody()
});

}
});

palakurthivishal
13 Feb 2014, 12:59 AM
Hello,
Please use listeners while adding handlers to events, I have modified your snippet and it is as follows.

Ext.require([ 'Ext.container.*', 'Ext.util.Format'
]);
Ext.application({
name: 'HelloExt',
launch: function() {
var container = Ext.create('Ext.panel.Panel', {
title: 'Employee Details',
width: 400,
//height: 400,


defaults: {


bodyStyle: 'padding:30px'
},
layout: {


type: 'accordion',
titleCollapse: false,
animate: true,
activeOnTop: false
},
items: [{
title: 'Personal Details',
id: 't',
//icon : 'testing.png',
listeners: {
collapse: function() {
Ext.getCmp('t').add([{
xtype: 'textfield',
id: 'u',
fieldLabel: 'Age'
}]);
Ext.getCmp('t').collapsed = true;
Ext.getCmp('a').expand();
alert('2');
Ext.getCmp('f').setVisible(false);
Ext.getCmp('m').setVisible(false);
alert('3');
Ext.getCmp('l').setVisible(false);
Ext.getCmp('e').setVisible(false);
alert('4');
this.setHeight(100);
alert('5');
return this;






},
beforecollapse: function(p, direction, animate, eOpts) {
console.log('before collpased called..');
alert('before collapse');
this.setHeight(100);
return true;
},
expand: function() {
Ext.getCmp('a').collapse();
Ext.getCmp('t').collapsed = false;
Ext.getCmp('f').setVisible(true);
Ext.getCmp('m').setVisible(true);
Ext.getCmp('l').setVisible(true);
Ext.getCmp('e').setVisible(true);


Ext.getCmp('u').setVisible(false);
this.setHeight(300);


}
},

items: [{
xtype: 'textfield',
id: 'f',
fieldLabel: 'First Name'
}, {
xtype: 'textfield',
id: 'm',
fieldLabel: 'Middle Name'
}, {
xtype: 'textfield',
id: 'l',
fieldLabel: 'Last Name'
}, {
xtype: 'textfield',
id: 'e',
fieldLabel: 'EmpId'
}






]




}, {
title: 'Contact Details',
id: 'a',


items: [{
xtype: 'textfield',
fieldLabel: 'Email Id'
}, {
xtype: 'textfield',
fieldLabel: 'Phone number'
}]


}],
renderTo: Ext.getBody()
});


}
});

tabish
13 Feb 2014, 1:47 AM
Hi Palakurthivishal


Thankyou for the reply but it is also not working. ,

palakurthivishal
13 Feb 2014, 8:57 AM
Please explain your requirement in detail...

tabish
13 Feb 2014, 10:40 PM
PFA the snapshot exact reqiurements.

palakurthivishal
14 Feb 2014, 5:03 AM
Hello tabish,
Please llok at this snippet execution, I guess this is what you need at a higher level.

Ext.create('Ext.panel.Panel', { title: 'Accordion Layout',
width: 300,
height: 300,
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: false,
animate: true,
multi : true,
activeOnTop: true
},
items: [{
title: 'Panel 1',
items : [{
xtype : 'button',
text : 'One',
itemId : 'x'
},{
xtype : 'button',
text : 'Two',
itemId : 'y'
}],
collapsible : false,
listeners : {
customCollapseEvent : function(cmp){

this.query('#x')[0].hide();
},
customExpandEvent : function(cmp){

this.query('#x')[0].show();
},
beforecollapse : function(){
// this.collapsed = true;
this.up().items.items[1].expand();
return false;
}
}

},{
title: 'Panel 2',
html: 'Panel content!',
collapsed : true,
listeners : {
collapse : function(){
this.up().items.items[0].fireEvent('customExpandEvent');
},
expand : function(){
this.up().items.items[0].fireEvent('customCollapseEvent');
}
}
}],
renderTo: Ext.getBody()
});

tabish
17 Feb 2014, 10:28 PM
Hi

Thankyou for your help,but still this not exact solution to my problem.
PFA the snapshot about the problem