1、Extjs就绪函数

1）导入Extjs的CSS

<link rel="stylesheet" type="text/css" href="resources/theme-neptune-all_1.css">

<link rel="stylesheet" type="text/css" href="resources/theme-neptune-all_2.css">

2）导入Extjs的核心JS

<script type="text/javascript" src="extjs-all.js"></script>

3）导入Extjs的本地化JS（动态加载）

<script type="text/javascript" src="js/locale/locale-zh_CN.js"></script>

4）编写Extjs就绪函数（必须在核心库导入之后）

<script type="text/javascript">

        Ext.onReady(function(){

            //coding

            Ext.MessageBox.alert("Title","Hello World!!!");

});

</script>

代码分析:

就绪函数Ext.onReady();

回调函数:function(){}

回调函数:Ext/Jquery函数中声明自定义函数,确保函数之间的执行顺序。

2、了解各个文件的作用

核心库：

ext-6.0.1\build\

ext.js                    最基础的核心库

ext-debug.js         原文件

ext-all.js               包含所有组件的的核心库

ext-all-debug.js     原文件

样式风格模板：Extjs提供动态样式功能

ext-6.0.1\build\classic\theme-classic\resources

ext-6.0.1\build\classic\theme-aria\resources

ext-6.0.1\build\classic\theme-crisp\resources

ext-6.0.1\build\classic\theme-gray\resources

ext-6.0.1\build\classic\theme-neptune\resources

theme- xxxx -all.css（需要运行环境，可选，导入下面两个文件）

theme-xxxx-all_1.css（必须）

theme-xxxx-all_2.css（必须）

去水印:

在样式文件夹（theme-xxxx-all_1.css或theme-xxxx-all_2.css中找）把content:'d'全替换为content:''

国际化：

ext-6.0.1\build\classic\locale

经典例子代码：

官方的例子网址：

http://examples.sencha.com/extjs/6.0.1/examples/

3、Extjs Layout

视图组件(Viewport,Panel)的layout属性配合items属性实现。

注意：1）items最好不要嵌套3层以上。

　　   2）语法中最后一个属性不要带逗号。

常用的布局：border，fit，accordion，anchor，column，hbox，vbox，table，card等等

理解：布局的嵌套（items嵌套）

Border：

Region：上北、下南、左西、右东、中间（中间一定要有）

上北、下南（设置高度）

左西、右东（设置宽度）

（有些时候会出现xtype找不到对象，大多数原因是组件没有被加载或者是没有定义widget.组件名）

代码实例：

 <!DOCTYPE><!—解决HTML5的兼容 -->

 <html>

     <head>

         <title>ExtJS Foundation Demo 02 Layout</title>

         <meta charset="utf-8"/>

         <!—1.导入Extjs的CSS（动态加载）-->

         <link rel="stylesheet" type="text/css" href="resources/theme-neptune-all_1.css">

         <link rel="stylesheet" type="text/css" href="resources/theme-neptune-all_2.css">

         <!—2.导入Extjs的核心JS-->

         <script type="text/javascript" src="js/ext-all.js"></script>

         <!—3.导入Extjs的本地化JS（动态加载）-->

         <script type="text/javascript" src="js/locale/locale-zh_CN.js"></script>

         <!—4.编写Extjs的就绪函数-->

         <script type="text/javascript">

             //回调函数:Ext/Jquery函数中声明自定义函数,确保函数之间的执行顺序。

             Ext.onReady(function(){

                     Ext.create('Ext.Viewport', {

                         layout: 'border',

                         items: [{

                             region: 'north',

                             height: 38,

                             title: 'North'//,

                             //split: true,

                             //collapsible: true,

                             //layout: 'fit',

                             //items: []

                             //html: 'north'

                         },{

                             region: 'west',

                             width: '20%',

                             title: 'West',

                             collapsible: true,

                             //html: 'west'

                             layout:'accordion',

                             items: [{

                                 xtype:'tabpanel',

                                 title:'Tabs模块',

                                 items:[{

                                     xtype:'panel',

                                     title:'Tabs1模块'

                                 },{

                                     xtype:'panel',

                                     title:'Tabs2模块'

                                 }]

                             },{

                                 xtype:'panel',

                                 title:'订单管理模块'

                             },{

                                 xtype:'panel',

                                 title:'客户管理模块'

                             },{

                                 xtype:'panel',

                                 title:'流程管理模块'

                             }]

                         },{

                             region: 'center',

                             title: 'Center',

                             html: 'center'

                         }]//视图组件容器 div

                     });

             });

         </script>

     </head>

     <body>

     </body>

 </html>

4、Extjs常有函数

Ext.require()；//加载Ext类，只加载一次。

Ext.create()；//相当于new Ext对象（组件）。

【温馨提示】ext-4.0.7-gpl及ext-premium-6.0.1-trial已上传到百度云盘，需要的朋友可自行下载

链接: http://pan.baidu.com/s/1dErfnxv

密码: aqv6

Extjs 6 MVC开发模式（一）的更多相关文章

  1. Extjs 6 MVC开发模式（二）

    1.Extjs MVC开发模式 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs4.x版本中引入了MVC开发模式,开始将 ...

  2. Extjs MVC开发模式详解

    Extjs MVC开发模式详解   在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式, ...

  3. 【转】EXT JS MVC开发模式

    原文链接:EXT JS MVC开发模式 在app(亦即根目录)文件夹下面创建controller.model.store和view文件夹,从名称上就知道他们该放置什么代码了吧.然后创建Applicat ...

  4. ext.js的mvc开发模式详解

    ext.js的mvc开发模式详解和环境配置 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开 ...

  5. MVC开发模式下的用户角色权限控制

    前提: MVC开发模式 大概思想: 1.在MVC开发模式下,每个功能都对应着不同的控制器或操作方法名(如修改密码功能可能对应着User/changepd),把每个功能对应的控制器名和操作方法名存到数据 ...

  6. MVC开发模式之Servlet+jsp+javaBean

    Servlet+jsp+JavaBean组合开发是一种MVC开发模式,控制器Controller采用Servlet.模型Model采用JavaBean.视图View采用JSP. 1.Web开发的请求- ...

  7. 什么是MVC开发模式以及它和传统开发模式的区别

    Model1模式:使用纯JSP或者JSP+JavaBean开发,存在如下缺陷:JSP页面中混合了HTML和JAVA代码,从而给代码的开发和阅读带 来了麻烦:系统后期维护和扩展非常困难,例如在JSP页面 ...

  8. MVC开发模式简述

    了解MVC开发模式,首先我们要了解一下发展趋势 一.什么是软件设计 Jack W.Reeves 于14年前(1992年),就在其撰写的论文——<What is Software Design&g ...

  9. MVC开发模式的数据运行流程

    对于java中经典的开发模式MVC,有一些感触!现说一下Java中数据的运行流程,由于我技术有限,有错的话欢迎提出,不喜勿喷! 我们知道在MVC开发模式,包括三部分视图层V(view).控制层C(Co ...

随机推荐

  1. Https协议简析及中间人攻击原理

    1.基础知识 1.1 对称加密算法 对称加密算法的特点是加密密钥和解密密钥是同一把密钥K,且加解密速度快,典型的对称加密算法有DES.AES等                              ...

  2. Global.asax使用1

    Application_start: 1.第一个访问网站的用户会触发该方法.(针对访问的是asp.net应用程序的类,及ashx,aspx等才会触发) 2. 通常会在该方法里定义一些系统变量,如聊天室 ...

  3. mongo db 使用方法

    1 下载 mogodb http://www.mongodb.org/display/DOCS/Downloads 2 打开服务 我安装在e盘下了 可以指定数据文件位置 到 E:\mongoDB\mo ...

  4. jsp生成html

    这几天公司需要生成静态的HTML页面以减小数据库与服务器的压力和负担,于是在网络上一阵狂搜,找到几篇相当不错的文章和一些相当有用的资料.为了方便,我整理在自己的BLOG,以供参考! 在接下来的应用中, ...

  5. shell script中的$*和$@

    在shell script中,$*和$@都是获取所有的命令行参数,但是这两者在使用的过程中会有细微的差别,差别主要是在有没有使用双引号,即是直接使用$*,$@,还是使用"$*",& ...

  6. mysql数据库的连接

    public TJb checkjbByschool(long id)throws ClassNotFoundException,SQLException { Class.forName(" ...

  7. ZendFramework2 文件结构

    Application |__ config // 配置文件目录 |__ language // 语言包目录 |__ src |__ Application |__ Controller // 控制器 ...

  8. connectionStrings基本配置

    常用connectionStrings配置: <connectionStrings>   <add       name="LocalSqlServer"     ...

  9. Java程序员需要学习的知识点

    Java是全世界最受欢迎的3大编程语言之一,它可以开发出许多实用的WEB应用程序和桌面应用程序,更重要的一点,Java是跨平台的语言——编写一次,可以再任何地方运行.另外,Java也很容易入门,如果你 ...

  10. 理解JMS规范中消息的传输模式和消息持久化

    http://blog.csdn.net/aitangyong/article/category/2175061 http://blog.csdn.net/aitangyong/article/det ...