本文目录一览：
extjs怎么自定义函数
extjs的自定义事件主要分三步
1.在类中定义事件名称：
Person = function(config) {
Person.superclass.constructor.call(this, config);
this.name = config.name || '';
this.sex = config.sex || '';
this.addEvents({
"nameChange": true,
"sexChange": true
});
};
2.实例化对象，并在该对象中定义事件的监听函数
var person = new Person({
name: 'binoruv',
sex: 'man'
});
person.on("nameChange", function() { alert("Name has been changed to " + this.name); });
person.on("sexChange", function() { alert("Sex has been changed to " + this.sex); });
3.触发事件
Ext.extend(Person, Ext.util.Observable, {
//extend函数中可以自定义新的方法，也可以重写原类的方法
setName: function(_name) {
if (this.name != _name) {
this.name = _name;
this.fireEvent("nameChange", this);
}
},
setSex: function(_sex) {
if (this.sex != _sex) {
this.sex = _sex;
this.fireEvent("sexChange", this);
}
}
});
person.setName("binoruv");
person.setSex("woman");
整个代码如下：
script type="text/javascript"
Person = function(config) {
/*
此处addEvents是调用Person父类Ext.util.Observable的方法
api中对Observable的描述：一个抽象基类（Abstract base class），为事件
机制的管理提供一个公共接口。子类应有一个"events"属性来
定义所有的事件。
*/
Person.superclass.constructor.call(this, config);
this.name = config.name || '';
this.sex = config.sex || '';
this.addEvents({
"nameChange": true,
"sexChange": true
});
};
Ext.extend(Person, Ext.util.Observable, {
setName : function(_name) {
if (this.name != _name) {
this.name = _name;
this.fireEvent("nameChange", this);
}
},
setSex : function(_sex) {
if (this.sex != _sex) {
this.sex = _sex;
this.fireEvent("sexChange", this);
}
}
});
Ext.onReady(function() {
var person = new Person({
name: 'binoruv',
sex: 'Man'
});
person.on("nameChange", function() { /*debugger;*/Ext.Msg.alert("Message","Name has been changed to " + this.name); });
person.on("sexChange", function() { /*debugger;*/Ext.Msg.alert("Message", "Sex has been changed to " + this.sex); });
person.setName("binoruv");
person.setSex("Woman");
});
/script
extjs 控件事件大全
Ext.form.TimeField:
配置项：
maxValue：列表中允许的最大时间
maxText：当时间大于最大值时的错误提示信息
minValue：列表中允许的最小时间
minText：当时间小于最小值时的错误提示信息
increment：两个相邻选项间的时间间隔，默认为15分钟
format：显示格式，默认为“g:i A”。一般使用“H:i:s”
H：带前缀0的24小时
i：带前缀0的分钟
s：带前缀0的秒
invalidText：当时间值非法时显示的提示信息
altFormats：多个时间输入格式组成的字符串，不同的格式之间使用“|”进行分割
Ext.form.FieldSet
animCollapse：动画折叠，默认为false
checkboxToggle：设置是否显示字段集的checkbox选择框，默认为false
checkboxName：指定字段集中用于展开或隐藏字段集面板的checkbox的名字，该属性只有在checkboxToggle为true时生效
labelWidth：字段标签的宽度，可以级联到子容器
layout：布局，默认为form
Ext.form.DateFied
maxValue：允许选择的最大日期
maxText：当日期大于最大值时的错误提示信息
minValue：允许选择的最小时间
minText：当日期小于最小值时的错误提示信息
format：日期显示格式，默认为“m/d/y”，一般使用“Y-m-d”
Y：四位年份
m：带前缀0的月份
d：带前缀0的日期
y：两位年份
n：不带前缀0的月份
j：不带前缀0的日期
w：星期的数字，0表示星期日，1代表星期一
showToday：是否显示今天按钮，默认为true
altFormats：多个日期输入格式组成的字符串，不同的格式之间使用“|”进行分割，默认值为'm/d/Y|n/j/Y|n/j/y|m/j /y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d'
disabledDates：禁止选择的日期组成的数组
disabledDatesText：选择禁选日期时显示的提示信息
disabledDays：禁止选择的星期组成的数组，0代表星期日，1代表星期一
disabledDaysText：选择禁选星期时显示的提示信息
invalidText：当日期值非法时显示的提示信息
方法：
getValue()：取得日期值
Ext.form.ComboBox
displayField：被显示在下拉框中的字段名
editable：是否可编辑，默认为true
forceSelection：输入值是否严格为待选列表中存在的值。如果输入不存在的值，会自动选择第一个最接近的值。
hiddenName：隐藏字段的名字，如果提供该参数则一个隐藏字段将被创建，用来存储所选值，当表单提交时在服务器端可以通过该名字取得列表中的所选值
listWidth：下拉列表的宽度
minListWidth：下拉列表的最小宽度，默认为70像素
loadingText：当下拉框加载数据时显示的提示信息，只有当mode='remote'时才会生效
maxHeight：下拉列表框的最大高度，默认为300像素
minChars：下拉列表框自动选择前用户需要输入的最小字符数量。mode='remote'默认为4，mode='local'默认为0
mode：下拉列表框的数据读取模式。remote读取远程数据，local读取本地数据
pageSize：下拉列表框的分页大小。该项设置只在mode='remote'时生效
queryParam：查询的名字，默认为'query'，将被传递到查询字符串中
allQuery：一个发往服务器用来查询全部信息的查询字符串，默认为空字符串''
selectOnFocus：当获得焦点时立刻选择一个已存在的列表项。默认为false，此项只有在editable=true时才会生效
store：列表框绑定的数据源
transform：将页面中已存在的元素转换为组合框
lazyInit：延时初始化下拉列表，默认为true
lazyRender：延时渲染，默认为false
triggerAction：设置单击触发按钮时执行的默认操作，有效值包括all和query，默认为query，如果设置为all则会执行allQuery中设置的查询
typeAhead：设置在输入过程中是否自动选择匹配的剩余部分文本（选择第一个满足条件的），默认为false
value：初始化组合框中的值
valueField：组合框的值字段
valueNotFoundText：值不存在时的提示信息
tpl：Ext模板字符串或模板对象，可以通过该配置项自定义下拉列表的显示方式
方法：
clearValue()：清空字段当前值
doQuery( String query, Boolean forceAll )：
getValue()：
getStore()：
setValue( String value )：
Ext.from.RadioGroup
allowBlank：
blankText：
Ext.form.Radio;
getGroupValue()：
setValue( value {String/Boolean} )：
Ext.form.CheckboxGroup
allowBlank：是否允许不选择，默认为true
blankText：
columns：显示的列数，可选值包括：固定值auto、数值、数组（整数、小数）
items：对象数组
vertical：是否垂直方向显示对象，默认为false
Ext.form.Checkbox
boxLabel：复选框的文字描述
checked：复选框是否被选择，默认为false
handler：当checked值改变时触发的函数，函数包含两个参数：checkbox、checked
inputValue：
方法：
getValue()：返回复选框的checked状态
setValue( Boolean/String checked )：
Ext.form.NumberField
allowDecimals：是否允许输入小数，默认为true
allowNegative：是否允许输入负数，默认为true
baseChars：输入的有效数字集合，默认为'0123456789'
decimalPrecision：数字的精度，默认保留小数点后2位
decimalSeparator：十进制分隔符，默认为'.'
maxValue：允许输入的最大数值
maxText：超过最大值之后的提示信息
minValue：允许输入的最小数值
minText：超过最小值之后的提示信息
nanText：输入非有效数值之后的提示信息
Ext.form.TextArea
preventScrollbars：是否禁止出现滚动条，默认为false
Extjs 4如何自定义Panel
要达到你的效果，可以用2种方法
1是每次使用都new一个panel组件，使用相同配置
2是只创建一个panel组件，每次使用时更新它的内容
这里你自己取舍吧
方法1
function createNP(target){
var config = {
width: 200,
height: 200,
bodyStyle: {
background: '#F00'
},
renderTo: target
};
return Ext.create('Ext.panel.Panel', config);
}
方法2
var p = Ext.create('Ext.panel.Panel', {
width: 200,
height: 200,
bodyStyle: {
background: '#F00'
},
renderTo: Ext.getBody()
});
p.update('字符串或html');
p.removeAll();
p.add({
//新组件
})
Extjs 如何自定义控件
一般可以在extjs的组件基础上扩展新的组件 ~比如Component~继承它并在里边动态生成Html就可以当组件用了。方法可以直接写在类里。~话说文档上的扩展组件没怎么看懂。。。尤其是绑事件。。。