我的ExtJS学习之路 ——3

封装了各种组件，就该作出项目的demo了。

项目中用了通常的top+menu+tabpanel， 有一个项目中用的是 web desktop，这个之后再说。

效果是这样的。

这需要index.js   ，菜单的json模拟数据 tree.txt  ，代码如下

Ext.onReady(function(){
    Ext.QuickTips.init();
    
    var menus= new Ext.tree.TreePanel({
        id:'menus',
        loader: new Ext.tree.TreeLoader({
            dataUrl: 'temp/tree.txt'
            }),
        title:'菜单',
        rootVisible:false,
        region:'west',
        split:true,
        border:true,
        collapsible:true,
        listeners : {
            'click': function(node, event) {
                alert(node.id);
            }
        }
    });
    var menusRoot = new Ext.tree.AsyncTreeNode({text:'菜单'});
    menus.setRootNode(menusRoot);
    menusRoot.expand();
    
    var tabs = new Ext.TabPanel({
        id:'centertabpanel',
        activeTab : 0, 
        region: 'center',
        animScroll : true, 
        enableTabScroll : true,
        border : false,
        collapsible : false,
        autoDestroy : true,
        closable : false,
        defaults : {
            autoScrol : true
        },
        items : [ {
            title : '管理首页',
            html : '这是-----管理首页'
        } ]
    });
    
    var bottom=new Ext.Panel({
        border : false,
        height : 28,
        bbar :['########管理系统','->',
            {
                text:'收展',
                handler:function(){
                    var panel = Ext.getCmp('toppanel');
                    if (panel.collapsed) {
                        panel.expand(true);
                    } 
                    else {
                        panel.collapse(true);
                    }
                }
            }]
    });
    
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[{
            xtype:'panel',
            region: 'north',
            id:'toppanel',
            contentEl:'top',
            height: 45
        },{
            title:'导航',
            width: 190,
            minSize: 150,
            maxSize: 250,
            collapsible : true,
            split :true,
            border:false,
            layout : {
                type : 'accordion',
                animate : true
            },
            region:'west',
            items:[menus]
        },{
            region: 'center',
            split: true,
            border: false,
            layout: 'border',
            items: [tabs]
        },{
            region:'south',
            height : 28,
            border : false,
            items: [bottom]
        }]
    });
});
[
    {id:'menu_1',text:'菜单-1',leaf:true}
]

index.html  修改如下：

<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
function logout(){
    alert('你点击我了！');
}
</script>
</head>
<body>
    <div id="top">
        <a href="#" onclick="logout();">点击我</a>
        <font color="red">这里面的需要css和div控制</font>
    </div>
</body>

 

其他的和之前的一样。

posted @ 2012-02-24 09:45  陈金龙  阅读(281)  评论(0)    收藏  举报