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. 【转载】NSURLSession教程

    原文:http://www.raywenderlich.com/51127/nsurlsession-tutorial 查理·富尔顿 2013年10月9日, 推特 注意从雷 :这是一个缩写版的一章 i ...

  2. ORA-00937:不是单组分组函数_Oracle

    Demo: SELECT USER_ID, USER_NAME, USER_SEX, MAX(USER_AGE), SUM(USER_MONEY) AS USER_MONEY USER_TEL, US ...

  3. 二维计算几何基础题目泛做（SYX第一轮）

    题目1: POJ 2318 TOYS 题目大意: 给一个有n个挡板的盒子,从左到右空格编号为0...n.有好多玩具,问每个玩具在哪个空格里面. 算法讨论: 直接叉积判断就可以.注意在盒子的边界上面也算 ...

  4. eclipse中配置免安装tomcat7

    参看如下链接:http://hi.baidu.com/gpy11/item/744c13e14614c9b52e140b25

  5. js实现checkbox全选与反选

    <script type="text/javascript" language="javascript"> function checkAll(id ...

  6. 在jQuery中Ajax的Post提交中文乱码的解决方案

    引言: 在jQuery的Ajax POST请求中,进行请求,其中的中文在后台,显示为乱码,该如何解决呢? 问题的引入: var regid = $('#oregion').combobox('getV ...

  7. python笔记之subprocess模块

    python笔记之subprocess模块 [TOC] 从Python 2.4开始,Python引入subprocess模块来管理子进程,以取代一些旧模块的方法:如 os.system.os.spaw ...

  8. js区分移动设备与PC

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. PHP标记

    1. xml风格 <?php echo 'ok'; ?> 推荐风格 2. 简短风格 <? echo 'ok'; ?> 限制条件:在配置文件中启用short_open_tag选项 ...

  10. C# 如何查看源程序的IL代码

    1.打开microsoft  visual  studio  2008  /  visual  studio  tools /  visual  studio  2008 命令提示  ,并输入ilda ...