-
环境搭建
Ext下载, (需要注册)使用版本为4.2.0,可使用现有项目已下载文件。
Sencha Cmd下载,根据系统下载,可能依赖ruby(版本193),ruby下载,用于编译的sass文件。
-
构建项目
使用sencha cmd 生成Ext应用 ,运行构建应用
sencha -sdk /path/to/sdk generate app MyApp /path/to/myapp //初始化应用
1. sencha app watch // 运行默认1841端口
2. sencha web -port XXXX start // xxxx 为端口名,在xxxx端口运行
3. sencha app build 构建项目
修改主题:
.sencha/app/sencha.cfg
在文件内查找app.theme ,找到app.theme = ext-theme-classic // 修改成目标主题,现用主题ext-theme-neptune
3、MVC模式代码结构:
- Model模型 是字段和它们的数据的集合,例如
User
模型带有username
和password
字段,模型知道如何持久化自己的数据,并且可以和其他模型关联,通常都用在Store
中去展示grid和其他组件的数据(Store
类似于一个本地仓库(即数据存储器)- View视图 是组件的一种,专注于界面展示 – grid, tree, panel 都是view
- Controllers控制器 一个安放所有使你的app正确工作的代码的位置,具体一点应该是所有动作,例如如何渲染view,如何初始化model,和app的其他逻辑
每个Extjs 4 都是从Application类实例开始,这个实例包含应用的全局配置(例如应用的名字),这个实例也负责维护对全部模型、视图、控制器的引用的维护,还有一个
launch
函数,会在所有加载项加载完成之后调用。所以每次新增的view 需要在Application里引用,ext的文件查找是通过文件路径的方式搜索。//定义一个modelExt.define('App.model.Users',{extend: 'Ext.data.Model',fields:[{"name":"itemTypeName" },{"name":"itemTypeCode"},{"name":"parentItemTypeCode"}]})//定义StoreExt.define('App.store.Users', {extend: 'Ext.data.Store',//model: 'App.model.Users', // 关联相应的modelfields: ['name', 'email'],data: [{name: 'Ed', email: '[email protected]'},{name: 'Tommy', email: '[email protected]'}]});//定义一个视图Ext.define('App.view.user.List' ,{extend: 'Ext.grid.Panel',alias : 'widget.userlist',title : 'All Users',initComponent: function() {this.store = {fields: ['name', 'email'],data : [{name: 'Ed', email: '[email protected]'},{name: 'Tommy', email: '[email protected]'}]};this.columns = [{header: 'Name', dataIndex: 'name', flex: 1},{header: 'Email', dataIndex: 'email', flex: 1}];this.callParent(arguments); //回调父类函数}});//定义一个ControllerExt.define('App.controller.Users', {extend: 'Ext.app.Controller',init: function() {console.log('hello world!');}});//app.js 中 Application对MVC的引用Ext.application({stores:['Users']controllers:'Users'],views:['users.List']});
-
Ext4.2 主要包含以下几类组件:
容器组件, 表单组件, 菜单和工具栏组件,图表组件,其他。
常用的组件:
- form, panel,tab,viewport ,window
- checkbox, combobox, datefile, label ...
- checkItem, datePicker,colorPicker
- Line, Bar ....
- button,progressBar .....
组件的层次结构
组件的创建方式:
-
Ext.create() 创建组件的实例
var window = Ext.create('Ext.window.Window', {
width: 600,
height: 800,
...
});
-
通过xtype 来配置
Ext.create('Ext.tab.Panel', {
renderTo: Ext.getBody(),
height: 100,
width: 200,
items: [
{ xtype: 'panel',title: 'TabA',html: 'The tab A'},
{ xtype: 'panel',title: 'TabB',html: 'The tab B'},
]
})
-
Ext.defined
Ext.define("App.view.users.list", {
extend: "Ext.grid.Panel",
alias: 'widget.users-list',
width: 980,
height: 550,
collapsible: false,
columnLines: true,
viewConfig: {
stripeRows: true,
forceFit: true
},
scrollable:true,
frame: false,
autoScroll: true, // 自动显示滚动条
initComponent: function() {
...
this.callParent(arguments);
}
});
组件的查询
-
Ext.getCmp(id)
: 返回id 对应的组件, id 唯一性 -
Ext.ComponentQuery.query(selector,[root])
: 返回匹配的组件数组// 1.xtype查找:获取所有文本输入框(xtype:textfield)
var textfieldArray = Ext.ComponentQuery.query('textfield');
// 2.id查找
var formArray = Ext.ComponentQuery.query('#query_form');
// 3.xype+属性查找:指定from组件,并且title属性的值为'表单'
var formArray = Ext.ComponentQuery.query('form[title=表单]');
// 4.属性查找:title属性的值为'表单'的组件
var formArray = Ext.ComponentQuery.query('[title=表单]');
-
container.child([selector])
: 返回匹配的第一个子组件(只查找第一层) -
container.down([selector])
: 返回第一个符合匹配的子组件 -
container.query([selector])
:返回一个组件数组,包含当前容器内符合匹配规则的子组件 -
containers.queryBy(fn,[scope])
:返回一个组件数组,包含当前容器内符函数条件的子组件 -
containers.queryById(id)
: 返回一个容器内符合此id的子组件 -
通用方式:
① up() : 向上查找祖先容器。
② previousSibling() :向上查找兄弟组件(同一层级)。
③ nextSibling() :向下查找兄弟组件(同一层级)。
....
生命周期
Extjs控件的生命周期大体分为三个阶段:初始化、渲染、销毁
-
服务端通信
-
Store
中的服务器请求:var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax', // type: 'rest',
url: 'XXXXX',
actionMethods: 'POST',
limitParam: 'pageSize',
pageParam: 'pageNo',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true,
listeners: {
beforeload: function(thisStore, record, opts) {
...
}
}
});
-
Ext.ajax.request()
:Ext.Ajax.request({
method: 'POST',
url: config.cgdd_host + 'invoiceOrder/editInvoice',
jsonData: order,
success: function(response) {
...
},
failure: function() {
...
}
});
-
跨域Jsonp实践
Ext.data.JsonP.request({
url: 'xxx',
params:{},
timeout: 30000,
callbackKey: "callback", // 与服务器端一致
success: function(result) {
....
},
failure: function(result) {
...
},
callback: function(){
// complete emit
}
});
-