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. [HeadFirst-HTMLCSS学习笔记][第三章创建网页]

    一些基本元素 以下元素都可以用CSS变得更好看 q,<blockquote>,<em>,<br>, <strong>,ol ,ul,li,pre,cod ...

  2. 探究foreach对于迭代变量的封装性的研究

    众所周知教科书上对于foreach之中的注释是在遍历过程中无法改变其遍历的元素例如声明一个数组 ,,,}; foreach(int m in ii){ m = ;//错误 “m”是一个“foreach ...

  3. js的 new image()---转

    创建一个Image对象:var a=new Image(); 定义Image对象的src: a.src=”xxx.gif”;    这样做就相当于给浏览器缓存了一张图片. 图像对象: 建立图像对象:图 ...

  4. Android SDK代理服务器解决国内不能更新下载问题（转）

    言:Android SDK代理服务器解决国内Android SDK不能更新下载问题,经常会遇到Fitch fail URL错误,要不就是Nothing was installed.目下Google遭受 ...

  5. [转载]一个小例子介绍Obj-C的函数命名方式

    原文链接:http://www.cnblogs.com/liufan9/archive/2013/04/02/2995626.html 对于以前做C#或者JAVA开发的朋友而言,初次接触iOS开发,O ...

  6. POJ 1269 - Intersecting Lines 直线与直线相交

    题意:    判断直线间位置关系: 相交,平行,重合 include <iostream> #include <cstdio> using namespace std; str ...

  7. python调win32api调整屏幕分辨率

    需要频繁切换屏幕分辨率,想写个脚本来实现,需要切换时运行一下就好 在网上查到,需要用windows的api,ChangeDisplaySettings 实现代码如下 import win32api d ...

  8. Oracle创建主键自增表

    Oracle创建主键自增表   1.创建表    create table Test_Increase(            userid number(10) NOT NULL primary k ...

  9. apache和tomcat的区别

    Web服务器父与子 Apache和Tomcat区别 经常在用Apache和Tomcat等这些服务器时,你总感觉还是不清楚他们之间有什么关系.在用Tomcat的时候总出现Apache,总感到迷惑,到底谁 ...

  10. 愉快的开始 - 零基础入门学习Python000

    愉快的开始 让编程改变世界 Change the world by program 为什么是Python 既然有各种各样的编程语言可以选择,小甲鱼为什么极力鼓励大家来学习Python呢? 跨平台哦亲 ...