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. java多线程编程核心技术学习-1

    实现多线程的两种方式 继承Thread类,重写Thread类中的run方法 public class MyThread extends Thread{ @Override public void ru ...

  2. hdu 5288 ZCC loves straight flush

    传送门 ZCC loves straight flush Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K ...

  3. Laravel 之Composer

    Composer是php的依赖管理工具,不是包管理器. 安装方式: (1)Composer-Setup.exe Win操作系统.需FQ (2)composer.phar 通用安装方式.不需要FQ,wi ...

  4. SGU112

    题意:求a^b-b^a次,100以内.大数的-和*的模拟,用的模板,注意该模板中间和结果都不能出现负数. #include<iostream> #include<string> ...

  5. poj2513字典树+欧拉图判断+并查集断连通

    题意:俩头带有颜色的木棒,要求按颜色同的首尾相连,可能否? 思路:棒子本身是一条边,以俩端为顶点(同颜色共点),即求是否有无向图欧拉路(每条棒子只有一根, 边只能用一次,用一次边即选一次棒子). 先判 ...

  6. bootstrap theme & template

    https://wrapbootstrap.com/ Unify http://wrapbootstrap.com/preview/WB0412697 https://htmlstream.com/p ...

  7. idea抛异常方式

    选中需要抛异常的行,按alt+enter或者ctrl+alt+t,然后上下键选择自己抛异常的方式即可,如下图:

  8. mysql获取子父级节点

    获取所有子节点 DROP FUNCTION IF EXISTS `F_Co29_GetAllChildrenIdsOfTaskevent`;DELIMITER //CREATE FUNCTION `F ...

  9. 实践与理解CMM体系

    我的项目管理之路--5.实践与理解CMM体系   分类: 管理专辑(65) 过程改进(9) 软件工程(52) 版权声明:本文为博主原创文章,未经博主允许不得转载. 一个现代企业我们可以把它比作为自然界 ...

  10. fedora关闭防火墙

    sudo systemctl stop iptables sudo sytemctl stop firewalld