extJS

来源：互联网发布：中国文化报知乎编辑：程序博客网时间：2024/06/05 05:31

一、综合
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、focusfocus: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        }      });     }},

b、

//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,

itemCLS包含label和下拉框

15、为组件增加xx事件

二、组件

1、单个checkBox

a、

new Ext.form.Checkbox({name : 'ks_zytj',inputValue :'是',//uncheckedValue: "否",//此行没用？不选中则不提交，但可以alert到falsefieldLabel : '同意调剂',boxLabel : '是',listeners:{"check":function(checked,check){    if(!check){                 //Ext.get("ks_zytj").setValue("否");                 }             }}})

赋初值：需要在页面初始化时手动设置“check”状态；value :'是' 、inputValue :'是', 都没用

传值到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

0 0