ExtJs 备忘录(8)—— 管理界面搭建和其他部分控件介绍-阿里云开发者社区

开发者社区> walb呀> 正文

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)—— 管理界面搭建和其他部分控件介绍,如需转载请自行联系原博主。

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

相关文章
视觉AI训练营DAY3 身份证识别系统搭建
简要介绍了电子相册的功能,搭建与相关程序函数的作用。
348 0
Java 9 新特性 极简介绍
1. Java 平台级模块系统 Java 9 的定义功能是一套全新的模块系统。当代码库越来越大,创建复杂,盘根错节的“意大利面条式代码”的几率呈指数级的增长。
921 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10077 0
蚂蚁金服 SOFAArk 0.6.0 新特性介绍 | 模块化开发容器
Scalable Open Financial Architecture Stack 是蚂蚁金服自主研发的金融级分布式架构,包含了构建金融级云原生架构所需的各个组件,是在金融场景里锤炼出来的最佳实践。
678 0
zbm
视觉AI训练营-DAY 2 身份证识别系统搭建
身份证识别系统搭建-达摩院视觉智能实验室
102 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10883 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13884 0
【SSM实战】个人博客系统(一)——搭建环境及编写配置文件
【SSM实战】个人博客系统(一)——搭建环境及编写配置文件
6 0
视觉AI训练营-DAY 2 身份证识别系统搭建
视觉AI训练营-DAY 2 身份证识别系统搭建
99 0
SQL Server 2005 系统数据介绍:dm_exec_connections
原文:SQL Server 2005 系统数据介绍:dm_exec_connections转载:http://msdn.microsoft.com/zh-cn/library/ms181509(SQL.90).aspx   sys.dm_exec_connections、sys.dm_exec_sessions 和 sys.dm_exec_requests 动态管理视图映射到sys.sysprocesses 系统表。
1659 0
+关注
1038
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载