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. openssl 对称加密算法enc命令详解

    1.对称加密算法概述 openssl的加密算法库提供了丰富的对称加密算法,我们可以通过openssl提供的对称加密算法指令的方式使用,也可以通过调用openssl提供的API的方式使用. openss ...

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

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

  3. HTTP协议2之基本认证--转

    http协议是无状态的, 浏览器和web服务器之间可以通过cookie来身份识别. 桌面应用程序(比如新浪桌面客户端)跟Web服务器之间是如何身份识别呢? 什么是HTTP基本认证 桌面应用程序也通过H ...

  4. NET基础课-- 类型基础(NET之美)

    1.类型:值类型  引用类型. 分类依据:类型在内存的分配方式.值类型在堆栈,引用类型在托管堆. 名词:栈--所有变量都会被分配在栈上,只不过值类型直接含有数据,引用类型含有一个指向托管堆对象的地址. ...

  5. CSS3 target伪类简介

    CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如# ...

  6. （转）SQL Server 触发器

    SQL Server 触发器 触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程.触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用. Ø 什么是触发器 ...

  7. CSS 设计彻底研究（一）(X)HTML与CSS核心基础

    第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...

  8. SqlServer日期查询

    一.sql server日期时间函数 Sql Server中的日期与时间函数 1.  当前系统日期.时间 select getdate() 2. dateadd  在向指定日期加上一段时间的基础上,返 ...

  9. JuPyter(IPython) Notebook中通过pip安装第三方Python Module

    JuPyter(IPython) Notebooks中使用pip安装Python的模块 刚开始接触JuPyter Notebook的时候觉得这是个不错的写技术博客的工具,可以很直观的把代码和结果结合在 ...

  10. C# Process类_进程_应用程序域与上下文之间的关系

    进程(Process)是Windows系统中的一个基本概念,它包含着一个运行程序所需要的资源.进程之间是相对独立的,一个进程无法直接访问另一个进程的数据(除非分布式),一个进程运行的失败也不会影响其他 ...