extjs textField之后添加一个button以及后台数据交互

最新推荐文章于 2021-03-17 11:44:02 发布

原创最新推荐文章于 2021-03-17 11:44:02 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs textField之后添加一

extjs 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架创建复杂表单布局的例子，包括如何设置不同面板宽度比例、表单字段属性及按钮事件处理等。通过Ajax请求实现表单字段的动态填充。

var pnRow1=new Ext.Panel({
		border:false,
		layout:'column',
		items:[
				new Ext.Panel({
				columnWidth:.2,
				layout:'form',
				border:false,
				labelWidth:100,
				labelAlign:'left',
				items:[
					{
					   xtype : "textfield",
			         id:"contract_id",
				      name:"contract_id",
				      maxLength :20,
				      value:'${model.contract_id}',
		             fieldLabel : "合同标识",
		             width : 150
					}
				]
				}),
				//
				new Ext.Panel({
				columnWidth:.1,
				layout:'form',
				border:false,
				labelWidth:100,
				labelAlign:'right',
				items:[{
				text: '获取',
					id:'selectDuty2',
					xtype: 'button',
					handler : function() {
					
					Ext.Ajax.request({
								url: 'contractAction!getContract_id.shtml',
								method: 'POST',
								params: {},
								success: function (result, request){
								Ext.getCmp('contract_id').setValue(result.responseText);
									//alert( result.responseText+"-----"+request["id"]);
								},
								failure: function (result, request){
					            }
							});
					}}
				]
				}), 
				//
				new Ext.Panel({
				columnWidth:.3,
				layout:'form',
				border:false,
				labelWidth:100,
				labelAlign:'right',
				items:[
				comboInspaction_authority2
				]
				}), 
				//
				new Ext.Panel({
				columnWidth:.3,
				layout:'form',
				border:false,
				labelWidth:100,
				labelAlign:'right',
				items:[
				comboInspection_type2
				]
				})
			 
		]
		});