1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    92
    Vote Rating
    0
    topcoder1 is on a distinguished road

      0  

    Default putting widgets inside InfoPanel

    putting widgets inside InfoPanel


    I want to add some widgets inside each InfoPanel in the accordion, in particular a treePanel.
    I used var treePanel=new xt.TreePanel(parentInfoPanel.id, {...});
    and also set layout on the parent InfoPanel and then add treePanel as a child. None of these approaches work as expected. In the first case the TreePanel fell outside of the InfoPanel, see attached image to see what I mean.
    is this doable?

    Code:
      		
    var leftnav = new Ext.ux.Accordion('leftnav', {
        			fitHeight: true,
        			boxWrap:true,
        			fitContainer: true
        			, fitToFrame: true
    				, useShadow: true
    });
                for ( var i = 0; i < oElement.nav.length; i++) {
                    if (oElement.nav[i].title) {
                      
                       var el=leftnav.add(new Ext.ux.InfoPanel(oElement.nav[i]));
    
    					var sub_menu =new xt.TreePanel(el.id, {
           					 animate:true,
            				enableDD:true,
            				containerScroll: true,
            				lines:false,
            				rootVisible:false,
            				loader: new Ext.tree.TreeLoader({
    						//	dataUrl:'menu_gen.php'
    						})
        				});
        			    var croot = new xt.AsyncTreeNode({
            allowDrag:false,
            allowDrop:true,
            //id:'croot',
            text:'Packages and Components',
            cls:'croot',
            loader:new Ext.tree.TreeLoader({
                dataUrl:'menu_gen.php',
               createNode: readNode
            })
        });
    /*
    	           var layout = new Ext.BorderLayout(el.id, {
                    north: {
                        split: false, initialSize: 10
                    },
                    south: {
                        split: false, initialSize: 10
                    },
                    east: {
                        split: false, initialSize: 10
                    },
                    west: {
                        split: false, initialSize: 10
                    },
                    center: { }
                });
    	layout.add('CENTER',sub_menu);
    */
    //el.setContent(sub_menu,true);
    	 sub_menu.setRootNode(croot);
        sub_menu.render();
        croot.expand();
    Attached Images

  2. #2
    Ext User
    Join Date
    Jul 2007
    Posts
    92
    Vote Rating
    0
    topcoder1 is on a distinguished road

      0  

    Default


    In case my intention wasn't stated clear. I just saw exactly what I want from another thread's image attachment:
    http://extjs.com/forum/attachment.ph...8&d=1183908997
    it shows a TreePanel inside an Accordion InfoPanel. how can this be done?

  3. #3
    Ext User
    Join Date
    Jul 2007
    Posts
    92
    Vote Rating
    0
    topcoder1 is on a distinguished road

      0  

    Default


    I just tried another variant:
    var treePanel=new xt.TreePanel(parentInfoPanel.getEl().id, {...});
    instead of var treePanel=new xt.TreePanel(parentInfoPanel.id, {...});
    this time all the treePanels fall into the last InfoPanel.

    And then added some alert statement inside each loop after creating each InfoPanel and the treePanel. Because of the alert delay this time everything works fine as expected. But obviously this is not solution. still need help...

  4. #4
    Ext User
    Join Date
    Jul 2007
    Posts
    92
    Vote Rating
    0
    topcoder1 is on a distinguished road

      0  

    Default


    It turns out that readNode is doing something wicked: croot for reasons unkown always point to the last croot(the root of the last TreePanel) instead of the root of the corresponding TreePanel, so everything everything gets added to the last TreePanel.... I am still baffled as to how this happens.... I guess I am not sane anymore..
    (ps: the correct expression for adding a child can also be var treePanel=new xt.TreePanel(parentInfoPanel.body, {...})
    Code:
    	function readNode(o){
    
    		createComponent(o.id, o.text);
    	}
    
        function createComponent(id, text){
            var node = new xt.TreeNode({
                text: text,
                iconCls:'cmp',
                cls:'cmp',
                type:'cmp',
                id: id,
                cmpId:id,
                allowDelete:true,
                allowEdit:true
            });
    
            croot.appendChild(node);
    
            var files = new xt.AsyncTreeNode({
                text: 'Files',
                allowDrag:false,
                allowDrop:true,
                iconCls:'folder',
                type:'fileCt',
                cmpId:id,
                allowDelete:false,
                children:[],
                expanded:true
            });
    	
    	node.appendChild(files);
            return node;
        }
    
    }

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,168
    Vote Rating
    323
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Here is code of tree in the InfoPanel that I use on the Accordion Demo Page - you can see it in action on the Linked tab.

    PHP Code:
        var lpanel112 accl11.add(new Ext.ux.InfoPanel('lpanel-112', {
            
    icon:iconPath 'bell.png'
            
    autoScrolltrue
            
    maxHeight400
            
    fixedHeight260
        
    }));

        
    // tree in the panel
        
    var tree = new Ext.tree.TreePanel(lpanel112.body, {
            
    animatetrue
            
    loader: new Ext.tree.TreeLoader({dataUrl'get-nodes.php'})
            , 
    containerScrolltrue
            
    enableDDtrue
        
    });
        var 
    root = new Ext.tree.AsyncTreeNode({
            
    text'extjs'
            
    id'extjs'
        
    });
        
    tree.setRootNode(root);
        
    tree.render();
        
    root.expand(); 
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Blessing and Curse of refs, Grid MultiSearch Plugin


  6. #6
    Ext JS Premium Member
    Join Date
    Jul 2007
    Posts
    19
    Vote Rating
    0
    bledford is on a distinguished road

      0  

    Question does this work with grids also

    does this work with grids also


    I assumed you can put a grid on an InfoPanel as well but I am not having much luck. I have created roughly the same structure as above, but for some reason the grid never renders. Any pointers?
    HTML Code:
    <div id="center-div" style="height:100%;width:100%">
        <div id="pnlCenter" style="height:100%;width:100%;background-color:Aqua"></div>
    </div>
    Code:
    var iconPath = 'images/icons/';
                
               //set up Work Breakdown Accordion
               var acc = new Ext.ux.Accordion('center-div', {
                   fitHeight: true,
                   fitToFrame: true,
                   fitContainer: true
                })
               //define a panel 
               var pnlCent = acc.add(new Ext.ux.InfoPanel('pnlCenter', { 
                   icon:iconPath + 'folder.png' 
                   , autoScroll: true 
                   , maxHeight: 500 
                   , fixedHeight: 460 
                })); 
                 
               //set up dataStore for the grid  
               var dataStore = new Ext.data.Store({
                    proxy: new Ext.data.HttpProxy({url: 'PolicyTransactions.xml'}),
                    reader: new Ext.data.XmlReader({
                        record: 'WorkItem',
                        id: 'WITTSID'
                    }, 
                    ['Type', 'Status', 'Priority', 'AssignedResource', 'TransactionCode']
                )})
                //set up the grid columns
                var colModel = new Ext.grid.ColumnModel(
                [
                    {header: "Status", width: 120, dataIndex: 'Status'},
                    {header: "Priority", width: 180, dataIndex: 'Priority'},
                    {header: "AssignedResource", width: 115, dataIndex: 'AssignedResource'},
                    {header: "TransactionCode", width: 100, dataIndex: 'TransactionCode'}
                 ]);
                 //create the grid                                                 
                var grid = new Ext.grid.Grid(pnlCent.body, {
                    ds: dataStore,
                    cm: colModel
                });
                dataStore.load();
                grid.render();

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,168
    Vote Rating
    323
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    This is supported from ver. 1.1-beta1 up. See http://aariadne.com/accordion-preview?showGrid=true tab Panels. Switch off animation of panel as it doesn't play well with grid.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Blessing and Curse of refs, Grid MultiSearch Plugin


Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar