ext FormPanel中添加文本框,日期,单选扭,多行文本框,按钮,按钮事件

limon758

于 2010-12-15 12:42:07 发布

阅读量503

点赞数

分类专栏： ext 文章标签： EXT 工作

本文链接：https://blog.youkuaiyun.com/heisetoufa/article/details/83780033

版权

ext 专栏收录该内容

8 篇文章

订阅专栏

本文展示了一个使用ExtJS框架创建表单的示例代码，其中包括文本框、日期选择器、多行文本输入框及单选按钮组。通过具体配置展示了如何定义不同类型的输入组件及其属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var form = new Ext.form.FormPanel({
	labelAlign: 'center',
	labelWidth: 60,//控制fieldLabel长度
	labelSize : 30,
	frame: true,
	defaultType: 'textfield',//默认类型
	items: [{//panel中包括的内容
	fieldLabel: '文本框',
	name: 'txr',
	width:110
	},{
	fieldLabel: '日期',
	name: 'rq',
	xtype: 'datefield',//日期类型
	width:110
	},{
	fieldLabel: '多行文本框,
	name: 'jlnr',
	xtype:'textarea',//多行文本框类型
	width:300
	},{
	fieldLabel: '单选扭',
	xtype:"panel",//panel
	layout:"column",
	isFormField:true,
	items: [{
         boxLabel: '未完成',
         name: 'dxn',
         value: '1',
         checked: true,//默认选中
           xtype:"radio"//单选扭类型
         },{
         boxLabel: '完成',
         name: 'dxn',
         value: '2',
         xtype:"radio"
         }]
	}]
});

var win = new Ext.Window({
	layout: 'fit',
	width: 450,
	title: '工作记录详细窗口',
	height: 250,
	closeAction: 'hide',

	items: [form],

	buttons: [{
		text:'保存'//按钮名字
		},{
		text:'关闭',
		handler:function(){win.close();}//关闭当前的弹出Window
	}]
});

黑色头发:http://heisetoufa.iteye.com/