1. #1
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    96
    Vote Rating
    1
    Nam is on a distinguished road

      0  

    Question Ahhh!!! Not understanding 2.0

    Ahhh!!! Not understanding 2.0


    Hey Guys, Now that 2.0 Alpha has been released, I have been trying to work with it. I have followed the 'Panels' demo, and I got it all set up so that it displays properly on the page. But when I try and access components of the layout, I just do not understand how to do it. Every attempt I have made so far does not allow me to access the methods. Am I doing something wrong, can someone please explain this. Thanks...

    PHP Code:
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    // create some portlet tools
    var tools = [{
        
    id:'gear',
        
    handler: function(){
            
    Ext.Msg.alert('Message''The Settings tool was clicked.');
        }
    },{
        
    id:'close',
        
    handler: function(etargetpanel){
            
    panel.ownerCt.remove(paneltrue);
        }
    }];

    var 
    viewport = new Ext.Viewport({
        
    layout:'border',
        
    items:[{
            
    region:'west',
            
    id:'west-panel',
            
    title:'West',
            
    split:true,
            
    width200,
            
    minSize175,
            
    maxSize400,
            
    collapsibletrue,
            
    margins:'0 0 5 5',
            
    cmargins:'0 5 5 5',
            
    layout:'accordion',
            
    layoutConfig:{
                
    animate:true
            
    },
            
    items: [{
                
    html'blah',
                
    title:'Navigation',
                
    autoScroll:true,
                
    border:false,
                
    iconCls:'nav'
            
    },{
                
    title:'Settings',
                
    html'blah',
                
    border:false,
                
    autoScroll:true,
                
    iconCls:'settings'
            
    }]
        }
        ,{
            
    region:'north'
            
    ,id:'north-panel'
            
    ,layout:'fit'
            
    ,height:35
            
    ,border:true
            
    ,style:'text-align:center;'
            
    ,margins:'3 3 3 3'
            
    ,html:'<h2>Welcome to the Freedom Of Information Research Center (FOIRC)</h2>'
        
    }
        ,
    HomePanel = new Ext.TabPanel({
            
    region:'center',
            
    deferredRender:false,
            
    activeTab:0,
            
    items:[{
                
    id:'HomePanel',
                
    title:'Test',
                
    xtype:'portal',
                
    region:'center',
                
    margins:'35 5 5 0',
                
    items:[{
                    
    id:'col1',
                    
    columnWidth:.33,
                    
    baseCls:'x-plain',
                    
    bodyStyle:'padding:10px 0 10px 10px',
                    
    items:[{
                        
    title'Panel 1',
                        
    draggable:true,
                        
    collapsible:true,
                        
    frame:true,
                        
    toolstools,
                        
    html'blah'
                    
    },{
                        
    title'Another Panel 1',
                        
    collapsible:true,
                        
    draggable:true,
                        
    frame:true,
                        
    toolstools,
                        
    html'blah'
                    
    }]
                },{
                    
    id:'col2',
                    
    columnWidth:.33
                    
    baseCls:'x-plain',
                    
    bodyStyle:'padding:10px 0 10px 10px',
                    
    items:[{
                        
    title'Panel 2',
                        
    collapsible:true,
                        
    draggable:true,
                        
    frame:true,
                        
    toolstools,
                        
    html'blah'
                    
    },{
                        
    title'Another Panel 2',
                        
    collapsible:true,
                        
    draggable:true,
                        
    frame:true,
                        
    toolstools,
                        
    html'blah'
                    
    }]
                },{
                    
    id:'col3',
                    
    columnWidth:.33,
                    
    baseCls:'x-plain',
                    
    bodyStyle:'padding:10px',
                    
    items:[{
                        
    title'Panel 3',
                        
    collapsible:true,
                        
    draggable:true,
                        
    frame:true,
                        
    toolstools,
                        
    html'blah'
                    
    },{
                        
    title'Another Panel 3',
                        
    collapsible:true,
                        
    draggable:true,
                        
    frame:true,
                        
    toolstools,
                        
    html'blah'
                    
    }]
                }]
            }]
        })]
    });
    alert(HomePanel.getItem['HomePanel']);
    var 
    HomeTab viewport.layout.center.items[0];
    var 
    Center viewport.layout.center;
    alert(HomeTab.items[2].baseCls);
    alert(Center.items[0].getItem('col3'));
    Center.remove(HomeTab.items[2], true); 
    I have a live demo available at www.foirc.net

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,080
    Vote Rating
    113
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Nam -

    Ext 2.0 relies heavily on a component model which maintains creating, rendering, and destroying all components within your page. Classes which extend from Ext.Component can be retrieved very easily by assigning the component an id and using Ext.getCmp to retrieve a reference to it.

    For example, in your above code you could add an id of 'panel3' to your Panel 3's component configuration. Ex:
    Code:
    {
       id: 'panel3'
       title: 'Panel 3',
      collapsible:true,
      draggable:true,
      frame:true,
      tools: tools,
      html: 'blah'
    }
    Now you will be able to access this panel anywhere you want once it has been creating by using Ext.getCmp. Here is an example of updating the body of the panel to a simple string.
    Code:
    var panel3 = Ext.getCmp('panel3');
    panel3.body.update('a simple example');
    Aaron

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    96
    Vote Rating
    1
    Nam is on a distinguished road

      0  

    Default


    Thanks, that helped a lot.

  4. #4
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    96
    Vote Rating
    1
    Nam is on a distinguished road

      0  

    Question


    Does anyone know how I would go about adding and removing a column? Here is the declaration of the viewport I am using...


    PHP Code:
    var tools = [{
        
    id:'gear',
        
    handler: function(){
            
    Ext.Msg.alert('Message''The Settings tool was clicked.');
        }
    },{
        
    id:'close',
        
    handler: function(etargetpanel){
            
    panel.ownerCt.remove(paneltrue);
        }
    }];
    var 
    HomePanelTB = new Ext.Toolbar();
    Viewport = new Ext.Viewport({
        
    layout:'border',
        
    items:[{
            
    region:'west',
            
    id:'west-panel',
            
    title:'West',
            
    split:true,
            
    width200,
            
    minSize175,
            
    maxSize400,
            
    collapsibletrue,
            
    margins:'0 0 5 5',
            
    cmargins:'0 5 5 5',
            
    layout:'accordion',
            
    layoutConfig:{
                
    animate:true
            
    },
            
    items: [{
                
    html'blah',
                
    title:'Navigation',
                
    autoScroll:true,
                
    border:false,
                
    iconCls:'nav'
            
    },{
                
    title:'Settings',
                
    html'blah',
                
    border:false,
                
    autoScroll:true,
                
    iconCls:'settings'
            
    }]
        }
        ,{
            
    region:'north'
            
    ,id:'north-panel'
            
    ,layout:'fit'
            
    ,height:35
            
    ,border:true
            
    ,style:'text-align:center;'
            
    ,margins:'3 3 3 3'
            
    ,html:'<h2>Welcome to the Freedom Of Information Research Center (FOIRC)</h2>'
        
    }
        ,new 
    Ext.TabPanel({
            
    region:'center',
            
    deferredRender:false,
            
    activeTab:0,
            
    items:[{
                
    id:'HomePanel',
                
    title:'Test',
                
    toolbarHomePanelTB,
                
    xtype:'portal',
                
    region:'center',
                
    margins:'35 5 5 0',
                
    items:[{
                    
    id:'col1',
                    
    columnWidth:.33,
                    
    baseCls:'x-plain',
                    
    bodyStyle:'padding:10px 0 10px 10px',
                    
    items:[{
                        
    title'Panel 1',
                        
    draggable:true,
                        
    collapsible:true,
                        
    frame:true,
                        
    toolstools,
                        
    html'blah'
                    
    },{
                        
    title'Another Panel 1',
                        
    collapsible:true,
                        
    draggable:true,
                        
    frame:true,
                        
    toolstools,
                        
    html'blah'
                    
    }]
                },{
                    
    id:'col2',
                    
    columnWidth:.33
                    
    baseCls:'x-plain',
                    
    bodyStyle:'padding:10px 0 10px 10px',
                    
    items:[{
                        
    title'Panel 2',
                        
    collapsible:true,
                        
    draggable:true,
                        
    frame:true,
                        
    toolstools,
                        
    html'blah'
                    
    },{
                        
    title'Another Panel 2',
                        
    collapsible:true,
                        
    draggable:true,
                        
    frame:true,
                        
    toolstools,
                        
    html'blah'
                    
    }]
                },{
                    
    id:'col3',
                    
    columnWidth:.33,
                    
    baseCls:'x-plain',
                    
    bodyStyle:'padding:10px',
                    
    items:[{
                        
    title'Panel 3',
                        
    collapsible:true,
                        
    draggable:true,
                        
    frame:true,
                        
    toolstools,
                        
    html'blah'
                    
    },{
                        
    title'Another Panel 3',
                        
    collapsible:true,
                        
    draggable:true,
                        
    frame:true,
                        
    toolstools,
                        
    html'blah'
                    
    }]
                }]
            }]
        })]
    }); 
    Here are some examples of what I am doing, but I don't think I quiet understand how this new version manages its layout structure for all the components.. Is there any good documents, forum posts, or something to help understand the new changes?

    PHP Code:
    var HomeTab Viewport.layout.center.items[0];
    var 
    LastItem HomePanel.items.length 1;
    alert(HomePanel.items[LastItem].id);
    HomePanel.items.remove(LastItemtrue);
    Ext.getCmp(HomePanel.items[LastItem].id).destroy();
    Ext.each(HomePanel.items, function(NodeIndexAllItems) {
         if (
    Node.id) {
             
    alert(Node.id);
         }
    }); 
    After I remove the last item with the remove method, I loop through it, but the item isn't actually removed. The column is actually removed from the page, but the item is still in the layout.

    I want to be able to move the items around, add new columns, panels, etc, so I want to learn and understand the new 2.0 version, so that I can properly understand how to do this. I had just got it working under 1.1, but since 2.0 is out, I would like to get into using that so that I will be up to pace when it comes out.

    I'm impressed with the release so far, but I am having trouble picking it up so far. Thanks guys, any help will be appreciated.

Thread Participants: 1