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. Codevs 2602 最短路径问题

     时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题目描述 Description 平面上有n个点(n<=100),每个点的坐标均在-10000~10000之间. ...

  2. 【Eclipse】eclipse部署web项目至本地的tomcat但在webapps中找不到

    clipse部署web项目至本地的tomcat但在webapps中找不到 1.发现问题 在我的 eclipse 中有个Dynamic Web Project(动态web项目),在本地的 tomcat ...

  3. Linux java 启动脚本

    #!/bin/bash export LANG=en_US.UTF8 start(){ ulimit -n 65535 #find the jars jar_lib=`ls -1 lib/*.jar` ...

  4. MYsql 锁详解 锁 与索引的关系

    原文:http://blog.csdn.net/xifeijian/article/details/20313977#t10   mysql innodb的锁是通过锁索引来实现的.   select ...

  5. 湘潭oj1203/邀请赛A题 数论+java大数

    求 n%1+n%2+n%3+n%4+.........n%n=,n<=10^12次. 开始时盲目地找规律,结果一无所获.后来经学长点拨,天资愚钝,搞了半天才明白. 先上图: 对于该题,在求区间( ...

  6. Eclipse、IDEA安装JavaFX

    简介 JavaFX插件 e(fx)eclipse是一组工具和必要的库,它们帮助您执行JavaFX编程,确保您已经作为插件将其安装在eclipse上了. JavaFX Scene Builder Jav ...

  7. 解决Linux系统没有/etc/sysconfig/iptables文件

    Linux系统中,防火墙默认是不开启的,一般也没有配置过任何防火墙的策略,所以不存在/etc/sysconfig/iptables文件. 一.常规解决方法: 1.在控制台使用iptables命令随便写 ...

  8. android Activity生命周期的例子

    package com.example.yanlei.yl2; import android.app.AlertDialog; import android.content.DialogInterfa ...

  9. linux 配置maven环境变量

    vi /etc/profile 按照如下样例编辑环境变量. 编辑之后记得使用source /etc/profile命令是改动生效. 5.验证结果 在任意路径下执行mvn -version验证命令是否有 ...

  10. [Javascript] Use a custom sort function on an Array in Javascript

    Sorting in Javascript with sort uses lexical sorting by default, which means it will sort in alphabe ...