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

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

2017-11-14 1102

版权

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

简介：

+关注继续查看

正文

　　一、管理界面[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]

　　　　　　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

结束语

　　写完这篇关于关于Ext控件基本上就告一段落了，随着版本的更新会慢慢的不断新增更多的控件，如果再在项目中使用Ext的话，再考虑写续了 :)

本文转自over140 51CTO博客，原文链接：http://blog.51cto.com/over140/586535，如需转载请自行联系原作者

文章标签：

JavaScript