Ext之ViewPort

qinjingkai

浏览: 259865 次
性别:
来自: 广州

最近访客更多访客>>

RacheAngel

ms143014

快乐编程

fallout2

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (74)

社区版块

存档分类

EXT JavaScript CSS HTML J#

viewport布局中regoin为center是必不可以少的,其他的region可以没有

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>page.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../scripts/ext/ext-all.js"></script>


    <script language="javascript">
    var    centerTabPanel;


      function addNewTab(inputUrl,inputId){
        alert("调用了id"+inputId);
        alert("html---"+inputUrl);
       var tabEle = centerTabPanel.getItem(inputId);


       if(tabEle){
             centerTabPanel.remove(tabEle,true);
     }

        tabEle=centerTabPanel.add({
                closable:true,
                id:inputId,
                title:inputUrl,
                html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src='+inputUrl+'></iframe>',
                autoShow:true
            });

            centerTabPanel.setActiveTab(tabEle);

      }





                           Ext.onReady(function(){

                centerTabPanel=new Ext.TabPanel({
                region:'center',
                autoScroll:true,
                animScroll:true,
                resizTabs:true,
                enableTabScroll:true,
                activeTab:0,
                deferredRender:false,
                defaults: {
                    autoScroll:true
                },
                tabMargin:0,
                items:[{
                    id:'mainFrame',
                    title: '工单管理系统',
                    iconCls:'icon-root-s',
                    html:'<div style="width:100%;height:100%;background:#90EE90"><iframe scrolling=auto frameborder=0 width=100% height=100% src="calendar.html"></iframe></div>',
                    autoScroll:true
                }]

            });









                            new Ext.Viewport({

                            layout:"border",

                            items:[{region:"north",

                            height:50,

                            title:"顶部面板"},





                            {region:"west",

                            width:100,
                            split:true,
                            collapsible: true,
                            fitToFrame: true,
                            closable:true,
                            title:"左边面板",
                            //margins:'0 0 0 2',
                            layout:'accordion',//下拉功能属性
                            layoutConfig:{
                                animate:true
                            },
                            items:[
                            {
                               id:'1',
                               title:'中国',
                               items:[{
                               id:'2',
                               //title:'广东'+'javascript:addNewTab(2'+',guangdong.html)'
                               //title:"<a href=javascript:addNewTab('guangdong.html',2)>广东</a>"
                               title:'<a href=javascript:addNewTab("guangdong.html",2)>广东</a>'
                               }
                               ]

                            }




                            ]},centerTabPanel]

                            });

                            });








                            var root=new Ext.tree.TreeNode({
        id:"root",
        text:"树的根"});


var c1=new Ext.tree.TreeNode({
        id:"c1",
        text:"广东",
        value:'xxxx'
    });


    var c2=new Ext.tree.TreeNode({
       id:"c2",
       text:"广西" ,
       value:'xxxx'

    });



    var guangdong=['广州','东莞','深圳'];
    var guangxi=['南宁','柳州','桂林'];
    for(var i=0;i<guangdong.length;i++){
        var gd=new Ext.tree.TreeNode({
          text:guangdong[i],
          value:'xxxx'
        });
        c1.appendChild(gd);
    }

    for(var j=0;j<guangxi.length;j++){
        var gx=new Ext.tree.TreeNode({
           text:guangxi[j],
           value:'001'
        });
        c2.appendChild(gx);
    }






    root.appendChild(c1);
    root.appendChild(c2);
    var tree=new Ext.tree.TreePanel({
        renderTo:"treediv",
        root:root,
        rootVisible:false,
        width:100
    });

    tree.on("click",function(node,event){
        var v=node.attributes.value
        alert("您点击了"+v);
    }
    );

    c1.on("click",function(node,event){
        var v=node.attributes.value
        alert("您点击了"+v);
        //alert("您点击了"+node.value);
    }
    );


    </script>
</head>

<body>
    <div id="pageTest"></div>
</body>
</html>

viewport.rar (15.7 KB)
下载次数: 120

分享到：