ExtJs入门练习：Viewport

/********************************************
 * @author  henyue@gmail.com (Kong)
 * @version CreatedTime:2010-4-23 下午17:31:28
 * @Description ExtJs入门练习：Viewport
 ********************************************/


Ext.onReady(function () {
  viewport = new Ext.Viewport({
    layout : 'border', //以框架为外观表现
    items: [{
        //视图上的第一个组件，位置为north，组件为html代码，
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        autoHeight: true,
//        height: 200,
        border: false,
        margins: '0 0 5 0'
    }, {
        //视图上的第二个组件，位置为west，组件类型为treepanel
        region: 'west',
        collapsible: true, //True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。false表示为保持面板为一个静止的尺寸（缺省为false）。
        title: 'Navigation',
        xtype: 'treepanel',
        width: 200,
        autoScroll: true,
        split: true, //True表示可以自由拉动分割区域。false表示不可调整区域范围（缺省为false）。
        loader: new Ext.tree.TreeLoader(),
        root: new Ext.tree.AsyncTreeNode({
            expanded: true,
            children: [{
                id : 1,
                text: 'Menu Option 1',
                leaf: true //True表示此为子节点，不会再有下级子节点
            }, {
                id : 2,
                text: 'Menu Option 2',
                leaf: true
            }, {
                id : 3,
                text: 'Menu Option 3',
                leaf: true
            }]
        }),
        rootVisible: false, //显示顶级节点
        listeners: {
            //这里的listeners是统一对所有的children设置事件监听，所以可以给每个children加id来进行分别对待
            //类似gwt 1.5中的onClick(Widget w)，先把组件作为参数传进来，再分别处理事件
            click: function(n) {
                if (n.attributes.id == 2) {
                  Ext.Msg.alert("hello world");
                } else {
                  Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
                }
            }
        }
    }, {
        //视图上第三个组件，位置为center，组件类型为tabpanel
        region: 'center',
        xtype: 'tabpanel',
        items: [{
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        },{
            title: '百度',
            html: '<iframe src="http://www.baidu.com" width="100%" height="100%" />'
        },{
            title: '网易',
            html: '<iframe src="http://www.163.com" width="100%" height="100%" />'
        }]
    }, {
        //视图上最底端的组件，位置为south
        region: 'south',
        title: 'Information',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }],

    renderTo : Ext.getBody()
  })
});