Extjs 6 MVC开发模式（一）
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开发模式（一）的更多相关文章
- Extjs 6 MVC开发模式（二）
1.Extjs MVC开发模式 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs4.x版本中引入了MVC开发模式,开始将 ...
- Extjs MVC开发模式详解
Extjs MVC开发模式详解 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式, ...
- 【转】EXT JS MVC开发模式
原文链接:EXT JS MVC开发模式 在app(亦即根目录)文件夹下面创建controller.model.store和view文件夹,从名称上就知道他们该放置什么代码了吧.然后创建Applicat ...
- ext.js的mvc开发模式详解
ext.js的mvc开发模式详解和环境配置 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开 ...
- MVC开发模式下的用户角色权限控制
前提: MVC开发模式 大概思想: 1.在MVC开发模式下,每个功能都对应着不同的控制器或操作方法名(如修改密码功能可能对应着User/changepd),把每个功能对应的控制器名和操作方法名存到数据 ...
- MVC开发模式之Servlet+jsp+javaBean
Servlet+jsp+JavaBean组合开发是一种MVC开发模式,控制器Controller采用Servlet.模型Model采用JavaBean.视图View采用JSP. 1.Web开发的请求- ...
- 什么是MVC开发模式以及它和传统开发模式的区别
Model1模式:使用纯JSP或者JSP+JavaBean开发,存在如下缺陷:JSP页面中混合了HTML和JAVA代码,从而给代码的开发和阅读带 来了麻烦:系统后期维护和扩展非常困难,例如在JSP页面 ...
- MVC开发模式简述
了解MVC开发模式,首先我们要了解一下发展趋势 一.什么是软件设计 Jack W.Reeves 于14年前(1992年),就在其撰写的论文——<What is Software Design&g ...
- MVC开发模式的数据运行流程
对于java中经典的开发模式MVC,有一些感触!现说一下Java中数据的运行流程,由于我技术有限,有错的话欢迎提出,不喜勿喷! 我们知道在MVC开发模式,包括三部分视图层V(view).控制层C(Co ...
随机推荐
- Android学习笔记--JNI的使用方法
1.JNI是什么 JNI是Java Native Interface的缩写,它提供若干的API实现Java与其他语言之间的通信.而Android Framework由基于Java语言的的Java层与基 ...
- js对象克隆, 深复制.
亲测有效: //对象克隆 function clone(obj) { // Handle the 3 simple types, and null or undefined if (null == o ...
- Javascript页面跳转与浏览器兼容
用<meta>标签实现的定时跳转: <meta http-equiv="refresh" content="5 url=http://www.baidu ...
- Centos6架设GIT服务，windows客户端使用TortoiseGit加载KEYGEN连接GIT服务器
前几天得空,想起前一阵学了GIT还没好好实践,就在虚拟机中安装测试了一下,并简单记录了CENTOS6中GIT安装,ssh-keygen生成,客户端使用TortoiseGit加载KEYGEN连接GIT服 ...
- Struts2中的ActionContext
ActionContext(Action上下文) ActionContext介绍 通过上面用户注册例子的学习,我们知道Xwork与Web无关性,我们的Action不用去依赖于任何Web容器,不用和那些 ...
- M - Candy Sharing Game
Description A number of students sit in a circle facing their teacher in the center. Each student in ...
- (转)Ubuntu中让终端对于历史输出的内容保持足够长
原地址:http://www.crifan.com/ubuntu_terminal_make_retain_long_enough_history_output_content/ Ubuntu下用终端 ...
- HibernateTemplate类的方法flush()
hibernate的实体都是存储在缓存中的,所以你会发现有的时候当你创建出两个主键相通的实体的时候会报错.正常情况是当你调用save方法的时候,这个实体对象未必已经保存到数据库了,调用close方法的 ...
- python-整理--连接MSSQL
环境 : python3.4 / win10 / vs2013 / sqlexpress2014 需要的工具和包 1.freetds包 下载地址 https://github.com/ramiro/f ...
- [C++程序设计]用指向数组的指针作函数参数
#include <iostream> using namespace std; int main() { ]); ][]={,,,,,,,,,,,}; output(a); ; } ]) ...