Extjs中使用loader.docx
- 文档编号:6869212
- 上传时间:2023-01-11
- 格式:DOCX
- 页数:21
- 大小:313.24KB
Extjs中使用loader.docx
《Extjs中使用loader.docx》由会员分享,可在线阅读,更多相关《Extjs中使用loader.docx(21页珍藏版)》请在冰豆网上搜索。
Extjs中使用loader
在EXTJS官网看到一片文章,讲的是Extjs.Loader的使用方法,文章非常详细的介绍了Loader的机制及用法,感觉非常不错,但无奈英文实在太烂,就没转过来。
昨天恰好在CSDN看到了这篇文章的译文,而译文的质量非常高,对译者的翻译水平怎一个羡慕了得。
废话不多说,正文开始。
在开始之前,将英文原文链接放上来,英文水平高的可以看看原文哦。
链接地址:
ExtJS4.0是一个使用新的依赖系统的类加载系统。
这两个强大的新功能允许你创建大量允许浏览器按需下载脚本代码的应用。
今天,我们将通过建立一个小的使用新的类加载系统的应用程序来熟悉一下依赖管理系统。
同时,我们将讨论Ext加载系统的各种配置项。
在开始之前,我们先来看看将要实现的结果。
这样做,可使我们确定需要扩展那些类。
应用会包括互相绑定的GridPanel和FormPanel,名称分别为UserGridPanel和UserFormPanel。
UserGridPanel的操作需要创建一个模型和Store。
UserGridPanel和UserFormPanel将被渲染到一个名称为UserEditorWindow的窗口,它扩张自ExtJS的Window类。
所有这些类都会在命名空间MyApp下。
在开始编码前,首先要确定目录结构,以下是使用命名空间组织的文件夹:
从上图可以看到,MyApp目录已经按照命名空间进拆分成几个目录。
在完成开发的时候,我们的应用将会有一个如下图所示的内部依赖运行模型。
(尽管应用的目录构成很象ExtJS4MVC架构,事实上示例并没有使用它)
现在开始编写index.html文件,这里需要包含应用需要的启动文件和应用的根文件(app.js)。
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:
//www.w3.org/TR/html4/strict.dtd">
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http:
//www.w3.org/TR/html4/strict.dtd">
index.html文件中需要使用link标记包含ExtJS4的样式文件。
包含ext-debug.js文件的javascript标记可能要修改多次,ext-all-debug.js文件是开发调试用的,而ext-all.js则是在发布产品时使用的。
这里有几个选择,每个选择都有优缺点。
以下是这些文件的说明:
ext-all-debug-w-comments.js:
带注释的的完整调试版本。
文件比较大,加载时间比较长。
ext-all-debug.js:
不带注释的完整调试版本。
文件也比较大,但很适合调试。
ext-all.js;压缩后的完整版本,文件比较小。
使用该版本调试很困难,因此一般在发布产品时才使用。
ext-debug.js:
该文件只包含ExtJS基础架构和空的结构。
使用该文件,可以实现ExtJS类文件的远程加载,而且提供了很好的调试体验,不过代价是相当的慢。
ext.js:
ext-debug.js的压缩版本。
我们的index.html将使用ext-debug.js文件,这是实现动态加载所需的最低要求。
最后,我们将展示如何使用ext-all版本获取最好的结果。
由于UserGridPanel类要求模型和Store,因而,要先定义编写这些支持类。
现在开始编写模型和Store:
Ext.define('MyApp.models.UserModel', {
extend :
'Ext.data.Model',
fields :
[
'firstName',
'lastName',
'dob',
'userName'
]
});
Ext.define('MyApp.models.UserModel',{
extend:
'Ext.data.Model',
fields:
[
'firstName',
'lastName',
'dob',
'userName'
]
});
以上代码扩展自Ext.data.Model,将创建UserModel类。
因为扩展自Ext.data.Model类,ExtJS会自动加载它,并在它加载后创建UserModel类。
下一步,要创建扩展自Ext.data.Store的UserStore类:
Ext.define('MyApp.stores.UserStore', {
extend :
'Ext.data.Store',
singleton :
true,
requires :
['MyApp.models.UserModel'],
model :
'MyApp.models.UserModel',
constructor :
function() {
this.callParent(arguments);
this.loadData([
{
firstName :
'Louis',
lastName :
'Dobbs',
dob :
'12/21/34',
userName :
'ldobbs'
},
{
firstName :
'Sam',
lastName :
'Hart',
dob :
'03/23/54',
userName :
'shart'
},
{
firstName :
'Nancy',
lastName :
'Garcia',
dob :
'01/18/24',
userName :
'ngarcia'
}
]);
}
});
Ext.define('MyApp.stores.UserStore',{
extend:
'Ext.data.Store',
singleton:
true,
requires:
['MyApp.models.UserModel'],
model:
'MyApp.models.UserModel',
constructor:
function(){
this.callParent(arguments);
this.loadData([
{
firstName:
'Louis',
lastName:
'Dobbs',
dob:
'12/21/34',
userName:
'ldobbs'
},
{
firstName:
'Sam',
lastName:
'Hart',
dob:
'03/23/54',
userName:
'shart'
},
{
firstName:
'Nancy',
lastName:
'Garcia',
dob:
'01/18/24',
userName:
'ngarcia'
}
]);
}
});
当创建单件模式的UserStore时,需要在UserStore原型添加一个requires关键字,它会在类实例化前,为ExtJS提供一个类的请求列表。
在这个示例,列表中只有UserModel一个请求类。
(实际上,在Store的原型中定义了model为UserModel类,ExtJS就会自动加载它。
在requires关键字中列出的目的,是希望你的代码能自文档化(self-documenting),从而提醒你,UserModel类是必须的)
好了,UserGridPanel视图需要的基类已经创建了,现在可以创建UserGridPanel类了:
Ext.define('MyApp.views.UsersGridPanel', {
extend :
'Ext.grid.Panel',
alias :
'widget.UsersGridPanel',
requires :
['MyApp.stores.UserStore'],
initComponent :
function() {
this.store = MyApp.stores.UserStore;
this.columns = this.buildColumns();
this.callParent();
},
buildColumns :
function() {
return [
{
header :
'First Name',
dataIndex :
'firstName',
width :
70
},
{
header :
'Last Name',
dataIndex :
'lastName',
width :
70
},
{
header :
'DOB',
dataIndex :
'dob',
width :
70
},
{
header :
'Login',
dataIndex :
'userName',
width :
70
}
];
}
});
Ext.define('MyApp.views.UsersGridPanel',{
extend:
'Ext.grid.Panel',
alias:
'widget.UsersGridPanel',
requires:
['MyApp.stores.UserStore'],
initComponent:
function(){
this.store=MyApp.stores.UserStore;
this.columns=this.buildColumns();
this.callParent();
},
buildColumns:
function(){
return[
{
header:
'FirstName',
dataIndex:
'firstName',
width:
70
},
{
header:
'LastName',
dataIndex:
'lastName',
width:
70
},
{
header:
'DOB',
dataIndex:
'dob',
width:
70
},
{
header:
'Login',
dataIndex:
'userName',
width:
70
}
];
}
});
在上面代码中,要注意requires关键字,看它是怎么增加UserStore为请求类的。
刚才,我们为GridPanel扩展和Store扩展配置了一个直接的依赖关系。
下一步,我们要创建FormPanel扩展:
Ext.define('MyApp.views.UserFormPanel', {
extend :
'Ext.form.Panel',
alias :
'widget.UserFormPanel',
bodyStyle :
'padding:
10px; background-color:
#DCE5F0;'
+ ' border-left:
none;',
defaultType :
'textfield',
defaults :
{
anchor :
'-10',
labelWidth :
70
},
initComponent :
function() {
this.items = this.buildItems();
this.callParent();
},
buildItems :
function() {
return [
{
fieldLabel :
'First Name',
name :
'firstName'
},
{
fieldLabel :
'Last Name',
name :
'lastName'
},
{
fieldLabel :
'DOB',
name :
'dob'
},
{
fieldLabel :
'User Name',
name :
'userName'
}
];
}
});
Ext.define('MyApp.views.UserFormPanel',{
extend:
'Ext.form.Panel',
alias:
'widget.UserFormPanel',
bodyStyle:
'padding:
10px;background-color:
#DCE5F0;'
+'border-left:
none;',
defaultType:
'textfield',
defaults:
{
anchor:
'-10',
labelWidth:
70
},
initComponent:
function(){
this.items=this.buildItems();
this.callParent();
},
buildItems:
function(){
return[
{
fieldLabel:
'FirstName',
name:
'firstName'
},
{
fieldLabel:
'LastName',
name:
'lastName'
},
{
fieldLabel:
'DOB',
name:
'dob'
},
{
fieldLabel:
'UserName',
name:
'userName'
}
];
}
});
因为UserForm不需要从服务器端请求任何类,因而不需要添加requires定义。
应用快完成了,现在需要创建UserEditorWindow类和运行应用的app.js。
以下是UserEditorWindow类的代码。
因为要将Grid和表单绑定在一起,因而类代码有点长,请见谅:
Ext.define('MyApp.views.UserEditorWindow', {
extend :
'Ext.Window',
requires :
['MyApp.views.UsersGridPanel','MyApp.views.UserFormPanel'],
height :
200,
width :
550,
border :
false,
layout :
{
type :
'hbox',
align :
'stretch'
},
initComponent :
function() {
this.items = this.buildItems();
this.buttons = this.buildButtons();
this.callParent();
this.on('afterrender', this.onAfterRenderLoadForm, this);
},
buildItems :
function() {
return [
{
xtype :
'UsersGridPanel',
width :
280,
itemId :
'userGrid',
listeners :
{
scope :
this,
itemclick :
this.onGridItemClick
}
},
{
xtype :
'UserFormPanel',
itemId :
'userForm',
flex :
1
}
];
},
buildButtons :
function() {
return [
{
text :
'Save',
scope :
this,
handler :
this.onSaveBtn
},
{
text :
'New',
scope :
this,
handler :
this.onNewBtn
}
];
},
onGridItemClick :
function(view, record) {
var formPanel = this.getComponent('userForm');
formPanel.loadRecord(record)
},
onSaveBtn :
function() {
var gridPanel = this.getComponent('userGrid'),
gridStore = gridPanel.getStore(),
formPanel = this.getComponent('userForm'),
basicForm = formPanel.getForm(),
currentRec = basicForm.getRecord(),
formData = basicForm.getValues(),
storeIndex = gridStore.indexOf(currentRec),
key;
//loop through the record and set values
currentRec.beginEdi
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Extjs 使用 loader