1. #1
    Sencha User
    Join Date
    Feb 2014
    Posts
    4
    Vote Rating
    0
    tabish is on a distinguished road

      0  

    Default Unanswered: Problem in enhancing Accordion Layout

    Unanswered: Problem in enhancing Accordion Layout


    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()
    });

    }
    });
    Attached Files

  2. #2
    Sencha User palakurthivishal's Avatar
    Join Date
    Jul 2013
    Location
    India
    Posts
    74
    Answers
    8
    Vote Rating
    5
    palakurthivishal can only hope to improve

      0  

    Default


    Hello,
    Please use listeners while adding handlers to events, I have modified your snippet and it is as follows.
    Code:
    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()
    		});
    
    
    	}
    });
    Thanks & Regards,
    palakurthivishal

  3. #3
    Sencha User
    Join Date
    Feb 2014
    Posts
    4
    Vote Rating
    0
    tabish is on a distinguished road

      0  

    Default


    Hi Palakurthivishal


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

  4. #4
    Sencha User palakurthivishal's Avatar
    Join Date
    Jul 2013
    Location
    India
    Posts
    74
    Answers
    8
    Vote Rating
    5
    palakurthivishal can only hope to improve

      0  

    Default


    Please explain your requirement in detail...
    Thanks & Regards,
    palakurthivishal

  5. #5
    Sencha User
    Join Date
    Feb 2014
    Posts
    4
    Vote Rating
    0
    tabish is on a distinguished road

      0  

    Default


    PFA the snapshot exact reqiurements.
    Attached Images

  6. #6
    Sencha User palakurthivishal's Avatar
    Join Date
    Jul 2013
    Location
    India
    Posts
    74
    Answers
    8
    Vote Rating
    5
    palakurthivishal can only hope to improve

      0  

    Default


    Hello tabish,
    Please llok at this snippet execution, I guess this is what you need at a higher level.
    Code:
    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()
    });
    Thanks & Regards,
    palakurthivishal

  7. #7
    Sencha User
    Join Date
    Feb 2014
    Posts
    4
    Vote Rating
    0
    tabish is on a distinguished road

      0  

    Default


    Hi

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

Thread Participants: 1