Results 1 to 6 of 6

Thread: adding multiple dynamic accordion layout PANELs to accorion panel

  1. #1
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213

    Default adding multiple dynamic accordion layout PANELs to accorion panel

    I have a Tree which I have to convert that into panels having Accordion panel

    here is the structure of tree
    first screen
    groups_tree.jpg

    when I expand inner children of "Groups" the tree Structure is like this:
    2nd screen
    general_tree.jpg


    Now I have to convert this full tree structure into Accordion Panel

    Code:
    Code:
    var maintenance_panel = new Ext.Panel({
            id:"main_panel_id",
            collapsible:false,
            region:"center",
            width: 210,
            height:460,
            autoScroll:true,
            padding:'0 15 0 0',
            layout:'fit',
            tbar: [{
                
                text: "Edit Search Point",
                handler: function(){
                }
            }]
        });
    Screenshots till I reached:
    1st Screen same as TreePanel into Accordion

    groups_accordion.jpg

    Code:
    Code:
    for(var i=0;i<inventory_maintenance_treeds.getCount();i++){
                                   var template_id = inventory_maintenance_treeds.getAt(i).data.template_id;
                                   Ext.getCmp("main_panel_id").removeAll();{
                                    id: template_id.split(":")[0]+'template'+i
                
                                }
                                Ext.getCmp("main_panel_id").doLayout();
                               }
                               inventory_maintenance_treeds.load({
                                   
                               callback:function(r,o,s)
                               {
                               for(var i=0;i<inventory_maintenance_treeds.getCount();i++){
                                   var template_id = inventory_maintenance_treeds.getAt(i).data.template_id;
                                if(template_id.indexOf("template")!=-1){
                                    
                                    Ext.getCmp("main_panel_id").add({
                                    id: template_id.split(":")[0]+':template'+i,
                                    collapsible: true,
                                    title: template_id.split(":")[4],
                                    layout:"accordion",
                                     autoScroll:true,
                                     //padding:'0 20 0 0',
                                    listeners:{
                                        beforeexpand:function(p)
                                        {
                                            var id=p.getId();
                                            //  Sub groups code [Begin]
                                            var grid_id = id.split(":")[0];
                                            inventory_maintenance_ds.load({params:{load_type:"Inventory",group_id:grid_id}});
                                                groups_fn(id);
                                            //  [End]
                                        }
                                    }
                                });
                                Ext.getCmp("main_panel_id").doLayout();
                                    if(i==0){
                                        if(temp==0){
                                            Ext.getCmp(template_id.split(":")[0]+':template'+i).collapse();
                                            temp=1;
                                        }
                                    }
                                    
                                }
                            }
                            }
                            });

    2nd ScreenShot of TreePanel into Accordion :

    general_accordion.jpg

    Code:
    Code:
    function groups_fn(id)
    {
        var g_id=id.split(":");
        var id_1 = id;
                 inventory_maintenance_treeds.load({
                    params:{group_id:g_id[0],load_type:"accordian_groups"},        
                       callback:function(r,o,s)
                       {
                           for(var i=0;i<inventory_maintenance_treeds.getCount();i++){
    //                        var Group_id = inventory_maintenance_treeds.getAt(i).data.Group_id;
                               Ext.getCmp(id_1).removeAll();
                            Ext.getCmp(id_1).doLayout();
                           }
                       for(var i=0;i<inventory_maintenance_treeds.getCount();i++){
                           var Group_id = inventory_maintenance_treeds.getAt(i).data.Group_id;
                        Ext.getCmp(id_1).add({
                            id: Group_id.split(":")[0]+':group'+i,
                            collapsible: true,
                            title: Group_id.split(":")[3],
                            layout:'accordion',
                             autoScroll:true,
                             //padding:'0 20 0 0',
                            listeners:{
                                beforeexpand:function(p)
                                {
                                    var subid_1=p.getId();
                                    
                                    //  Sub groups code [Begin]
                                    //var grid_id = subid_1.split(":")[0];
                                    //inventory_maintenance_ds.load({params:{load_type:"Inventory",group_id:grid_id}});
                                        sub_groups_fn(subid_1);
                                    //  [End]
                                }
                            }
                        });
                        Ext.getCmp(id_1).doLayout();
                        if(i==0){
                            if(temp==1){
                                //Ext.getCmp(Group_id.split(":")[0]+':group'+i).collapse();
                                temp=0;
                            }
                        }
                        
                    }
                    }
                    });
    }

    Now my issues come i.e.
    when I click on inner child suppose "BASKIN ROBIN DISTRIBUTION" 2nd childnode......
    it is not giving me further accordion panels for its child as "Baskin Robin Distributions" contains TWO childs but no issue in Firebug for this
    here is the screenshot :

    baskin.jpg

    Code:
    Code:
    function sub_groups_fn(id)                             // recursive function for further childnodes and their childnodes
        {
            //alert(id);
            var g_id=id.split(":");
             inventory_maintenance_treeds.load({
                params:{group_id:g_id[0],load_type:"accordian_subgroups"},        
                   callback:function(r,o,s)
                   {
                       for(var i=0;i<inventory_maintenance_treeds.getCount();i++){
                           Ext.getCmp(id).removeAll();
                        Ext.getCmp(id).doLayout();
                       }
                       
                       for(var i=0;i<inventory_maintenance_treeds.getCount();i++){
                           //alert(inventory_maintenance_treeds.getAt(i).data.Group_id);
                           var Group_id = inventory_maintenance_treeds.getAt(i).data.Group_id;
                        Ext.getCmp(id).add({
                            id: Group_id.split(":")[0]+':subgroup'+i,
                            collapsible: true,
                            title: Group_id.split(":")[3],
                            layout:'accordion',
                            autoScroll:true,
                            listeners:{
                                beforeexpand:function(p)
                                {
                                    var id_1=p.getId();
                                    
                                    //  Sub groups code [Begin]
                                    sub_groups_fn(id_1);
                                    //  [End]
                                }
                            }
                        });
                       // alert(id);
                        Ext.getCmp(id).doLayout();
                    }
                }
            });
        }
    Baskin robins didn't expanded



    I am getting prob in this 3rd level of accordion panel

    Please help me..................!!!


    Thanks in advance....!!
    Pooja

  2. #2
    Ext JS Premium Member saJoshua's Avatar
    Join Date
    Nov 2007
    Location
    Sydney
    Posts
    526

    Default

    Do you have a data model that represents your data? Could you please post this?

    I would think that using the nested ExtJS accordian layouts with Ext.Panel's is going to very quickly create deeply nested structures and you're going to run into problems. Maybe stick to a single accordian layout, then listen on click, parse your data and use Ext.DomHelper to load HTML into the Ext.Container representing each accordian area.

  3. #3
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213

    Default

    Here are the data according to screen shots:
    1st Screen's Response and Post in firebug:
    groups_post.jpggroups_response.jpg



    2nd Screen's Response and Post:

    general_response.jpggeneral_post.jpg

    3rd Screen's Response and Post whose accordion Panel is not creating is :

    baskin_response.jpg

  4. #4
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213

    Default

    ""Maybe stick to a single accordian layout, then listen on click, parse your data and use Ext.DomHelper to load HTML into the Ext.Container representing each accordian area.""


    Can you give small code for what u said in this above lines just an outline how to do it.....

  5. #5
    Ext JS Premium Member saJoshua's Avatar
    Join Date
    Nov 2007
    Location
    Sydney
    Posts
    526

    Default

    really dirty example, but you might find something useful. This can be dropped into an 3.4.0 examples folder.

    Code:
    <html>
    <head>
        <title>Accordion Layout</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	
    	
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
    
        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <!-- ENDLIBS -->
    
        <script type="text/javascript" src="../../ext-all.js"></script>
    
        <style type="text/css">
            html, body {
                font: normal 12px verdana;
                margin: 0;
                padding: 0;
                border: 0 none;
                overflow: hidden;
                height: 100%;
            }
            .empty .x-panel-body {
                padding-top:20px;
                text-align:center;
                font-style:italic;
                color: gray;
                font-size:11px;
            }
        </style>
        <script type="text/javascript">
            Ext.onReady(function() {
    			
    			var data = {
    				group		: {
    					group1		: [
    						'subgroup1 a',
    						'subgroup2 a',
    						'subgroup3 a',
    						'subgroup4 a'
    					],
    					group2		: [
    						'subgroup1 b',
    						'subgroup2 b',
    						'subgroup3 b',
    						'subgroup4 b'
    					],
    					group3		: [
    						'subgroup1 c',
    						'subgroup2 c',
    						'subgroup3 c'
    					],
    					group4		: [],
    					group5		: []
    				},
    				brand		: {
    					brand1		: [],
    					brand2		: [],
    					brand3		: [],
    					brand4		: [],
    					brand5		: [],
    					brand6		: []
    				},
    				stocktype	: {
    					st1		: [],
    					st2		: [],
    					st3		: []
    				},
    				storage		: {}
    			};
    			
    			var addNode = function(parent, text, showIndicator) {
    				return Ext.DomHelper.append(parent, {tag: 'div', html: '<div>' + (showIndicator ? '<div class="x-tool x-tool-toggle">&nbsp;</div>' : '') + '<span class="x-panel-header-text">' + text + '</span></div><div class="x-panel-bwrap" style="display: block; width:auto;"></div></div>', style:'cursor:pointer;border-left:0;border-right:0;', cls:"x-panel-header x-unselectable x-accordion-hd x-panel-collapsed"}, true);
    			}
    			
    			
                var getPanel = function(o){
    				return new Ext.Panel({
    					title	: '<b>' + o + '</b>',
    					value 	: o,
    					listeners	: {
    						activate : function(cmp, fn){
    							// so when each panel is expanded, 
    							//		load some data and create DOM for that
    							//	you might also want to look at using ExtJS XTemplate to consume your XML;
    							
    							
    							// this is purely for demonstration purposes..
    							if(!cmp.rendered) {
    								fn = fn || arguments.callee;
    								return window.setTimeout(function(){fn.call(cmp, cmp, fn)}, 100);
    							};
    							
    							// clear out any existing child nodes;
    							while(cmp.body.dom.children.length) {
    								Ext.get(cmp.body.dom.children[0]).remove();
    							}
    							
    							// iteratively add DOM nodes;
    							for(var item in data[cmp.value]) {
    								if(data[cmp.value].hasOwnProperty(item)){
    									var node = addNode(cmp.body.dom, item, true);
    									node.dom.setAttribute('level1', cmp.value);
    									node.dom.setAttribute('level2', item);
    									
    									node.on({
    										click	: function(e, el){
    											
    											var header = e.getTarget('.x-panel-header')
    											var body = Ext.get(header).child('.x-panel-bwrap').dom;
    											
    											// clear out any existing child nodes;
    											while(body.children.length) {
    												Ext.get(body.children[0]).remove();
    											}
    											
    											var level1 = header.getAttribute('level1');
    											var level2 = header.getAttribute('level2');
    											
    											if(!level1 || !level2) {
    												return;
    											}
    
    											data[level1][level2].forEach(function(item){
    												addNode(body, item);
    											});
    										}
    									});
    								};
    							};
    						}
    					}
    				});
    			};
    
    				
                var accordion = new Ext.Panel({
                    region:'west',
                    margins:'5 0 5 5',
                    split:true,
                    width: 210,
                    layout:'accordion',
    				listeners	: {
    					render		: function(){
    						for(var item in data) {
    							if(data.hasOwnProperty(item)) {
    								this.add(getPanel(item));
    							};
    						};
    					}
    				}
                });
    
                var viewport = new Ext.Viewport({
                    layout:'border',
                    items:[
                        accordion, {
                        region:'center',
                        margins:'5 5 5 0',
                        cls:'empty',
                        bodyStyle:'background:#f1f1f1',
                        html:'<br/><br/>&lt;empty center panel&gt;'
                    }]
                });
            });
        </script>
    </head>
    <body>
    <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
    </body>
    </html>

  6. #6
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213

    Default

    hey thanks a lot for this example will try it and will let you know if I face any probz.... Thanks again

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •