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. html-Span 指定宽度

    html-Span 指定宽度 css: span{ display:-moz-inline-box; display:inline-block; width:150px; } 链接:如何设置HTML ...

  2. @Validated注解

    参考: https://blog.csdn.net/changerzhuo_319/article/details/55804651

  3. 接阿里云oss有感

    看API,从头细看到尾,在这个过程中一定会找到你要找的东西.

  4. Leetcode 数组问题：删除排序数组内的重复项

    问题描述: 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...

  5. systemtap notes

    systemtap notes -- 10 June 2014 1 Systemtap systemtap是红帽开发的一款分析工具,如果你需要使用的话,最好在redhat的系统上,在 Ubuntu上兼 ...

  6. Flux --> Redux --> Redux React 入门 基础实例使用

    本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...

  7. SpringCloud中Rabbitmq的使用

    1.pom配置,添加以来jar包 <dependency> <groupId>org.springframework.cloud</groupId> <art ...

  8. docker nginx镜像+phpfpm 镜像 组合配置 搭建 PHP+nginx 环境

    前言 在以往的容器环境部署中 运行环境 我们通常把 类似 apache nginx php 等 打包在一个镜像中 起一个容器. 这样做的好处是 方便 简单. 不便的地方是 如果PHP 需要扩展新的 相 ...

  9. lua 获取当前执行目录 lfs 库

    lua lfs 库 lfs.attributes(filepath [, aname]) 获取路径指定属性 lfs.chdir(path) 改变当前工作目录,成功返回true,失败返回nil加上错误信 ...

  10. a#x#i#o#s封装

    封装的js文件如下: /* 用于修改 axios 的一些公用配置,具体参看文档 */import axios from 'axios'import store from '@/store/index. ...