开发ExtJS应用组件之间引用是个一个比较麻烦的事情。比如在一个FormPanel的底部工具条的某个按钮的事件处理函数中引用form的某个field基本上有两方法:
- 为每个field赋予一个ID,然后用Ext.getCmp(ID)
- 从用findParentByType找到FormPanel然后再用get()根据field出现的顺序去找form field
方法1虽然很简单,很容易实现,但这样的form不能复用。方法2比较麻烦,而且如果form的layout改变了或者有新的字段,那么引用代码需要重写。
针对这种情况,ExtJS推出了ref配置属性,凡是component都可以使用该属性在它的归属容器及归属容器的父节点中注入一个对该属性的引用名称。有了该引用名,和该组件有共同父节点的组件就可以比较方便的引用该组件。
以下示例摘自ExtJS官方文档:
var myGrid = new Ext.grid.EditorGridPanel({
title: 'My EditorGridPanel',
store: myStore,
colModel: myColModel,
tbar: [{
text: 'Save',
handler: saveChanges,
disabled: true,
ref: '../saveButton'
}],
listeners: {
afteredit: function() {
// The button reference is in the GridPanel
myGrid.saveButton.enable();
}
}
});
这个例子中定义了一个可编辑的网格面板,该面板的afteredit事件处理程序需要引用顶部工具栏上的“Save"按钮。如果不用ref配置属性来解决引用问题的话,根据上文提到的两个方法,要么给Save按钮一个唯一标识,然后再afteredit事件处理函数中用Ext.getCmp()获得对该按钮的引用,要么用以下代码:
var myGrid = new Ext.grid.EditorGridPanel({
title: 'My EditorGridPanel',
store: myStore,
colModel: myColModel,
tbar: [{
text: 'Save',
handler: saveChanges,
disabled: true,
ref: '../saveButton'
}],
listeners: {
afteredit: function() {
// The button reference is in the GridPanel
myGrid.getTopToolbar().get(0).enable();
}
}
});
这个方法不太理想,当layout发生变化时需要修改get()的索引。比如在Save按钮前加入一个分隔符,那么get(0)需要改成get(1):
var myGrid = new Ext.grid.EditorGridPanel({
title: 'My EditorGridPanel',
store: myStore,
colModel: myColModel,
tbar: [ '-', {
text: 'Save',
handler: saveChanges,
disabled: true,
ref: '../saveButton'
}],
listeners: {
afteredit: function() {
// The button reference is in the GridPanel
myGrid.getTopToolbar().get(1).enable();
}
}
});
Ext3.x的ref是个不错的东东,可以省了不少getCmp(),但它的文档太少,有个问题需注意:
ref:’../'表示定义为当前父组件的父组件的子件,例如:
var grid = new Ext.grid.GridPanel{
....
tbar: [{
xtype: 'xxxx',
ref: '../xxxx’
}]
}
则可用grid.xxxx来取xxxx组件并操作,而不是取grid.tbar.xxxx;
如果把ref定义改为 ref: ‘xxxx’,则要用grid.tbar.xxxx来操作;
ref相当于定义了一个路径.
另外items相当于一个数组,不是组件,例如:
var form=new Ext.form.FormPanel{
....
items: [{
xtype: 'xxxx',
ref: 'xxxx’
}]
}
这里则可用form.xxxx取xxxx组件…
分享到:
相关推荐
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
extjs属性方法集中方便你查看学习,赶快来下载吧!学习extjs
ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解)
Extjs 常用属性
多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用。
extjs 做的桌面应用程序界面,只是前台的界面, 没有后台代码
有Extjs属性详细解释,比如时间空间,下拉框等等
这里包含 EXTJS所有属性的讲解,个人觉得要学习 EXTJS的话,必须要下载一份,对于学习和巩固 EXTJS有很大的作用。
Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南 Extjs+WEB+应用程序开发指南
基于SpringBoot+ExtJS的企业应用系统通用平台的设计与实现.docx基于SpringBoot+ExtJS的企业应用系统通用平台的设计与实现.docx基于SpringBoot+ExtJS的企业应用系统通用平台的设计与实现.docx基于SpringBoot+ExtJS的...
Extjs4之MVC应用架构,完整的实用例子
网上搜集到的一些Extjs属性设置相关和部分实例
Extjs控件属性,将所有的控件属性作用都包括了,是一部很好的学习手册,尤其适合初学者和开发人员~
extjs控件属性
一个ExtJs4.1.1版本MVC应用框架,不包含服务器端程序。
ExtJs各组件简单应用例子导入到eclipse即可
extjs做的一个桌面应用系统 extjs2.0, dwr等技术完成
Extjs应用案例: 本酒店管理系统采用三层架构,SQL Server数据库。最主要的是采用了Extjs框架。 酒店系统实现了部分功能。aspx后台页面几乎无代码。业务逻辑处理全部采用Extjs自带的函数。对于学习Extjs的框架的...
经过不断发展与改进,ExtJS现在已经成功发布了4.0版本,并且成为构建RIA Web应用的一套最完整、最成熟的JavaScript基础库。利用ExtJS构建的RIA Web应用具有与桌面程序一样的标准用户界面和操作方式,并且能够跨不同...