一、综合
1、Extjs中的小技巧
http://ykdn2010.iteye.com/blog/1751874
ExtJs使用总结(非常详细)
http://www.jb51.net/article/29946.htm
2、类似radioGroup的效果
extjs-布局 （在column布局中使用fieldset 和 在fieldset中使用column布局）
http://blog.csdn.net/snn1410/article/details/8817821
3、xtype:label中的文字居中
通过给label加边框（border-right: #000000 1px solid;）发现，文字不居中是因为文字所占空间与label的大小一样，因此各种居中无效。
可将label的大小设置与父容器一样大、然后将文字相对于label居中（页面缩放时会变形），or将label相对于父容器居中（兼容性好、简单）。
设置label大小：直接在js中写width:220或者anchor : '100%'无效，需要width:120px;text-align:center;display:block; 或者 width:100%;text-align:center;display:block;
设置label相对于父容器的位置：position:relative;left:20px
4、textField去除边框
fieldLabel : '1考生号',
//fieldCls:'classTextCheck',//无效
//fieldStyle:'background-color: red; background-image: none;',//无效
//CLS: 'classTextCheck',//无效
fieldClass:'classTextView',5、combo加监听器
a、在selectOnFocus:'true'下加上onSelect:function(){代码}
b、
listener:{
'select':function(){}
}
new Ext.form.ComboBox({
hiddenName : 'xk3',
fieldLabel : '选考3', fieldClass:'classTextView',
store : XKStore,
displayField : 'text',
valueField : 'value',
mode : 'local',
triggerAction : 'all',//all表示把下拉框列表框的列表值全部显示出来;query，如果你做了一次选择，再去用，则它只显示按第一次选择的值匹配出来的。
forceSelection : true,
editable : false,
typeAhead : true,//相当于自动匹配的开关，就像google的查询搜索框，输入前面自动提示;typeAheadDelay：延迟显示
labelStyle: micolor,
listeners:{//select、change、focus
focus:function(combo,record,index){//另外参数不是必须写全,从前向后把需要的写出来也有效,or无参数
//alert(combo.getValue());
combo.blur();
return false;
}
},
anchor : '95%'
})c、scale.on('select',fuction(){})
6、textfield使用ajax方式到后台校验是否重复
a、listeners change方式
textValid: true,
validator: function(){ return this.textValid; },
listeners : {
'change': function(textfield,newValue,oldValue) {
Ext.Ajax.request({
url: 'rg.do?reqCode=checkUSERID',
success: function(response) {
var resultArray = Ext.util.JSON
.decode(response.responseText);
if( resultArray.success==true){
textfield.clearInvalid();
textfield.textValid = true;
}
else{
textfield.markInvalid(resultArray.msg);
textfield.textValid = false;
}
},
failure: function(response) {
Ext.MessageBox.alert('提示', '网络异常，验证失败');
this.textValid = false;
},
params: {
// userid: Ext.getCmp('userid').getValue()
userid: newValue
}
});
}
},
//validator :vadtUserid(),
//validationEvent : 'blur',
//validateOnBlur: true,
//validateOnChange: false,
//validationDelay: 500,
//invalidText: '考生号重复，请查证',
validationEvent : 'blur',
validator : function(thisText) {
if (thisText != '') {
Ext.Ajax.request({
url: 'rg.do?reqCode=checkUSERID',
success: function(response) {
var resultArray = Ext.util.JSON
.decode(response.responseText);
if( resultArray.success==true){
Ext.getCmp('userid').clearInvalid();
//textfield.textValid = true;
return true;
}
else{
Ext.getCmp('userid').markInvalid(resultArray.msg);
//textfield.textValid = false;
return false;
}
},
failure: function(response) {
Ext.MessageBox.alert('提示', '网络异常，验证失败');
//this.textValid = false;
return false;
},
params: {
// userid: Ext.getCmp('userid').getValue()
userid: thisText
}
});
}
// return isPersonNameOK;
}, 问题：
如将ajax验证封装到一个函数内，再使用validator :vadtUserid()调用该函数，则页面初始换时，就会向后台发出check请求
如将ajax验证直接放到textfield里，则弹出新增窗口，，就会向后台发出check请求
如加入 if (thisText != '') 判断，则发出请求的时机正常，但一次会发出2次请求（validationEvent : 'blur', 或validationEvent : 'change',都是如此）
6、日志
console.log(item.fieldLabel)
在firefox可看到
7、提交表单的3种方式
a、普通提交：按照表单中的name提交---没用过
Form. = new Ext.FormPanel({
……..// form的属性
submit:function(){
this.getEl().dom.action =’url’;// 提交的url
this.getEl().dom.method = ‘post’;
this.getEl().dom.submit();
},
});b、表单自带Ajax提交：formName.form.submit（{}）
c、普通ajax提交：Ext.Ajax.request（{}）
默认不提交表单数据，只提交param里的数据
参考：Extjs之表单提交 http://www.cnblogs.com/ymj126/p/4120221.html
Ext.Ajax.request与form.submit的用法区别 http://www.cnblogs.com/zhxhdean/archive/2011/08/29/2158330.html
相同点：都属于Ajax提交方式！
不同点：Ext.Ajax.request是Ext.data.connection的一个实例
form1.getForm().submit是BasicForm的一个实现方式
使用上的区别：
1.form1.getForm().submit常用在表单提交的时候（需要提交的数据多），比如新增和修改数据页面
2.Ext.Ajax.request常用在根据参数提交的时候（提交数据少），比如删除，我们把页面选中的ID进行遍历，封装在一个Array中，作为一个参数做Ajax的提交 d、提交后，获取server返回值的参数
function submitModForm(){
formMod.form.submit({
url : 'rg.do?reqCode=modRegisterByStuID',
waitTitle : '提示',
method : 'POST',
//params :'booktype', <span style="font-family: Arial, Helvetica, sans-serif;">//与Ext.Ajax.request不一样</span>
waitMsg : '正在处理数据,请稍候...',
success : function(form, action) { //与Ext.Ajax.request不一样
if( action.result.success){ //与Ext.Ajax.request不一样
Ext.Msg.alert('提示', action.result.msg);
windowMod.hide();
store.reload();
}
else{
Ext.Msg.alert('提示', action.result.msg);
}
},
failure : function(form, action) {
Ext.Msg.alert('提示', "网络异常，操作失败！");
}
});
} 8、Ext取值Form
a、Ext.getCmp('id');
b、FormPanel.getForm().findField('id/name');
FormPanel.form.findField(); ?
c、Ext.get('id/name');//前提是FormPanel在界面上显示出来了。
d、var ps = formMod.getForm().getValues();
alert(ps["idcard"]);
9、Ext重置Form
有三种方法能实现form表单的重置，假设var fs=new Ext.form.FormPanel({...});
(1)fs.form.reset();//重置form
(2)fs.getForm().getEl().dom.reset();//重置form
(3)Ext.getCmp('fs').form.reset();
(4)fs.getForm().reset();
10、赋值
１、 fs.form.findField(id/name).setValue(value);
２、 Ext.get(id/name).setValue(value);
３、 Ext.getCmp(id).setValue(value);
4、searchForm.getForm().findField('hd').setValue(1);
11、emptyText的值提交表单时也会提交
在高版本的extjs里，可直接在form里设置submitEmpty为false
在extjs 3.1里无此属性，可
var thisForm = formMod.getForm();
var submitValues = thisForm.getValues();
for (var param in submitValues) {
if (thisForm.findField(param) && thisForm.findField(param).emptyText == submitValues[param]) {
//submitValues[param] = '';
thisForm.findField(param).getEl().dom.value = '';
}13、动态设置combox的label颜色
方法1
<pre name="code" class="javascript">Ext.get('id').setStyle("background","#FF0000"); //下拉框的背景颜色Ext.get('id').setStyle("color","#FF0000"); //下拉框的字体颜色方法2
Ext.getCmp('cb'+valueSelect).itemCls = 'classTextRedView';方法3---无效
Ext.getCmp('cb'+valueSelect).itemCls = 'classTextRedView';
Ext.getCmp('cb'+valueSelect).fieldClass = 'classTextRedView'; Ext.getCmp('cb'+valueSelect).addCls('classTextRedView'); Ext.DomQuery.selectNode("fieldLabel[id='cb9']").innerHTML = '问题产生原因及处理方法:'; //提示：<span style="font-family: Arial, Helvetica, sans-serif;">TypeError: Ext.DomQuery.selectNode(...) is undefined</span>14、设置combox的label颜色
new Ext.form.ComboBox({
hiddenName : 'ks_zy9',
id : 'cb9',
//用width:100,labelWidth:80 设置combobox的文本长度 都不行
fieldLabel : '<font style="color:red;">调剂录取</font>', //方法1 fieldClass:'classTextView', //方法2
fieldLabel : '调剂录取', //方法3
itemCls: 'classTextRedView',
store : RECRUITPLANStore,
15、为组件增加xx事件
二、组件
1、单个checkBox
a、
new Ext.form.Checkbox({
name : 'ks_zytj',
inputValue :'是',
//uncheckedValue: "否",//此行没用？不选中则不提交，但可以alert到false
fieldLabel : '同意调剂',
boxLabel : '是',
listeners:{"check":function(checked,check){
if(!check){
//Ext.get("ks_zytj").setValue("否");
}
}}
})传值到server：选中时，inputValue 可传值到后台；没选中时，checkBox字段相当于不存在、什么都没传，需要在后台处理
if(dto.getAsString("ks_zytj").equals("")){
dto.put("ks_zytj", "否");
}
2、隐藏域 reset后 默认为false？
三、排错
1、items中的单个combox前后不能加{}
items:[
{ //不能加{
new Ext.form.ComboBox({
hiddenName : 'xk3',
fieldLabel : '选考3', fieldClass:'classTextView',
store : XKStore,
displayField : 'text',
valueField : 'value',
mode : 'local',
triggerAction : 'all',
forceSelection : true,
editable : false,
typeAhead : true,
allowBlank : false,
labelStyle: micolor,
emptyText : '请选择...',
anchor : '95%'
}) <pre name="code" class="javascript"><pre name="code" class="javascript"> } <span style="font-family: Arial, Helvetica, sans-serif;">//不能加{</span> missing : after property id
new Ext.form.ComboBox({
2、一个JS中有2个form，某些组件的id或name相同。弹出第2个form（源码中位置靠后）时
提示：windowQuery is undefined
扫一扫
983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
