`
jjjssh
  • 浏览: 77283 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

解决extjs 单选及其传值的问题

阅读更多
一种是form里面直接提交传值给后台的例子:
Ext.onReady(function(){
	var formPanel = new Ext.FormPanel({
		id : "formPanel",
		name : "formPanel",
		width : 800,
		renderTo : "formPanelDiv",
		onSubmit: Ext.emptyFn,
       	submit: function(){
	    	this.getEl().dom.action="formPanel.htm"; 
	        this.getEl().dom.submit();
	    },
		items : [
			new Ext.form.TextField({
				id : "id",
				name : "id",
				allowBlank : false,
				blankText : "ID不能为空",
				fieldLabel : "ID",
				labelStyle : "text-align:right"
			}),
			new Ext.form.TextField({
				id : "name",
				name : "name",
				allowBlank : false,
				blankText : "姓名不能为空",
				fieldLabel : "姓名",
				labelStyle : "text-align:right"
			}),
			new Ext.form.RadioGroup({
				fieldLabel : "性别",
				labelStyle : "text-align:right",
				width : 80,
				items : [
					new Ext.form.Radio({
						name : "sex",
						boxLabel : "男",
						inputValue : "male",
						width : 20
					}),
					new Ext.form.Radio({
						name : "sex",
						boxLabel : "女",
						inputValue : "female",
						width : 20
					})
				]
			}),
			new Ext.form.TextField({
				id : "email",
				name : "email",
				fieldLabel : "邮箱",
				labelStyle : "text-align:right"
			})
		],
		buttons : [
			{
				text : "登录",
				id : "btn_login",
				handler : function(){
					if(formPanel.getForm().isValid()){
						formPanel.getForm().submit();
					}
				}
			},
			{
				text : "重置",
				id : "btn_reset",
				handler : function(){
					formPanel.getForm().reset();
				}
			}
		],
		buttonAlign : "center"
	});
});


后台是controller或jsp可以直接接收form提交过来的值
String sex= request.getParameter("sex");
...........

第二种是用ajax传值的例子:

Ext.onReady(function(){  

     Ext.QuickTips.init();  

     Ext.override(Ext.form.RadioGroup, {      
    getValue: function(){      
        var v;      
        if (this.rendered) {      
            this.items.each(function(item){      
                if (!item.getValue())       
                    return true;      
                v = item.getRawValue();      
                return false;      
            });      
        }      
        else {      
            for (var k in this.items) {      
                if (this.items[k].checked) {      
                    v = this.items[k].inputValue;      
                    break;      
                }      
            }      
        }      
        return v;      
    },      
    setValue: function(v){      
        if (this.rendered)       
            this.items.each(function(item){      
                item.setValue(item.getRawValue() == v);      
            });      
        else {      
            for (var k in this.items) {      
                this.items[k].checked = this.items[k].inputValue == v;      
            }      
        }      
    }      
});     
     
  
var radiogroup= new Ext.form.RadioGroup({   
                fieldLabel : "radioGroup",   
                items : [{   
                            boxLabel : '男',   
                            inputValue : "男",   
                            name : "rg",   
                            checked : true  
                        }, {   
                            boxLabel : '女',   
                            name : "rg",   
                            inputValue : "女"  
                        }]   
            });

     var _form=new Ext.form.FormPanel({  

         renderTo:'login-form',  

         title:'系统登录',  

         frame:true,  

         width:290,  

         height:160,  

         layout:'form',  

         buttonAlign:'center',  

         labelAlign:'center',  

         defaults:{width:160,labelWidth:80,xtype:'textfield'},  

         items:[  

             {fieldLabel:'用 户 名',vtype:'alpha',id:'name',name:'name'},  

             {fieldLabel:'通 行 证',inputType:'password',vtype:'alpha',id:'pass',name:'pass'},  

             radiogroup

         ],  

         buttons:[  

             {
             	text:'登 录',
             	style:'margin-right:15',
             	handler : function(){
             		if(_form.getForm().isValid()){
             			Ext.Ajax.request({
             				method : "post",
             				url : "test2.jsp",
             				params : {
             					sex : radiogroup.getValue()
             				},
             				callback : function(options,success,response){
             					Ext.Msg.alert('提示',response.responseText);
             				}
             			});
             		}
             	}
             },  

             {  

                 text:'清 除',  

                 style:'margin-left:15',  

                 handler:function(){  

                     var _name=_form.findById('name').setValue('');  

                     var _pass=_form.findById('pass').setValue('');  

                 }  

             }  

         ]  

     });  

}); 


在后台的controller或jsp,可以直接用
String sex = request.getParameter("sex");
接收传值。
不知道大家有没发现,有ajax与没有ajax,传值是有点区别的
分享到:
评论

相关推荐

    EXTJS 不同页面之间的传值问题(数据不经过后台,通过页面取得)

    这篇博客"EXTJS 不同页面之间的传值问题(数据不经过后台,通过页面取得)"探讨的就是如何在EXTJS应用的不同视图间传递数据,而无需通过后端接口。 首先,我们可以使用EXTJS的全局变量来实现简单的数据共享。全局...

    100行代码解决ExtJs4.1合并单元格问题

    100行代码解决ExtJs4.1合并单元格问题

    extJS4升级至extJS6.6所遇问题及解决方案

    项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议

    解决extjs API文档不断Loading

    当以上步骤都无法解决问题时,可以寻求社区帮助,如帖子中提到的iteye博客社区,或者访问ExtJS的官方论坛。通常,其他开发者可能已经遇到过类似问题并找到了解决方案。 9. **更新或降级**: 如果问题源于ExtJS的...

    Extjs grid 中文排序问题修正

    总结起来,解决EXTJS Grid中文排序问题主要涉及到自定义排序函数和利用localeCompare方法。通过这种方式,我们可以确保EXTJS Grid在处理中文数据时能正确排序,提供更好的用户体验。在实际开发中,可能还需要考虑...

    ExtJS(ajax框架) 4.2.1

    单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    在这个特定的情况下,我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree,它在ExtJS4中实现了单选和多选功能,并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性,...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    在ExtJS 4.x的ComboboxTree中,通过配置参数可以实现多选和单选模式。通常,单选可以通过设置`multiSelect: false`来实现,而多选则通过设置`multiSelect: true`。同时,还需要配置`mode`为`EXTJS4`特有的`EXTJS4`...

    解决Extjs当中复选框全选后,取消选中某一项,全选框仍是选中状态的问题

    通过以上代码,我们就解决了EXTJS中全选后取消选中某一项时,全选框仍保持选中状态的问题。在实际开发中,可能需要根据具体项目结构和需求进行微调,但基本思路是确保事件驱动的状态同步。同时,为了提高代码可维护...

    Extjs,解决双重边框问题

    本文以标题"Extjs,解决双重边框问题"和描述为例,探讨如何在Extjs 2、3、4版本中自定义Panel边框并解决双重边框现象。 首先,让我们关注Extjs 4中的情况。在默认状态下,Panel和Window组件都有边框,当Panel作为...

    ExtJs表格点击超链接获取行的值

    在ExtJs中,我们可以通过多种方式获取选中的行数据,具体取决于我们的选择模式是单选、多选还是单元格选择。 **1. 单选或多选模式** ```javascript var grid = Ext.getCmp('gridId'); var selectedRecords = grid....

    ExtJS内存泄漏问题详解

    关于ExtJS内存泄漏问题,一直是ExtJS开发人员困扰的问题,这篇文档很好地解释了什么是内存泄漏,为什么会产生内存泄漏。能够帮助程序员使用ExtJS开发出更高效安全的代码。

    深入浅出ExtJS及其源码

    深入浅出ExtJS及其源码 包含电子书第一版和第二版 及其书中包含的源代码

    解决Extjs3.0不兼容IE9

    项目中遇到Extjs3.0在IE9中不兼容,现有两种解决方法

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    extjs单元格无法复制

    ExtJS GridPanel 单元格无法复制问题解决方案 ExtJS 是一个功能强大的 JavaScript 框架,广泛应用于 Web 开发中。但是,在使用 ExtJS 的 GridPanel 组件时,可能会遇到单元格无法选中复制的问题,特别是在 IE ...

    ExtJs异步无法向外传值和赋值的完美解决办法

    1、Ext.data.Store.load();方法是异步的,下面的方式获得的reCount始终是0,因为还没等后台的方法执行完就赋值了,此时store的record还没获得值。 var testStore = new Ext.data.GroupingStore({ ...

    解决EXTJS4.2的tabpanel右键关闭的BUG

    EXTJS4.2官网上的tabpanel的右键关闭当前页,关闭其它,关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件,只要替换当前4.2的那个文件就可以使用了!

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中,我们主要关注的是...

    extjs常见问题及解决方法

    extjs常见问题http://www.jb51.net/list/list_217_1.htm

Global site tag (gtag.js) - Google Analytics