初识EXTjs（01）

最新推荐文章于 2024-11-07 11:18:24 发布

趣果子

最新推荐文章于 2024-11-07 11:18:24 发布

阅读量225

点赞数

文章标签： extjs 测试

本文链接：https://blog.csdn.net/qq_35392139/article/details/56666501

版权

ps:在js中，函数与匿名函数的区别：函数有名字，以为着下次可以方便的调用；函数没有名字叫匿名函数，匿名函数一般只是调用一次，后续不在使用。

进入正题：

应用ExtJs

应用extjs需要在页面中引入extjs的样式及extjs库文件。样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个：adapter/ext/ext-base.js及ext-all.js。其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。Adapter表示适配器，也就是说可以有多种适配器，因此可以把adapter/ext/ext-base.js换成adapter/jquery/ext-jquery-adapter.js,或adapter/prototype/ext-prototype-adapter.js等。

一个要使用extjs框架的页面中一般要包括下面几句：

<link rel=”stylesheet” type=”text/css” href=”extjs/resources/css/ext-all.css”/>

<script type=”text/javascript” src=”extjs/adapter/ext/ext-base.js”></script>

<script type=”text/javascript” src=”extjs/ext-all.js”></script>

在ExtJs库文件及页面内容加载完后，ExtJs会执行Ext.onReady中指定的函数。一般情况下用户的ExtJs应用都是从Ext.onReady开始的，使用ExtJs应用程序的代码大致如下：

<script>

Function fn()

{

Alert(‘ExtJs 库以加载’);

}

Ext.onReady(fn);

</script>

Fn也可以写成一个匿名函数的形式，因此上面的代码也可以改成下面的形式。

<script>

Ext.onReady(function()

{

Alert(‘ExtJs库已加载’);

})；

</script>

下边是初步了解引用配置之后的代码demo

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <title>树形结构</title>  
        <script type="text/javascript" src="/gtss/plugin/ext-4.2/ext-all-4.2.1.js"></script>  
        <script type="text/javascript" src="/gtss/scripts/ext/ext-base.js"></script>
        <script type="text/javascript" src="/gtss/webapp/js/bootstrap.js"></script>          
        <script type="text/javascript" src="/gtss/plugin/ext-4.2/ext-lang-4.2.1-zh_CN.js"></script>  
        <link href="/gtss/plugin/ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css" >  
      

 
<script type="text/javascript">  
    Ext.onReady(function(){  
        var northItem={  
            region:'north',//如果采用border布局，这个项一定要有  
            html:'<div style="background-color:#00aacc;color:#ffffff;font-size:30px;">预留的logo位置？</div>'   
           /*  region:'north',
            html:'' */
        }; 
      /*   var toolbar = new Ext.toolbar.Toolbar({
        	renderTo:Ext.getbody(),
        	width:500
        }); */
        //树状图  
        var store=Ext.create('Ext.data.TreeStore',{  
            root:{//树状图有且只有一个树根  
                expanded:true,//这树状图是可以打开叶子的  
                children:[  
                {  
                    text:'大项目1',  
                    expanded:true,  
                    children:[  
                    {  
                        id:1,//为下面的监听事件所使用，且ID为1  
                        text:'项目1',  
                        leaf:true//表明这里是叶子，不再向下延伸，同时为下面的监听器所操作  
                    },  
                    {  
                        id:2,  
                        text:'项目2',  
                        leaf:true  
                    },  
                    {  
                        id:3,  
                        text:'项目3',  
                        leaf:true  
                    }  
                    ]  
                },  
                {  
                    text:'大项目2',  
                    expanded:true,  
                    children:[  
                    {  
                        id:4,  
                        text:'项目4',  
                        leaf:true  
                    },  
                    {  
                        id:5,  
                        text:'项目5',  
                        leaf:true  
                    }  
                    ]  
                }  
                ]  
            }  
        });  
        var westItem={  
            region:'west',  
            xtype:'treepanel',  
            store:store,//添加树状图  
            width:100,//这里一定要设置好宽度，否则不显示  
            rootVisible:false,//不显示树根  
            split:true,//可以自己调整其大小  
            collapsible:true,//可以折叠  
            listeners:{  
                //如果项被点击的话  
                itemclick:function(view,record,item){  
                    //如果是叶子，对应上面的leaf==true  
                    if(record.data.leaf){  
                        //如果没有与当前点击项目id相同的的标签页的话  
                        if(!Ext.getCmp(record.data.id)){  
                            //则新建一个与当前点击项目id相同的的标签页  
                            Ext.getCmp("centerItem").add({  
                                id:record.data.id,  
                                title:record.data.text,  
                                html:Ext.util.Format.date(new Date(),'H时i分s秒')+"",  
                                listeners:{ 
                                    //为这个标签页的关闭增加监听事件  
                                    removed:function(){  
                                        //在状态栏中删除原有的信息，添加新的操作信息  
                                        Ext.getCmp("southItem").removeAll();  
                                        Ext.getCmp("southItem").add({html:'关闭了：'+record.data.text+"！"});  
                                    },  
                                    activate:function(){  
                                        Ext.getCmp("southItem").removeAll();  
                                        Ext.getCmp("southItem").add({html:'点击了：'+record.data.text+"！"});  
                                    }},                                   
                                closable:true//允许关闭，同时新建关闭按钮  
                            });  
                        }  
                        //有没有这个标签页都激活这个标签页  
                        Ext.getCmp("centerItem").setActiveTab(record.data.id);  
                        //然后在状态栏中删除原有的信息，添加新的操作信息  
                        Ext.getCmp("southItem").removeAll();  
                        Ext.getCmp("southItem").add({html:'点击了：'+record.data.text+"！"});  
                    }  
                }  
            }  
        };  
        var southItem={  
            region:'south',  
            xtype:'panel',  
            id:'southItem',  
            title:'预留地址显示的空间',  
            collapsible:true//可以折叠  
            /* region:'south',
            html:'' */
        };  
        var eastItem={  
            region:'east',  
            html:''

        };  
        var centerItem={  
            region:'center',  
            id:'centerItem',  
            xtype:'tabpanel'              
        };  
        Ext.create('Ext.container.Viewport',{  
            layout:'border',  
            renderTo:Ext.getBody(),  
            items:[northItem,westItem,southItem,eastItem,centerItem]  
        });  
    });  
</script>
</head>
<body>
	<!-- <div id="BorderLayout" style="padding: 10px 0px; clear: both"></div> -->
</body>
</html>