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. form:form的一点体会

    留个日程吧,明个写,下班了>>

  2. 标准C程序设计七---07

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  3. python操作excel--生成图表

    [问题] 想要折腾Python中的Excel中的图标,Chart,Graph. [解决过程] 1.参考: use python to generate graph in excel 说是可以用pywi ...

  4. php——解决中文乱码问题

    一般写代码的时候遇到中文乱码的问题还是比较烦躁的,下面是我总结的几种中文乱码的解决办法: 1:php在头部设置header设置编码方式: header('Content-type:text/html; ...

  5. Linux命令之ss

    1.ss -s 显示socket的统计信息 2.ss -a显示socket的详细信息 (ta:tcp,ua:udp) 3.ss -l显示本机监听的端口 4.ss -pl 显示本机监听的端口和程序 ht ...

  6. 洛谷—— P3375 【模板】KMP字符串匹配

    P3375 [模板]KMP字符串匹配 题目描述 如题,给出两个字符串s1和s2,其中s2为s1的子串,求出s2在s1中所有出现的位置. 为了减少骗分的情况,接下来还要输出子串的前缀数组next. (如 ...

  7. python文件追加及时间获取

    一.python:文件的读取.创建.追加.删除.清空 2011-10-24 11:36:35|  分类: python |举报 |字号 订阅   一.用Python创建一个新文件,内容是从0到9的整数 ...

  8. SQL视图优化改写为存储过程遇到 双引号 单引号问题

    核心在于拼接SQL字符串中遇到中文双引号问题:   可以使用系统函数 替换掉set @pageStr =   replace(@queryStr,'"','''')  不过更推荐 使用两个单 ...

  9. sklearn 特征选择

    1.移除低方差的特征(Removing features with low variance) VarianceThreshold 是特征选择中的一项基本方法.它会移除所有方差不满足阈值的特征.默认设 ...

  10. Youth is not a time of life, it is a state of mind.

    青春不是生命的一段,而是一种精神状态.