在Extjs中,获取自定义字段容器中的textfield值
In Extjs get textfield value which is inside the custom fieldcontainer
我使用的是extjs 4.1,并创建了一个自定义的字段容器,其类型为:ptextfield,它是通过扩展一个包含img和textfield项的"fieldcontainer"创建的,我想要的是访问ptextfield中的textfield值,它是fieldcontainer。
Ext.onReady(function () {
Ext.define('PTextField', {
extend: 'Ext.form.FieldContainer',
alias: 'widget.ptextfield',
requires: ['Ext.form.TextField', 'Ext.Component'],
alias: 'widget.ptextfield',
height: 20,
width: 170,
fieldLabel: 'A',
labelAlign: 'top',
layout: {
type: 'hbox'
},
BLANK_IMAGE_URL: '',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'component',
height: 20,
width: 20,
autoEl: {
tag: 'img',
src: Ext.BLANK_IMAGE_URL
}
}, {
xtype: 'textfield',
itemId: 'textid',
width: 100
}]
});
this.callParent(arguments);
}
});
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 400,
width: 400,
//layout: 'fit',
items: [{
xtype: 'ptextfield',
fieldLabel: 'First Name',
id: 'pcontainer1',
listeners: {
change: {
element: 'el', //bind to the underlying el property
fn: function () {
var me = this;
Ext.Ajax.request({
waitMsg: 'Saving changes...',
url: '/Home/SaveChanges',
jsonData: {
id: this.id,
value: this.down('#textid').getRawValue()
},
failure: function (response, options) {
Ext.MessageBox.alert('Warning', 'Oops...');
},
success: function (response, options) {
var text = response.responseText;
// process server response here
console.log('Changes saved successfully.');
}
});
}
}
}
}, {
xtype: 'ptextfield',
fieldLabel: 'Last Name',
id: 'pcontainer2'
}]
}).show();
});
在下面的行中,我得到了"this"中的"ptextfield"字段容器,"this.id"给了我"pcontainer1"但我不知道如何获取"ptextfield"字段容器中的textfield的"值"。
我在下一行出错:jsonData:{id:this.id,value:this.down('#textid').getRawValue()}
错误为this.down('#textid')为null(firebug)(铬)Uncaught TypeError:无法调用null的方法"getRawValue"外部.create.items.listeners.change.fn(匿名函数)外部应用程序创建李斯特包装
其中"this.down(#textid').getRawValue()"
应该给我textfield value
,我没有得到它,我不能遍历它。
感谢您的帮助。
为什么要监听容器html元素的更改事件?而不是说文本字段?
这种方式对你来说可能更简单:
把这个放在ptextfield:上
listeners: {
render: function(component) {
component.down('textfield').on('change', function() {
console.log(this, arguments);
// "this" is the textfield
// do your ajax here
});
}
}
相关文章:
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- jQuery自定义验证比较多个输入的序列
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- 在wordpress一定时间后更改自定义字段
- 表达式引擎扩展开发-向呈现的条目添加自定义javascript
- 自定义函数中的光标位置
- 用于检查数组中是否存在元素的javascript自定义方法
- 绑定时将Parsley minlength消息作为选项传递时,未对其进行自定义
- Meteor-添加用户自定义字段的方法不起作用
- 自定义表单验证和提交
- jQuery工具验证器自定义效果-添加&消除影响
- 可以't计算自定义谷歌地图的js
- 谷歌水印未显示在自定义搜索框中
- vaadin:使用自定义布局集成angular js
- DataTables-创建自定义分页样式(加载更多样式)
- 实现一个建立在google.com之上的自定义搜索引擎
- 添加自定义标记以自动完成
- 在Extjs中,获取自定义字段容器中的textfield值
- ExtJs,自定义TextField's的getValue()函数在提交表单时不被调用