`
JavaTestJava
  • 浏览: 55250 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Ext.TreeComboField=Ext.extend(Ext.form.TriggerFiel

阅读更多
我在一个论坛看到EXT传递参数的问题,觉得很多学EXT的人都会碰到:
++++++++++++++++++++++++++++++++++++++++
通过示例代码中的msg-box.js
我们可以看到
Ext.get('mb1').on('click', function(e){
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
});
这样的代码,还有它的回调函数showResult:
function showResult(btn){
Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
};

function showResultText(btn, text){
Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
};
(这里我把两个回调函数都放上来,用来说明我的问题)
我想请教的是:其中的匿名函数function(e)、showResult(btn)及showResultText(btn, text)中的参数如何来定义,我如何才能知道这些函数的具体意义,因为这里好像没有文档可查。也许在这里提出这个问题让您不好回答,请继续往下看。我出 现这个问题是在这里遇到的:
在Layout Dialog示例中的layout.js中:
有dialog.addButton('Submit', dialog.hide, dialog);这样一行代码,也就是说增加一个submit按钮,点击后dialog隐藏。
但如果我想让这个按钮加入回调函数或获取某些特定内容的值,这样问题就出现了,我是这样实现的:
dialog.addButton('Submit', function(a,b){
alert(a);
alert(b);
}, dialog);
但我不知道function(a,b)中a和b代表什么(alert出来都是object,当我加到三个参数时就是未定义了,也就是说这个方法支持两个参数),因为好像这里没有文档。

当然,如果有其它方法来实现类似功能您也可以提出,但最好是解答一下我的问题,我不知道如何入手这个function

++++++++++++++++++++++++++++++++++++++++++



以上是我在论坛中看到的一个帖子,并且有人这样回复:

fangzhouxing 写道
这个确实是一个Ext文档不全的问题. 只能查看源代码来解决了.



这个文档中其实是有说明的,而且不含糊,你仔细看的话就能理解。
看这个前先得理解各个支持事件响应的类的on或addListener方法,它的后面两个参数表示的是什么意思?scope和options,如果你知道了,那么在事件触发的时候想调用自定义的或EXT中已有的函数就不费解了。这里scope(作用域)默认指的是事件触发时所作用的对象,而当事件触发后会传递给响应函数什么参数呢?像普通的HtmlElement对象(比如一个表单按钮)都会传一个EventObject实例对象,像EXT中自定义的函数触发的话,API中有说明:
比如Ext.MessageBox的confirm方法,是这么解释的:
confirm( String title, String msg, [Function fn], [Object scope] ) : Ext.MessageBox

Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm). If a callback function is passed it will be called after the user clicks either button, and the id of the button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).

看最后一句:and the id of the button that was clicked will be passed as the only parameter to the callback,只传递你所点击的按钮(“确认”或“取消”)的按钮本身或它的id,也就是说只有一个参数,这样的话,你的响应函数就可以定义成function(aaa){...}那么这个aaa就是这个你点击的按钮的id了。

同样,再看一下Ext.MessageBox的prompt方法,是这么解释的:
prompt( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] ) : Ext.MessageBox

Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt). The prompt can be a single-line or multi-line textbox. If a callback function is passed it will be called after the user clicks either button, and the id of the button that was clicked (could also be the top-right close button) and the text that was entered will be passed as the two parameters to the callback.

也就是会传递2个参数,
1、事件触发时所点击的按钮本身或按钮的id
2、在输入框中输入的文本值。
这样在你自定义或已有的响应函数你就可以这样定义了,function(first,second){...}其中第一个参数是1、中说的,第二个参数是2中说的。


另外,像EXT的API中很多组件都有Public Events这部分内容,就是会响应的事件列表,这个写法是什么意思呢?
比如,Ext.Window下的move事件,API中是这样写的:
move : ( Ext.Component this, Number x, Number y )

Fires after the component is moved.
Listeners will be called with the following arguments:

this : Ext.Component
x : Number
The new x position
y : Number
The new y position

指的是当move(窗口移动)事件发生时,会有3个参数产生,这3个参数是能够传递给你的响应函数的。那么这个时候你的响应函数就可以这样定义:
function(component,positionX,positionY){....}
(里面的参数名随便写),或者可以根据你的需要可以少定义几个参数,但是这里的话最多就是3个参数,而且是按move事件传递给你的参数顺序来的(比如第一个参数一定是Ext.Component类型的,第二个参数一定是Number类型的,并且是个x坐标值,第三个参数一定是个Number类型的,一定是个y坐标值),如果你非要这样定义:function(component,positionX,positionY,otherparam){....}
那么你的函数体里其实是获得不了otherparam的。

EXT组件中的Public Events部分都是这样的。如果理解了事件机制,那么如何定义和使用响应函数就很顺利了。

请看下面的示例代码并结合之上提的有关Ext.Window的move事件的API:
Ext.onReady(function(){    
    var win = new Ext.Window({    
        title:'响应窗口移动事件的例子',    
        width:400,    
        height:300,    
        html:'<br/><br/><p><center>这是响应窗口移动事件的例子,请注意响应函数中的参数</center></p>'   
    });    
    win.on("move",moving);    
    win.show();    
});    
moving = function(c,x,y){    
    alert("移动窗口的id:" + c.id);    
    alert("窗口移动后的x坐标值:" + x);    
    alert("窗口移动后的y坐标值" + y);    
};    
   
//也可以这样定义:去掉注释,并把上面定义的给注释掉即可    
/*   
moving = function(c,x){   
    alert("移动窗口的id:" + c.id);   
    alert("窗口移动后的x坐标值:" + x);   
}   
*/   
//也可以这样定义:去掉注释,并把上面定义的给注释掉即可    
/*    
moving = function(c){    
    alert("移动窗口的id:" + c.id);    
}   
分享到:
评论

相关推荐

    Ext.Store的获取方法

    Leangle.form.combo.ColorComboBox = Ext.extend(Leangle.form.BaseComboBox, { // ComboBox configurations store: new Ext.data.JsonStore({ // store configurations }) }); ``` 在这种情况下,尝试使用`Ext...

    ext多选下拉列表的全选功能实现

    "ext多选下拉列表的全选功能实现"这个主题聚焦于一个特定的UI组件——ExtJS库中的MultiComboBox,这是一种允许用户多选的下拉列表控件。在实际应用中,全选功能常常被用来快速选择所有选项,极大地提高了用户的操作...

    ExtJs 带清空功能的日期组件

    extend: 'Ext.form.field.Date', alias: 'widget.clearabledatefield', // 添加其他配置项... }); ``` 2. **添加清空按钮**: 在组件的配置中,我们需要添加一个额外的工具按钮,用于清空日期。这可以通过`...

    ext使用--Panel和iframe联合使用时页面高度的解决方法

    Ext.extend(Ext.layout.container.MyIFrameLayout, Ext.layout.container.Fit, { onLayout: function(ct, target) { var iframe = ct.items.first(); if (iframe && iframe.rendered) { var iframeBody = ...

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解及工程源码

    Ext.extend(Ext.form.CKEditor, Ext.form.TextArea, { onRender : function(ct, position){ if(!this.el){ this.defaultAutoCreate = { tag: "textarea", autocomplete: "off" }; } Ext.form.TextArea....

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...

    extjs4.2 日期控件扩展带时分秒

    extend: 'Ext.form.field.Date', alias: 'widget.zc_form_DatetimeField', format: "Y-m-d H:i:s", altFormats: "Y-m-d H:i:s", createPicker: function () { var me = this; return Ext.create('Ext.zc.form...

    ext常用注释

    this.search_textfield = new Ext.form.TextField({ width: '98%', enableKeyEvents: true }); this.search_btn = new Ext.Button({ text: '', width: 70 }); this.search_high = new Ext.Button({ text: '高级',...

    Ext与后台服务器的交互操作

    var id = this.fp.form.findField("ID").getValue(); this.fp.form.submit({ waitMsg: '正在保存...', url: this.baseUrl + "?cmd=" + (id ? "Update" : "Save"), method: 'POST', success: function(form, ...

    Ext 动态加载表单数据

    3. **Ext.form.Panel**:这是Ext JS中的表单容器,它包含了一系列的表单字段。我们可以设置表单的`fields`属性来动态添加或更新字段,这通常基于接收到的JSON数据。 4. **Ext.form.FieldSet**:如果表单数据复杂,...

    精通JS脚本之ExtJS框架.part1.rar

    7.2.2 多行文本输入控件Ext.form.TextArea 7.2.3 单选框 7.2.4 复选框 7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 ...

    extjs的spinner

    Ext.extend(Ext.ux.form.Spinner.TimeStrategy, Ext.ux.form.Spinner.DateStrategy, { format: "H:i", incrementValue: 1, incrementConstant: Date.MINUTE, alternateIncrementValue: 1, ...

    Ext+JS高级程序设计.rar

    9.1 利用Ext.extend实现继承 254 9.2 与Ext扩展相关的预备知识 256 9.2.1 定义命名空间 256 9.2.2 重写构造函数 257 9.2.3 继承组件的一些准备 257 9.2.4 常用的辅助函数 258 9.2.5 使用xtype 258 9.3 实现一个功能...

    extJs3升级extjs4方案

    Ext.ux.PostStore = Ext.extend(Ext.data.Store, { constructor: function(params) { // ... } }); Ext.reg('PostStore', Ext.ux.PostStore); ``` 而在 ExtJS4 中,我们需要使用以下代码来定义一个类: ```...

    Ext3.0 api帮助文档

    - **Ext.form.FormPanel**: 创建表单的容器,支持多种表单元素和验证。 - **Ext.form.Field**: 表单字段类,如文本框、选择框、日期选择器等。 - **Ext.form.BasicForm**: 提供表单的提交和数据验证功能。 7. **...

    ExtJS的extend(Ext Designer的使用)

    extend: 'Ext.form.field.Base', // 在这里添加自定义代码 }); ``` 在这个例子中,`MyApp.MyField`是`Ext.form.field.Base`的子类,因此它自动获得了`Base`类的所有功能。 在Ext Designer中,用户可以通过拖拽...

    精通JS脚本之ExtJS框架.part2.rar

    7.2.2 多行文本输入控件Ext.form.TextArea 7.2.3 单选框 7.2.4 复选框 7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 ...

    EXT扩展Htmleditor,在工具栏中添加插入图片按钮,可选择图片插入到编辑器中(也可添加其他功能按钮)

    var editor = new Ext.form.HtmlEditor({ width: 500, height: 300, plugins: [new MyPlugins.ImageInsert()] }); ``` 以上只是一个简单的示例,实际开发中可能需要处理更多细节,如图片大小限制、上传到服务器...

Global site tag (gtag.js) - Google Analytics