EXTJS 3.4 formPanel的column布局和日期和星期的关系

最新推荐文章于 2021-03-09 21:40:40 发布

原创最新推荐文章于 2021-03-09 21:40:40 发布 · 505 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

ExtJS 3 同时被 2 个专栏收录

10 篇文章

订阅专栏

4 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架进行表单布局的具体实例，包括如何设置表单的宽度、高度、滚动条等属性，并展示了如何通过column布局实现表单元素的水平分布，以及如何在表单中嵌入日期选择器和文本字段。

var form = new Ext.form.FormPanel({
		title : "岗位",
		width : 1200,
//		height : 800,
		autoHeight:true,
		frame : true,
		autoScroll : true,
		renderTo : "ssssss1",
		layout : "form", // 整个大的表单是form布局
		labelWidth : 80,
		labelAlign : "right",
		border: true,
		items : [{ // 行1
			layout : "column", // 从左往右的布局
			items : [
					{
						columnWidth : .16, // 该列有整行中所占百分比
						layout : "form", // 从上往下的布局
						items : [ {
							xtype : "datefield",
							name : 'dutyDate',
							allowBlank: false,
				    		editable: false,
				    	    altFormats: "Y-m-d",
				    	    format:"Y-m-d",
							fieldLabel : "日期",
							listeners : {
								"select" : function(field, value) {
									this.setValue(value);
									var weekDayInfo = [ "星期天", "星期一", "星期二",
											"星期三", "星期四", "星期五", "星期六" ];
									var year = value.getFullYear();
									var month = value.getMonth();
									var date = value.getDate();
									var dt = new Date(year, month, date);
									Ext.getCmp('weekDay').setValue(
											weekDayInfo[dt.getDay()]);
								}
							}
						} ]
					}, {
						columnWidth : .16,
						layout : "form",
						items : [ {
							id :'weekDay',
							name : 'weekDay',
							xtype : "textfield",
							fieldLabel : "星期",
						} ]
					}
                                   ]
                              }]
                        }]