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. js判断ie浏览器

    function isIE() { //ie? if (!!window.ActiveXObject || "ActiveXObject" in window){ document ...

  2. jquery滚动到指定元素，模仿锚点

    html <div class="pd-nav"> <div class="n-item active"> 保险服务 <i> ...

  3. Html5+css3实现3D转动效果

    由于最近一直在忙着筹划去上海工作的事情,所以博客更新的速度也就慢了下来.前几天面试了几家公司,也拿到几份offer,总结了一些面试中遇到的问题,最近整理一下会和大家一起分享.今天呢,就和大家分享一下前 ...

  4. 检测浏览器是否支持AJAX

    <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Fire ...

  5. java final 和instanceof 关键字

    /* final class A { public final void eat(){ System.out.println("测试"); } } */ class A { } c ...

  6. BaceModel

    https://github.com/nicklockwood/BaseModel 字典封装成model 自动封装 要求属性的名字与字典一样 不能有对象 如果其中有需要自己封装的对象属性 重写setW ...

  7. C#避免过长的IF和Switch分支的方法

    C#避免过长的IF和Switch分支的方法 1.最蠢形态 //很丑有没有! //这个分支要是一两个还是可以接受的 class Program { static void Main(string[] a ...

  8. 【00】why集搜客网络爬虫？

    与各种大企业相比,大数据对于没有数据资源的个体而言是奢侈品. 然而在“互联网思维”.“互联网+”引领下,我们应当勇于实践和颠覆传统,将数据平民化. 不管你是财经.金融.经管.社科专业的技术小白,正在做 ...

  9. linux下JDK,tomcat的安装与环境变量配置

    先从网上下载jdk(jdk-1_5_0_02-linux-i586.rpm) ,下载后放在/home目录中,当然其它地方也行. 进入安装目录#cd /home#cp jdk-1_5_0_02-linu ...

  10. 序列化类型为“System.Reflection.Module”的对象时检测到循环引用

    在使用ajax调用web services时,正好返回的类型为datatable,想用通过json方式直接解析,但调用后,得到如下错误: 序列化类型为“System.Reflection.Module ...