ext表单控件

来源：互联网发布：淘宝拍摄视频教程编辑：程序博客网时间：2024/04/30 02:55

js文件

Ext.onReady(function() {// 对于提交中出现的乱码，在Ext中可以修改Request Header中Content-Type的设置Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";Ext.QuickTips.init();Ext.apply(Ext.QuickTips.getQuickTip(), {dismissDelay : 0});Ext.form.Field.prototype.msgTarget = 'side';var data = [['湖北', 'hubei'], ['江西', 'jiangxi'], ['江苏', 'jiangsu'],['安徽', 'anhui'], ['北京', 'beijing'], ['上海', 'shanghai'],['天津', 'tianjin']];var store = new Ext.data.SimpleStore({fields : ['chinese', 'english'],data : data});var combo1 = new Ext.form.ComboBox({id : 'province',name : 'province',hiddenName : 'provinceHidden',displayField : 'chinese',valueField : 'english',mode : 'local',minChars : '1',queryDelay : 300,// 延时300毫秒store : store,triggerAction : "all",pageSize : 3,width : 200,labelSeparator : ':',emptyText : '请选择',fieldLabel : '省',readOnly : false,listeners : {select : function(comb, record, index) {alert(comb.getValue());}}});// 创建Form面板var form = new Ext.form.FormPanel({id : 'form',name : 'form',// applyTo : 'div1',frame : true,bodyStyle : 'padding:1px 0 0 0;',buttonAlign : 'center',labelAlign : 'left',labelWidth : 60,width : 600,defaultType : 'textfield',items : [{id : 'username',name : 'username',allowBlank : false,msgTarget : 'qtip',fieldLabel : '姓名',itemCls : 'sex-male', // 向左边浮动,处理控件横排clearCls : 'allow-float'// 允许两边浮动}, {id : 'password',name : 'password',fieldLabel : '密码',inputType : 'password'}, {xtype : 'radio',fieldLabel : '性别',boxLabel : '男',name : 'sex',id : 'male',itemCls : 'sex-male', // 向左边浮动,处理控件横排clearCls : 'allow-float', // 允许两边浮动,在实际生成的HTML结构中有专门的DIV阻断浮动checked : true}, {xtype : 'radio',boxLabel : '女',name : 'sex',id : 'female',width : 60,itemCls : 'sex-female', // 向左浮动,处理控件横排clearCls : 'allow-float', // 允许两边浮动hideLabel : true// 不显示前面"性别"的标签}, {xtype : 'checkbox',boxLabel : '是否毕业',name : 'graduate',id : 'graduate',itemCls : 'sex-female', // 向左浮动,处理控件横排clearCls : 'allow-float', // 允许两边浮动hideLabel : true// 不显示前面"性别"的标签}, {xtype : 'numberfield',fieldLabel : '年龄',id : 'i_age',name : 'n_age',allowNegative : false,allowDecimals : false,itemCls : 'age-field', // 向左浮动,处理控件横排clearCls : 'allow-float', // 允许两边浮动width : 90}, {xtype : 'textfield',fieldLabel : '住址',name : 'n_address',allowBlank : false,emptyText : '请输入',id : 'i_address',maxLength : 20,itemCls : 'stop-float', // 不允许浮动,结束控件横排width : 300}, {xtype : 'datefield',fieldLabel : '出生日期',name : 'n_birthday',id : 'i_birthday',disabledDays : [0],// 禁止选择星期日itemCls : 'sex-male', // 不允许浮动,结束控件横排clearCls : 'allow-float', // 允许两边浮动width : 120}, {xtype : 'timefield',fieldLabel : ' ',name : 'n_time',id : 'i_time',itemCls : 'sex-male', // 不允许浮动,结束控件横排clearCls : 'allow-float', // 允许两边浮动width : 120,hideLabel : true}, {xtype : "trigger",fieldLabel : "触发",anchor : "50%",onTriggerClick : function(e) {// 在这里写你要实现的事件，很容易扩展alert("www.langsin.com");}}, {xtype : 'textarea',fieldLabel : '备注',name : 'n_area',id : 'i_area',// itemCls:'sex-male', //不允许浮动,结束控件横排// clearCls:'allow-float', //允许两边浮动width : 300}, {xtype : 'checkboxgroup',fieldLabel : '外协录入',columns : 4,items : [{boxLabel : '外协申请批件',name : 'lrb1',inputValue : '100'}, {boxLabel : '合同洽谈',name : 'lrb2',inputValue : '101'}, {boxLabel : '市场准入材料',name : 'lrb3',inputValue : '102'}, {boxLabel : '网上审批',name : 'lrb4',inputValue : '103'}, {boxLabel : '合同信息',name : 'lrb5',inputValue : '104'}, {boxLabel : '付款情况',name : 'lrb6',inputValue : '105'}, {boxLabel : '检查验收',name : 'lrb7',inputValue : '106'}]}, {xtype : 'combo',fieldLabel : '网站',name : 'n_url',triggerAction : "all",// 请设置为"all",否则默认为"query"的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项listeners : {select : function(comb, record, index) {alert(comb.getValue());}},readOnly : true,transform : "select",// html中的idlazyRender : true,width : 120}, {// 显示图片id : 'browseImage',fieldLabel : '照片',autoCreate : {tag : 'input',type : 'image',src : 'demo/oicq.gif',// src : Ext.BLANK_IMAGE_URL,style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',name : 'imageBrowse'}}, {inputType : 'file',id : 'imageUpload',fieldLabel : '文件',width : 300}, {id : 'url',name : 'url',allowBlank : false,width : 300,fieldLabel : '网址',value : 'http://www.163.com',vtype : 'url'// url,email,alpha,alphanum}, combo1, {xtype : 'htmleditor',id : 'editor',name : 'editor',fieldLabel : '编辑器',// fontFamilies:['宋体','隶书','楷体'],width : 250,anchor : "99%"}],buttons : [{text : '确定',handler : onOK// 实际应用一般是处理form.getForm.submit()事件}, {text : '重置',handler : function() {form.form.getEl().dom.reset();// 使用Dom的刷新方法form.getForm().reset();// Ext reset()// 方法刷新时,无法刷新inputType:file的值的解决方法}}],keys : [{ // 处理键盘回车事件key : Ext.EventObject.ENTER,fn : onOK,scope : this}]});var menus = new Ext.menu.Menu({shadow : 'frame',// 设置菜单四打边有阴影items : [{text : '是否启用',checked : true,handler : onSave}, {text : '另存为',handler : onSave,menu : new Ext.menu.Menu({items : [{text : '文件另存为',group : 'theme',checked : false,handler : onSave}, {text : '图片另存为',group : 'theme',checked : false,handler : onSave}]})}]});function onSave(item) {alert(item.text);}// 工具栏var toolbar = new Ext.Toolbar({applyTo : 'tool',width : 500});toolbar.addButton([{text : '新建'}, {text : '打开'}, {text : '保存'}]);toolbar.addSeparator();toolbar.addField(new Ext.form.TextField({width : 30}));toolbar.addFill();toolbar.addText('静态文本');toolbar.add('-', '->', {text : '文件',menu : menus});// 确定按钮事件,这里只是简单获取各控件值,实际应用一般和后台脚本结合function onOK() {var strMsg;strMsg = '姓名：' + form.getComponent('username').getValue() + '，性别：';if (form.getComponent('male').checked)strMsg += '男';if (form.getComponent('female').checked)strMsg += '女';strMsg += '，年龄：' + form.getComponent('i_age').getValue();strMsg += '，住址：' + form.getComponent('i_address').getValue();// 通过循环遍历checkboxgroup获得值// alert(strMsg);var checkboxgroup = form.items.itemAt(11);// alert(checkboxgroup.getXType());//类型var vItems = checkboxgroup.items;var vCount = vItems.getCount();for (var i = 0; i < vCount; i++) {// alert(vItems.itemAt(i).getValue());//值}form.form.submit({waitMsg : '登陆中,请稍等...',method : 'POST',clientValidation : true,params : {p : '参数'}, // 传递的参数url : "demo/MyJsp.jsp",// 定义要跳转的url,格式被请求的页面格式为{ 'success': true,'msg': '成功'}success : function(form, action) {// Ext.Msg.alert('信息',"提示："+"response.responseText");//加粗体是得到后台的具体返回信息。Ext.Msg.alert('提示', "数据修改成功");// 成功提示信息},failure : function(form, action) {Ext.Msg.alert('提示', action.failureType);}});}// 创建主窗口var win = new Ext.Window({title : 'Ext中的FormPanel面板及Form控件',width : window.document.body.clientWidth / 2,closable : true,y : 10,collapsible : true,// draggable: false,resizable : false,modal : false,closeAction : 'hide',tbar : [{text : '顶部按钮'}],border : true,manager : wgroup,items : [form],buttons : []});win.show();var wgroup = Ext.WindowGroup();// 隐藏全部window// wgroup.hideAll();});/** * 在Ext2.2的Ext.form.FormPanel中如果有RadioGroup或者CheckboxGroup，那么 * FormPanel.form.setValues方法对这2个东东内部的radio和checkbox无法动态赋值，需要对 * Ext.form.BasicForm的findField方法进行修正，代码如下： */Ext.override(Ext.form.BasicForm, {findField : function(id) {var field = this.items.get(id);if (!field) {this.items.each(function(f) {if (f.isXType('radiogroup') || f.isXType('checkboxgroup')) {f.items.each(function(c) {if (c.isFormField&& (c.dataIndex == id || c.id == id || c.getName() == id)) {field = c;return false;}});}if (f.isFormField&& (f.dataIndex == id || f.id == id || f.getName() == id)) {field = f;return false;}});}return field || null;}});

html文件

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Form控件测试</title><mce:style type="text/css" media="all"></mce:style><style type="text/css" media="all" mce_bogus="1">.allow-float {clear:none!important;} /* 允许该元素浮动 */.stop-float {clear:both!important;} /* 阻止该元素浮动 */.sex-male {float:left;}.sex-female {float:left;padding:0 0 0 20px;}.age-field {float:left;padding:0 0 0 50px;}</style><link rel="stylesheet" type="text/css"href="extjs/resources/css/ext-all.css" /><mce:script type="text/javascript" src="extjs/adapter/ext/ext-base.js" mce_src="extjs/adapter/ext/ext-base.js"></mce:script><mce:script type="text/javascript" src="extjs/ext-all.js" mce_src="extjs/ext-all.js"></mce:script><mce:script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js" mce_src="extjs/locale/ext-lang-zh_CN.js"></mce:script><mce:script type="text/javascript" src="form.js" mce_src="form.js"></mce:script></head><body><div id="tool"></div><select id="select"><option value="1">浪曦</option><option value="2">博客园</option><option value="3">百度</option><option value="4">新浪</option></select></body></html>