Results 1 to 10 of 10

Thread: adding dynamically event listener for accordion panel

  1. #1

    Default

    Hi all
    ,
    I have modified my accordion , so it loads now the modules from the server.
    workin perfectly,
    However now i need to change the eventhandlers ,as the element does not exist untill rendered (logically)
    but i cant seem to get it to attach a click handler with the right scope.
    i have a different js file for each module , starting as
    Code:
     
    Ext.EventManager.addListener("supplier_tree", 'click', function(){}); 
    
    so i tried to build a function around this passing the scope , but to no avail now
    i was thinking something like:
    Ext.getCmp('west-panel').getEl().on('click',function(e,scope){
    but no joy,
    how can i keep my js files seperated and make this listener run on rendering the elements

    thanks in advance

    Code:
     
    { 
                region:'west', 
                id:'west-panel', 
                title:'NovaTelecom', 
                split:true, 
                width: 200, 
                minSize: 375, 
                maxSize: 375, 
                collapsible: true, 
    			//collapsed:true, 
                margins:'90 0 5 5', 
                cmargins:'90 5 5 5', 
                layout:'accordion', 
    			//collapseMode: 'mini', 
                layoutConfig:{ 
                    animate:true 
                }, 
    			defaults: { collapsed:true}, 
    			listeners: { 
    				render: function(){ 
    					var sUserMenuStore = new Ext.data.JsonStore({ 
        url: 'ajax/json_modules_init.php', 
       	autoLoad: false , 
    	fields: [  
    {name: 'MODULE_ID'}, 
    {name: 'MODULE_NAME', type: 'string'}, 
    
    {name: 'MODULE_DIVID', type: 'string'} 
    ] 
    
    }); 
    					 
    // on load of our store we perform the dynamic adding of the items to the  
    // accordion 
    	sUserMenuStore.load({params:{limit:20}}); 
    	 
    sUserMenuStore.on('load',function() 
    { 
    	 
    	// get the component where we will add the items too 
    		var mcomp = Ext.getCmp('west-panel'); 
    		//var totalItems = UserMenuStore.getCount(); // as .length 
    	// lets loop through the elements 
    		 
    		 
    	sUserMenuStore.each( 
    			function(r) 
    			{ 
    				 
    		mcomp.add({ 
                    html: '
    ', 
                    title:r.get('MODULE_NAME'), 
    				id:r.get('MODULE_DIVID'), 
                    autoScroll:true, 
                    border:false, 
                    iconCls:'nav', 
    				listeners:{ 
    					render:providers_menu_all 
    						 
    			  } 
    				 
    
                }); 
    			 
    	mcomp.doLayout(); 
    	}); 
    	 
    });

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Please post properly formatted code:
    Code:
    {
        region: 'west',
        id: 'west-panel',
        title: 'NovaTelecom',
        split: true,
        width: 200,
        minSize: 375,
        maxSize: 375,
        collapsible: true,
        //collapsed:true,
        margins: '90 0 5 5',
        cmargins: '90 5 5 5',
        layout: 'accordion',
        //collapseMode: 'mini',
        layoutConfig: {
            animate: true
        },
        defaults: {
            collapsed: true
        },
        listeners: {
            render: function () {
                var sUserMenuStore = new Ext.data.JsonStore({
                    url: 'ajax/json_modules_init.php',
                    autoLoad: false,
                    fields: [{
                        name: 'MODULE_ID'
                    },
                    {
                        name: 'MODULE_NAME',
                        type: 'string'
                    },
                    {
                        name: 'MODULE_DIVID',
                        type: 'string'
                    }]
                });
                // on load of our store we perform the dynamic adding of the items to the
                // accordion
                sUserMenuStore.load({
                    params: {
                        limit: 20
                    }
                });
                sUserMenuStore.on('load', function () {
                    // get the component where we will add the items too
                    var mcomp = Ext.getCmp('west-panel');
                    //var totalItems = UserMenuStore.getCount(); // as .length
                    // lets loop through the elements
                    sUserMenuStore.each(function (r) {
                        mcomp.add({
                            html: '<div id="' + r.get('MODULE_DIVID') + '_div"></div>',
                            title: r.get('MODULE_NAME'),
                            id: r.get('MODULE_DIVID'),
                            autoScroll: true,
                            border: false,
                            iconCls: 'nav',
                            listeners: {
                                render: providers_menu_all // in this func i add the click handler for this element to test
                            }
                        });
                        mcomp.doLayout();
                    });
                });

  3. #3

    Default

    sorry for that. didnt click editor view

    any idea on this apart from the code indenting.

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    To which element are you trying to attach a click handler? And why?

    To <div id="MODULE_DIVID_div">?

  5. #5

    Default

    Hi first thanks for your prompt response,

    the answer is yes , as on clicking the element (accordion item) i render a tree in that div with the menu items for that module(accordion item ).

    --i render the menu items for a specific according element in an tree
    i have a seperate jsfile for each accordion item that structure i like to keep

    Code:
     
    Ext.EventManager.addListener("supplier_tree", 'click', function(){// this gives error now as the menu item isnt rendered yet 
                //Ext.getCmp('west-panel').getEl(scope.id).on('click',function(e,scope){ 
                    alert(scope.id); 
                    var json2 = [{ 
                        "text": "Supplier Management", 
                        "id": 100, 
                        "leaf": false, 
                        "cls": "folder", 
                        "children": [{ 
                            "text": "Add supplier", 
                            "id": 1000, 
                            "leaf": true, 
                            "cls": "folder" 
                        }, { 
                            "text": "Add rate to supplier", 
                            "id": 67751, 
                            "leaf": true, 
                            "cls": "folder" 
                        }, { 
                            "text": "Add rate to client", 
                            "id": 'add_rate_2_client', 
                            "leaf": true, 
                            "cls": "folder" 
                        }, { 
                            "text": "Add number to supplier", 
                            "id": 67752, 
                            "leaf": true, 
                            "cls": "folder" 
                        }, { 
                            "text": "Statement in", 
                            "id": 67753, 
                            "leaf": true, 
                            "cls": "folder" 
                        }, { 
                            "text": "Manual invoice", 
                            "id": 67754, 
                            "leaf": true, 
                            "cls": "folder" 
                        }, { 
                            "text": "Supplier overview", 
                            "id": 2000, 
                            "leaf": true, 
                            "cls": "folder" 
                        }] 
                    },                  { 
                        "text": "Group Management", 
                        "id": 6000, 
                        "leaf": false, 
                        "cls": "folder", 
                        "children": [{ 
                            "text": "add group", 
                            "id": 7000, 
                            "leaf": true, 
                            "cls": "folder" 
                        }, { 
                            "text": "Group overview", 
                            "id": 8000, 
                            "leaf": true, 
                            "cls": "folder" 
                        }] 
      
                    }]; 
                    if (!Ext.get('static_supplier_menu')) { 
                        var tree2 = new Ext.tree.TreePanel({ 
                            id: 'static_supplier_menu', 
                            animate: true, 
                            //lazyRender:true, 
                            enableDD: false, 
                            loader: new Ext.tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode() 
                            lines: false, 
                            border: false, 
                            //el: 'supplier_tree_div', 
                            root: new Ext.tree.AsyncTreeNode({ 
                                text: 'Suppliers', 
                                draggable: false, 
                                id: 'source', 
                                children: json2, 
                                expanded: true 
                            }), 
                            rootVisible: true 
                        }); 
                        tree2.render('supplier_tree_div'); 
                        tree2.on('render',function(){alert('yoohoo');}); 
                        //tree2.getRootNode().expand(true, null); 
                        tree2.on("click", function(node, e){ 
      
    // MORE CODE
    I cant post so it seems , it needs to get approved

    I have done it as following which seems to be good , but getting an error ct is null ( tree error )
    Which refers to the tree im trying to render in the accordion html div as said earlier.


    Code:
     
    sUserMenuStore.each( 
    			function(r) 
    			{ 
    				 
    		mcomp.add({ 
                    html: '
    ', 
                    title:r.get('MODULE_NAME'), 
    				id:r.get('MODULE_DIVID'), 
                    autoScroll:true, 
                    border:false, 
                    iconCls:'nav', 
    				listeners:{ 
    					render:function(thiselement) 
    					{ 
    						 
    						//Ext.getCmp('west-panel').getEl('suppliers_tree').on('click',function(){alert(r.get('MODULE_DIVID'));}); 
    						Ext.EventManager.addListener(r.get('MODULE_DIVID'), 'click',menu_providers_all, this, {	preventDefault: true}); 
    						 
    					} 
    						 
    			  } 
    				 
    
                }); 
    			 
    	mcomp.doLayout(); 
    	});
    Last edited by phpfreak; 30 Dec 2009 at 8:57 AM. Reason: cant post

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Where are you adding those menu items?

  7. #7

    Default

    I render them in a tree;

    and for each module i have a seperate js file

    for the first one for instance i have the file

    menu_providers.js

    Code:
     
    Ext.EventManager.addListener("supplier_tree", 'click', function(){ 
    			//Ext.getCmp('west-panel').getEl(scope.id).on('click',function(e,scope){ 
    				alert(scope.id); 
    				var json2 = [{ 
    					"text": "Supplier Management", 
    					"id": 100, 
    					"leaf": false, 
    					"cls": "folder", 
    					"children": [{ 
    						"text": "Add supplier", 
    						"id": 1000, 
    						"leaf": true, 
    						"cls": "folder" 
    					}, { 
    						"text": "Add rate to supplier", 
    						"id": 67751, 
    						"leaf": true, 
    						"cls": "folder" 
    					}, { 
    						"text": "Add rate to client", 
    						"id": 'add_rate_2_client', 
    						"leaf": true, 
    						"cls": "folder" 
    					}, { 
    						"text": "Add number to supplier", 
    						"id": 67752, 
    						"leaf": true, 
    						"cls": "folder" 
    					}, { 
    						"text": "Statement in", 
    						"id": 67753, 
    						"leaf": true, 
    						"cls": "folder" 
    					}, { 
    						"text": "Manual invoice", 
    						"id": 67754, 
    						"leaf": true, 
    						"cls": "folder" 
    					}, { 
    						"text": "Supplier overview", 
    						"id": 2000, 
    						"leaf": true, 
    						"cls": "folder" 
    					}] 
    				}, 				{ 
    					"text": "Group Management", 
    					"id": 6000, 
    					"leaf": false, 
    					"cls": "folder", 
    					"children": [{ 
    						"text": "add group", 
    						"id": 7000, 
    						"leaf": true, 
    						"cls": "folder" 
    					}, { 
    						"text": "Group overview", 
    						"id": 8000, 
    						"leaf": true, 
    						"cls": "folder" 
    					}] 
    				 
    				}]; 
    				if (!Ext.get('static_supplier_menu')) { 
    					var tree2 = new Ext.tree.TreePanel({ 
    						id: 'static_supplier_menu', 
    						animate: true, 
    						//lazyRender:true, 
    						enableDD: false, 
    						loader: new Ext.tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode() 
    						lines: false, 
    						border: false, 
    						//el: 'supplier_tree_div', 
    						root: new Ext.tree.AsyncTreeNode({ 
    							text: 'Suppliers', 
    							draggable: false, 
    							id: 'source', 
    							children: json2, 
    							expanded: true 
    						}), 
    						rootVisible: true 
    					}); 
    					tree2.render('supplier_tree_div'); 
    					tree2.on('render',function(){alert('yoohoo');}); 
    					//tree2.getRootNode().expand(true, null); 
    					tree2.on("click", function(node, e){ 
    // more code here

  8. #8

    Default

    It looks like my post needs to be approved by a moderator

    but i render the menu items in a tree;

    Code:
     
    Ext.EventManager.addListener("supplier_tree", 'click', function(){ 
    			//Ext.getCmp('west-panel').getEl(scope.id).on('click',function(e,scope){ 
    				alert(scope.id); 
    				var json2 = [{ 
    					"text": "Supplier Management", 
    					"id": 100, 
    					"leaf": false, 
    					"cls": "folder", 
    					"children": [{ 
    						"text": "Add supplier", 
    						"id": 1000, 
    						"leaf": true, 
    						"cls": "folder" 
    					}, { 
    						"text": "Add rate to supplier", 
    						"id": 67751, 
    						"leaf": true, 
    						"cls": "folder" 
    					}, { 
    						"text": "Add rate to client", 
    						"id": 'add_rate_2_client', 
    						"leaf": true, 
    						"cls": "folder" 
    					}, { 
    						"text": "Add number to supplier", 
    						"id": 67752, 
    						"leaf": true, 
    						"cls": "folder" 
    					}, { 
    						"text": "Statement in", 
    						"id": 67753, 
    						"leaf": true, 
    						"cls": "folder" 
    					}, { 
    						"text": "Manual invoice", 
    						"id": 67754, 
    						"leaf": true, 
    						"cls": "folder" 
    					}, { 
    						"text": "Supplier overview", 
    						"id": 2000, 
    						"leaf": true, 
    						"cls": "folder" 
    					}] 
    				},   				{ 
    					"text": "Group Management", 
    					"id": 6000, 
    					"leaf": false, 
    					"cls": "folder", 
    					"children": [{ 
    						"text": "add group", 
    						"id": 7000, 
    						"leaf": true, 
    						"cls": "folder" 
    					}, { 
    						"text": "Group overview", 
    						"id": 8000, 
    						"leaf": true, 
    						"cls": "folder" 
    					}] 
    				 
    				}]; 
    				if (!Ext.get('static_supplier_menu')) { 
    					var tree2 = new Ext.tree.TreePanel({ 
    						id: 'static_supplier_menu', 
    						animate: true, 
    						//lazyRender:true, 
    						enableDD: false, 
    						loader: new Ext.tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode() 
    						lines: false, 
    						border: false, 
    						//el: 'supplier_tree_div', 
    						root: new Ext.tree.AsyncTreeNode({ 
    							text: 'Suppliers', 
    							draggable: false, 
    							id: 'source', 
    							children: json2, 
    							expanded: true 
    						}), 
    						rootVisible: true 
    					}); 
    					tree2.render('supplier_tree_div'); 
    					tree2.on('render',function(){alert('yoohoo');}); 
    					//tree2.getRootNode().expand(true, null); 
    					tree2.on("click", function(node, e){ 
    //more code

  9. #9

  10. #10

    Default

    Ok having a coffee and coming back at it solutioned the view i had of it, was to far into a mess that i didnt see through the bush.

    Code:
    sUserMenuStore.each(
                function(r)
                {
     
            mcomp.add({
                    html: '
    ',
                    title:r.get('MODULE_NAME'),
                    id:r.get('MODULE_DIVID'),
                    autoScroll:true,
                    border:false,
                    iconCls:'nav',
                    listeners:{
                        render:function(thiselement)
                        {
     
                    if (!Ext.get('static_' r.get('MODULE_DIVID'))) {
     
                        Ext.getCmp('west-panel').findById(r.get('MODULE_DIVID')).add(new Ext.tree.TreePanel({
                            id: 'static_' r.get('MODULE_DIVID'),
                            animate: true,
                            //lazyRender:true,
                            enableDD: false,
                            loader: new Ext.tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
                            lines: false,
                            border: false,
                            //renderTo:r.get('MODULE_DIVID'),
                            root: new Ext.tree.AsyncTreeNode({
                                text: r.get('MODULE_NAME'),
                                expanded:true,
                                draggable: false,
                                id: 'source',
                                children: eval(r.get('MODULE_DIVID') '_static_json_menu_items')    }),
                            rootVisible: true
                        }));
     
                        Ext.getCmp('west-panel').findById(r.get('MODULE_DIVID')).doLayout();
                        //tree2.render('supplier_tree_div');
     
                    }
                        }
     
                  }
     
     
                });
     
        mcomp.doLayout();
        });
     
    });
    This works ,
    i have for now static jsons holding the menu item links for each module,
    as in a js file with
    var suppliers_tree_static_json_menu_items= [{ json }];
    var numbers_tree_static_json_menu_items= etc

Posting Permissions

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