ExtJS常用代码集合，包括弹出提示框，登陆框，树状结构等等。
​1. [代码]弹出提示框     
<html>
    <head>
        <title>Getting Started Example</title>
        <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
        <script src="js/extjs/adapter/ext/ext-base.js"></script>
        <script src="js/extjs/ext-all-debug.js"></script>
        <script>
            Ext.onReady(
                function sayHello(){ 
                    Ext.Msg.show({
                        title: 'Notice',
                        msg: 'Hello World~',
                        buttons: { 
                            yes: 'Hello~', 
                            no: true, 
                            cancel: true
                        },
                        fn: function(btn) {
                            Ext.Msg.alert('You Clicked', btn); 
                        }
                    }); 
                }
            );
        </script>
    </head>
    <body>
        <!-- Nothing in the body    -->
    </body>
</html>
2. [代码]树状结构图     
```
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF8">  
        <title>Tree</title>  
        <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />  
        <script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>  
        <script type="text/javascript" src="js/extjs/ext-all.js"></script>  
        <script type="text/javascript">
            Ext.onReady(function(){
                //创建一棵树
                var tree = new Ext.tree.TreePanel(  
                    {  
                        el: 'tree', //表示渲染的DOM的id.界面中有<div id = "tree"></div>相对应最后这棵树就出现在这个div位置上 
                        //TreeLoader完成数据转换和装配节点的功能  
                        loader: new Ext.tree.TreeLoader({dataUrl: 'tree.txt'})  
                    }  
                );
 
                //设置根节点
                var root = new Ext.tree.AsyncTreeNode({text:'中国'});   
                tree.setRootNode(root);  
                tree.render();  //对树进行渲染
                //只展开第一层节点  
                //root.expand();  
                //展开全部节点  
                root.expand(true,true);  
            }  
        );  
        </script>  
    </head>  
    <body>  
        <div id="tree" ></div>  
    </body>  
</html>
3. [代码]树状结构图的源文件tree.txt     
[  
    {  
        text:'山东',  
        children:[  
        {text:'青岛',leaf:true},
        {text:'济南',leaf:true}  
        ]  
    },  
    {
        text:'北京',leaf:true
    }  
]
4. [代码]登录表单     
```
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF8">  
        <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />  
        <script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>  
        <script type="text/javascript" src="js/extjs/ext-all.js"></script> 
        <style type="text/css">
            body{
                text-align: center;
            }
            #login_form {
                width:317px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 10%;
            }
        </style>
        <script type="text/javascript">
            Ext.onReady(function(){ 
 
                var user_types = new Ext.data.SimpleStore({ 
                    fields: ['id', 'user_type'], 
                    data : [['1','用户管理权限'],['2','发卸货地操作员'],['3','核销申请权限'],['4','通关审核权限']] 
                });    
 
                //初始化form表单
                var user_login = new Ext.FormPanel({ 
                    url: '', //最终提交的url
                    renderTo: 'login_form', 
                    frame: true, 
                    labelAlign: 'right',
                    title: '登陆',  
                    items: [
                        { 
                            xtype: 'textfield', 
                            fieldLabel: '用户名', 
                            name: 'username',
                            allowBlank: false,
                            width: 200,
 
                        },
                        { 
                            xtype: 'textfield', 
                            fieldLabel: '密码', 
                            name: 'password',
                            allowBlank: false,
                            width: 200,
                        },
                        { 
                            xtype: 'combo', 
                            name: 'user_type', 
                            fieldLabel: '用户类型', 
                            mode: 'local', 
                            store: user_types, 
                            displayField:'user_type', 
                            width: 200,
                        }
                    ] ,
                    buttons: [
                        { 
                            text: '登陆', 
                            handler: function(){ 
                                user_login.getForm().submit({ 
                                    success: function(f,a){ 
                                    Ext.Msg.alert('Success', '登陆成功'); 
                                    }, 
                                    failure: function(f,a){ 
                                        Ext.Msg.alert('Warning', '登陆失败'); 
                                    } 
                                }); 
                            } 
                        }, 
                        { 
                            text: '取消', 
                            handler: function(){ 
                                user_login.getForm().reset(); 
                            } 
                        }
                    ]
                }); 
            });
        </script>  
    </head>  
    <body>  
        <div id="login_form"></div>
    </body>  
</html>
5. [代码]导航栏   
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF8">  
        <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />  
        <script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>  
        <script type="text/javascript" src="js/extjs/ext-all.js"></script>  
        <script type="text/javascript">http://www.huiyi8.com/zhishipai/​
            Ext.onReady(function(){指示牌
                new Ext.Toolbar({ 
                    renderTo: 'nav', 
                    items: 
                    [
                        { 
                            xtype: 'tbbutton', 
                            text: '装货信息录入与报备', 
                            menu: [
                                { 
                                    text: '货运申请',
                                    handler: function(){ 
                                        Ext.Msg.alert('提示', '你点击了 货运申请'); 
                                    } 
                                },
                                { 
                                    text: '收发货商家信息登记'
                                },
                            ] 
                        },
                        { 
                            xtype: 'tbbutton', 
                            text: '运途监控', 
                            menu: [
                                { 
                                    text: '货运申请'
                                },
                            ] 
                        },
                        { 
                            xtype: 'tbbutton', 
                            text: '卸货信息录入与核查', 
                            menu: [
                                { 
                                    text: '货运申请'
                                },
                            ] 
                        },
                        { 
                            xtype: 'tbbutton', 
                            text: '高速账单核查', 
                            menu: [
                                { 
                                    text: '货运申请'
                                },
                            ] 
                        },
                        { 
                            xtype: 'tbfill'
                        },
                        { 
                            xtype: 'tbbutton', 
                            text: '系统设置', 
                            menu: [
                                { 
                                    text: '货运申请'
                                },
                            ] 
                        },
                        { 
                            xtype: 'tbbutton', 
                            text: '用户管理', 
                            menu: [
                                { 
                                    text: '货运申请'
                                },
                            ] 
                        },
                        { 
                            xtype: 'tbbutton', 
                            text: '工具', 
                            menu: [
                                { 
                                    text: '货运申请'
                                },
                            ] 
                        },
 
                    ] 
                  }); 
                });  
        </script>  
    </head>  
    <body>  
        <div id="nav"></div>  
    </body>  
</html>

ExtJS常用代码集合的更多相关文章

  1. phpcms v9模板制作常用代码集合(转)

    phpcms v9模板制作常用代码集合(个人收藏) 1.截取调用标题长度 {str_cut($r[title],36,'')} 2.格式化时间 调用格式化时间 2011-05-06 11:22:33 ...

  2. phpcms v9模板制作常用代码集合

    phpcms v9模板制作常用代码集合(个人收藏) 1.截取调用标题长度 {str_cut($r[title],36,'')} 2.格式化时间 调用格式化时间 2011-05-06 11:22:33 ...

  3. SAP屏幕字段常用代码集合

    SAP屏幕字段常用代码集合 ().Screen 设计 TABLES: SSCRFIELDS. PARAMETERS: P_EBLEN LIKE VBRK-EBLEN DEFAULT ' '. PARA ...

  4. C#常用代码集合（1）

    引用自james li的博客,地址:http://www.cnblogs.com/JamesLi2015/p/3147986.html   1 读取操作系统和CLR的版本   OperatingSys ...

  5. Android常用代码集合

    这篇文章主要记录一些常用的一些代码段,方便以后查阅,不断更新中. 1:调用浏览器,载入某网址 1 2 3 Uri uri = Uri.parse("http://www.android-st ...

  6. Unity3D常用代码集合

    1.基本碰撞检测代码 function OnCollisionEnter(theCollision : Collision){         if(theCollision.gameObject.n ...

  7. Yii2 常用代码集合

    Yii2.0 对数据库查询的一些简单的操作 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...

  8. Android 常用代码大集合 [转]

    [Android]调用字符串资源的几种方法   字符串资源的定义 文件路径:res/values/strings.xml 字符串资源定义示例: <?xml version="1.0&q ...

  9. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

随机推荐

  1. python3.x之print（）

    1.print内容 #!/usr/bin/python print('hello world')    //print("hello world") 2.print变量 #!/us ...

  2. 通过BSSID和无线流量传输后门Payload

    本文将探讨无线接入点(AP)和BSSID(MAC地址AP).我们不借助文件系统加密和文件系统中(仅内存中)的硬编码Payload即可获得后门Payload,通过该方法可绕过所有的杀软,可以不使用Pay ...

  3. 【Todo】【转载】Scala中Array, List, Tuple的区别

    参考了这篇文章: https://my.oschina.net/u/1034176/blog/512314 1. 在Scala 2.7中,Array.List都不能混合类型,只有Tuple可以:而在S ...

  4. 区间重合判断[poj2808 校门外的树]

    题目:http://bailian.openjudge.cn/practice/2808/ 参考了文章,重写了代码:http://www.cnblogs.com/youxin/p/3266617.ht ...

  5. SolidEdge如何为零件指定不同的颜色 给零件着色 给装配体着色

    格式-零件画笔 可以给零件的一个表面,或者一个特征着色   如果要指定不同的色彩,可以在格式-样式-面样式中修改   如果是给装配体着色,则点击任意零件,在"无"的选项卡里面修改颜 ...

  6. Dubbo简单介绍及实例

    1.概念 Dubbo是一个分布式服务框架,以及阿里巴巴内部的SOA服务化治理方案的核心框架.其功能主要包含:高性能NIO通讯及多协议集成.服务动态寻址与路由.软负载均衡与容错,依赖分析与降级等. 说通 ...

  7. Vue 开发线路 资料 汇总

    线路 作者推荐学习线路 https://zhuanlan.zhihu.com/p/23134551 他人建议 https://www.cnblogs.com/smartXiang/p/6051086. ...

  8. cocos2d-x 3.0 引用第三方库 及编译成apk时android mk文件写法

    cocos2d-x 3.0 中.假设你须要使用CocosStudio.Extensions扩展库 等等.都须要自己手动加入. 加入过程例如以下:(比方说如今我要加入libExtensions,libC ...

  9. [UnityUI]一些有趣的UI样例

    1.环形进度条 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  10. 软件系统架构 https://www.lanhusoft.com/Article/349.html

    跟蓝狐学习Nop--NopCommerce源码架构详解专题目录 Posted By : 蓝狐 Updated On : 2018-04-16 14:46 我们承接以下nop相关的业务,欢迎联系我们. ...