layout.js

ajax最新框架extjs

Ext.onReady(function(){
    
    Ext.state.Manager.setProvider(new Ext.state.SessionProvider({state: Ext.appState}));
    var button = Ext.get('show-btn');
    button.on('click', function(){

        // tabs for the center
        var tabs = new Ext.TabPanel({
            region    : 'center',
            margins   : '3 3 3 0', 
            activeTab : 0,
            defaults  : {
				autoScroll : true
			},
            items     : [{
                title    : 'Bogus Tab',
                html     : Ext.example.bogusMarkup
             },{
                title    : 'Another Tab',
                html     : Ext.example.bogusMarkup
             },{ 
                title    : 'Closable Tab',
                html     : Ext.example.bogusMarkup,
                closable : true
            }]
        });

        // Panel for the west
        var nav = new Ext.Panel({
            title       : 'Navigation',
            region      : 'west',
            split       : true,
            width       : 200,
            collapsible : true,
            margins     : '3 0 3 3',
            cmargins    : '3 3 3 3'
        }); 

        var win = new Ext.Window({
            title    : 'Layout Window',
            closable : true,//True 表示为显示 'close' 的工具按钮可让用户关闭window, false表示为隐藏按钮,并不允许关闭window(默认为 true). 
            width    : 600,
            height   : 350,
            //border : false,
            plain    : true,//True 表示为渲染window body的背景为透明的背景
            layout   : 'border',
            items    : [nav, tabs]
        });

        win.show(button);
    });
});