开发者社区> walb呀> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

ExtJs 备忘录(8)—— 管理界面搭建和其他部分控件介绍

简介:
+关注继续查看

一、管理界面[TreePanel、Viewport、layout-browser]

    8.1.aspx

    1.1  效果截图

     

    1.2  实现代码

        //标签页
        var tabs = new Ext.TabPanel({
            region: 
'center',
            deferredRender: 
false,
            margins: 
'0 5 5 0',
            activeTab: 
0,
            defaults: {
                closable: 
true,
                autoScroll: 
true
            },
            items: [{
                title: 
'首页',
                html: 
'<b>欢迎您登陆系统</b>'
            }]
        });

        Ext.onReady(
function() {
            Ext.state.Manager.setProvider(
new Ext.state.CookieProvider());

            
function createTree(iText) {
                
return new Ext.tree.TreePanel({
                    autoScroll: 
true,
                    animate: 
true,
                    border: 
false,
                    rootVisible: 
false,
                    root: 
new Ext.tree.TreeNode({
                        text: iText,
                        draggable: 
false,
                        expanded: 
true
                    })
                });
            }

            
function appendTreeNode(tree, tnId, iText, iUrl) {
                tree.root.appendChild(
new Ext.tree.TreeNode({
                    id: tnId,
                    text: iText,
                    listeners: {
                        
'click'function(node, event) {
                            event.stopEvent();
                            
var n = tabs.getComponent(node.id);
                            
if (!n) { ////判断是否已经打开该面板   
                                n = tabs.add({
                                    
'id': node.id,
                                    
'title': node.text,
                                    html: 
'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + iUrl + '"></iframe>'
                                    
//<div id="loading" style="font-size:8pt">正在加载...</div>
                                    //autoLoad:{url:iUrl, scripts:true} //通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性   
                                });
                            }
                            tabs.setActiveTab(n);
                        }
                    }
                }));
            }
            
            
//人员管理
            var daTree = createTree("人员管理");
            appendTreeNode(daTree, 
"da1""录入1""/esayadd.aspx");
            appendTreeNode(daTree, 
"da2""录入2""/esayadd.aspx");
            appendTreeNode(daTree, 
"da3""录入3""/esayadd.aspx");
            appendTreeNode(daTree, 
"da4""录入4""/esayadd.aspx");

            
//审核管理
            var shTree = createTree("自我管理");
            appendTreeNode(shTree, 
"sh1""录入1""/esayadd.aspx");
            appendTreeNode(shTree, 
"sh2""录入2""/esayadd.aspx");

            
var viewport = new Ext.Viewport({
                layout: 
'border',
                items: [
                
//顶栏
                new Ext.BoxComponent({
                    region: 
'north',
                    margins: 
'0 5 0 5',
                    el: 
'north'
                }), {
                    region: 
'west',
                    id: 
'west-panel',
                    title: 
'系统导航',
                    split: 
true,
                    width: 
200,
                    minSize: 
175,
                    maxSize: 
400,
                    collapsible: 
true,
                    margins: 
'5 0 5 5',
                    layout: 
'accordion',
                    layoutConfig: {
                        animate: 
true
                    },
                    defaults: { border: 
false },
                    items: [{
                            title: 
"人员管理",
                            items: [daTree]
                        }, {
                            title: 
'自我管理',
                            items: [shTree]
                        }]
                    }, 
                    tabs
                    ]
                });
        });

    代码说明:

      a).  这里封装了树形控件的创建和节点添加

二、其他控件

    8.2.aspx

    2.1  先来张大合照

     

    2.2  实现代码

      2.2.1  下拉框、菜单[CycleButton、SplitButton]

            var btn = new Ext.CycleButton({
                showText: 
true,
                prependText: 
'View as ',
                items: [{
                    text:
'text only',
                    iconCls:
'view-text',
                    checked:
true
                },{
                    text:
'HTML',
                    iconCls:
'view-html'
                }],
                changeHandler:
function(btn, item){
                    Ext.Msg.alert(
'Change View', item.text);
                }
            });
            
            
//二级菜单
            var sb = new Ext.SplitButton({
                   text: 
'二级菜单',
                   menu: 
new Ext.menu.Menu({
                    items: [{
                        text: 
'Item 1',
                        menu:
new Ext.menu.Menu({
                            items: [
                                {text: 
'Item 3'},
                                {text: 
'Item 4'}
                            ]
                           })
                    }]
                   })
            });

      2.2.2  调色板[ColorPalette] 

            //调色板
            var cp = new Ext.ColorPalette({
                value:
'993300',       //默认值
                listeners: {
                    
'select':function(palette, selColor){
                        Ext.Msg.alert(
'颜色', selColor);
                    }
                }
            });  

      2.2.3  滑动条[Slider] 

            //滑动条
           var slider = new Ext.Slider({
                width: 
200,
                value: 
50,
                increment: 
10,
                minValue: 
0,
                maxValue: 
100
            });

       2.2.4  日历[DatePicker]

new Ext.DatePicker()

三、下载

    ExtJS2010-1-17.rar

四、相关文章索引

    4.1.  Ext核心API详解-Ext.tree.TreePanel

本文转自博客园农民伯伯的博客,原文链接:ExtJs 备忘录(8)—— 管理界面搭建和其他部分控件介绍,如需转载请自行联系原博主。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
基于JSP+Mybatis实现的CRM客户关系管理系统
该项目主要基于JAVAWEB技术,开发了一套CRM客户关系管理系统,实现了用户登录,权限控制,数据统计,以及市场活动、线索、客户、联系人、合同的CRUD,使用Proxy实现Service层的动态代理,实现DAO层事务控制。
48 0
苹果机查看macOS版本号
苹果机查看macOS版本号
45 0
PS-ONE 品思国际艺术教育获数千万元 A 轮融资,将正式启动线上视频课程、网络授课
本次融资后,尤其在学术调研方向,PS-ONE已加大投入力度,致力于完善Research Center/调研中心,创建随机研究院等多个创意青年机会实践基地。
419 0
沫沫金-Mybatis工具类,生成dao层xml、mapper文件和实体类entity层
Mybatis Generator工具使用起来,总感觉不太灵活加上初次环境配置麻烦,特编写java文件 单文件不依赖,直接生成。源码如下(此为Oracle数据库版) package net.
726 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载