学习ext之二

最新推荐文章于 2024-07-09 19:50:17 发布

chenlin66475537

最新推荐文章于 2024-07-09 19:50:17 发布

阅读量411

点赞数

分类专栏： ext 文章标签： ext stylesheet border calendar function html

本文链接：https://blog.csdn.net/chenlin66475537/article/details/5382253

版权

ext 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在网上找了个可以运行的ext布局的模板来学习一下：

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>主页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    
    <link rel="stylesheet" type="text/css" href="../ext2/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../ext2/css/indexloading.css" />

    <script type="text/javascript" src="../ext2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext2/ext-all-debug.js"></script>
    <script type="text/javascript" src="../js/main/Main.js"></script>
</head>
<body>
    <div id="loading-mask" style=""></div>
    <div id="loading">
        <div class="loading-indicator">
            <img src="/resources/extanim32.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle" />Loading...
        </div>
    </div>

</body>
</html>

js代码

//树点击事件
var ClickEvent=function(node,event){
    alert('d');
    //叶子节点点击不进入链接
    if (node.isLeaf()) {
        // 显示叶子节点菜单
        event.stopEvent();
     ALLEvents(node);
    } else {
         //不是叶子节点不触发事件
         event.stopEvent();
         //点击时展开
         node.toggle();
   }
};

//树控件
var treenode=new Ext.tree.TreePanel({
    autoScroll:true,//如果超出范围带自动滚动条
    animate:true,
    rootVisible:false,//根节点不可视
    border:false,
    animate:true,   //True表示为转换状态时出现动画
    enableDD:true,
    containerScroll:true,
    root:new Ext.tree.AsyncTreeNode({
             id:'root',
                                        text:"树的根",
                                        expanded:true, //起始展开状态
                                        loader: new Ext.tree.TreeLoader({url:"treedata.json"}),
                                        children:[
                                        {text:'my',id:'num1',children:[{text:'my1'}]},
                                        {text:'nuddd',id:'num2'}
                                        ]
                                    }),


    listeners:
    {
        "click":ClickEvent
//        "dblclick":ClickEvent
    }
});

Ext.onReady(function(){

//--设置一些共有参数
Ext.BLANK_IMAGE_URL="/ext2/resources/images/default/s.gif";
//初始化鼠标停留时的提示信息
Ext.QuickTips.init();

//1.创建top部分
//2.创建foot部分
//3.创建leftMenu部分
//4.创建工作区
//5.建立leftMenu和mainTab之间的关系
//6.创建布局

//头部
var head = new Ext.Panel({
                        border:false,
                        region:"north",     //在顶部
                        height:80,          //高度
                        //items:[botton],      //数据
                        html:"<div style=/"height:78px;/">头部</div>"
                    });

//底部
var foot = new Ext.Panel({
                        region:"south",     //在底部
                        height:35,          //高度
                        html:"<div style=/"height:33px;/">底部</div>"
                    });


var leftMenu=new Ext.Panel({
    titleCollapse:true,
    collapsible:true,   //自动收缩按钮
    border:false,
    width:200,
    layout:"accordion",
    extraCls:"roomtypegridbbar",
    layoutConfig: {animate: true},//添加动画效果
    region:"west",
    title:'系统菜单',
    items:[{
                title:"办公列表",
                autoScroll:true,
                iconCls:"my_calendar",
                items:[treenode]
            },{
                iconCls:"my_calendar",
                autoScroll:true,
                title:"日常信息"
            }
          ]
});

//工作区
var mainTab = new Ext.Panel({
                        region:"center",    //工作区
                        html:"<div style=/"height:33px;/">主要工作区</div>"
                    });

//建立leftMenu和mainTab之间的关系
leftMenu.on("nodeClick",function(nodeAttr){ mainTab.loadTab(nodeAttr);});

//创建布局
var viewport = new Ext.Viewport({
                                    layout:"border",        //采用了border
                                    style:"border:#024459 2px solid;",
                                    //其面板的字组件都已经在第一到四步创建，这时只要给出变量名称就可以了
                                    items:[head,leftMenu,mainTab]
                                 });
//剔除加载层
setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading-mask').fadeOut({remove:true});
    }, 250);
});

chenlin66475537

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习ext之二

在网上找了个可以运行的ext布局的模板来学习一下： html代码： http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" > 主页
复制链接

扫一扫