Ahhh!!! Not understanding 2.0

[Nam]

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...

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(e, target, panel){
        panel.ownerCt.remove(panel, true);
    }
}];

var viewport = new Ext.Viewport({
    layout:'border',
    items:[{
        region:'west',
        id:'west-panel',
        title:'West',
        split:true,
        width: 200,
        minSize: 175,
        maxSize: 400,
        collapsible: true,
        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,
                    tools: tools,
                    html: 'blah'
                },{
                    title: 'Another Panel 1',
                    collapsible:true,
                    draggable:true,
                    frame:true,
                    tools: tools,
                    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,
                    tools: tools,
                    html: 'blah'
                },{
                    title: 'Another Panel 2',
                    collapsible:true,
                    draggable:true,
                    frame:true,
                    tools: tools,
                    html: 'blah'
                }]
            },{
                id:'col3',
                columnWidth:.33,
                baseCls:'x-plain',
                bodyStyle:'padding:10px',
                items:[{
                    title: 'Panel 3',
                    collapsible:true,
                    draggable:true,
                    frame:true,
                    tools: tools,
                    html: 'blah'
                },{
                    title: 'Another Panel 3',
                    collapsible:true,
                    draggable:true,
                    frame:true,
                    tools: tools,
                    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

[aconran]

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:

{
   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.

var panel3 = Ext.getCmp('panel3');
panel3.body.update('a simple example');

Aaron

[Nam]

Thanks, that helped a lot.

[Nam]

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

var tools = [{
    id:'gear',
    handler: function(){
        Ext.Msg.alert('Message', 'The Settings tool was clicked.');
    }
},{
    id:'close',
    handler: function(e, target, panel){
        panel.ownerCt.remove(panel, true);
    }
}];
var HomePanelTB = new Ext.Toolbar();
Viewport = new Ext.Viewport({
    layout:'border',
    items:[{
        region:'west',
        id:'west-panel',
        title:'West',
        split:true,
        width: 200,
        minSize: 175,
        maxSize: 400,
        collapsible: true,
        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',
            toolbar: HomePanelTB,
            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,
                    tools: tools,
                    html: 'blah'
                },{
                    title: 'Another Panel 1',
                    collapsible:true,
                    draggable:true,
                    frame:true,
                    tools: tools,
                    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,
                    tools: tools,
                    html: 'blah'
                },{
                    title: 'Another Panel 2',
                    collapsible:true,
                    draggable:true,
                    frame:true,
                    tools: tools,
                    html: 'blah'
                }]
            },{
                id:'col3',
                columnWidth:.33,
                baseCls:'x-plain',
                bodyStyle:'padding:10px',
                items:[{
                    title: 'Panel 3',
                    collapsible:true,
                    draggable:true,
                    frame:true,
                    tools: tools,
                    html: 'blah'
                },{
                    title: 'Another Panel 3',
                    collapsible:true,
                    draggable:true,
                    frame:true,
                    tools: tools,
                    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?

var HomeTab = Viewport.layout.center.items[0];
var LastItem = HomePanel.items.length - 1;
alert(HomePanel.items[LastItem].id);
HomePanel.items.remove(LastItem, true);
Ext.getCmp(HomePanel.items[LastItem].id).destroy();
Ext.each(HomePanel.items, function(Node, Index, AllItems) {
     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.