第四章 ExtJS - 表单.pptVIP

ExtJS表单 TextField文本输入框 JS: var userName = new Ext.form.TextField({ fieldLabel: user name, emptyText[微软用户1]?: 请输入用户名, allowBlank: false, maxLength: 8, minLength: 3, name:userName, msgTarget: under// 验证错误信息显示地点，加上这个属性，才会有验证效果 }); ?[微软用户1]每页输入数据时，里面显示的文字 TextField隐藏框 JS: var newsId = new Ext.form.TextField({ hidden: true, hideLabel: true, name:newsId }); TextField密码框 JS: var userPassword = new Ext.form.TextField({ fieldLabel: 登录密码, allowBlank: false, emptyText: 请输入登录密码，此处必须填写, width: 500, inputType: password, maxLength: 20, minLength: 1, name:userPassword, msgTarget: under }); ComboBox下拉列表框 JS: var wantCourse = new Ext.form.ComboBox({ fieldLabel: 培训意向, transform: wantCourse[l1]?, width: 500, triggerAction: all, readOnly: true, lazyRender[l2]?: true, name:wantCourse }); ?[l1]页面对应的select的id ?[l2]一定要有，否则会显示到页面上，而不能显示在表单中 ComboBox下拉列表框 页面： select id=wantCourse style=display: none; option value=trueJava/option option value=CCNACCNA/option option value=CCNPCCNP/option option value=CCIECCIE/option /select DateField日期框 JS: var firstTimeDate = new Ext.form.DateField({ fieldLabel: 首次咨询日期, width: 500, allowBlank: true, readOnly: true, name:firstTimeDate, format:Y-m-d[l1]?, msgTarget: under }); ?[l1]日期显示的格式化模式 表单 // 包含输入框的表单 var queryForm = new Ext.form.FormPanel({ baseCls: x-plain, labelWidth: 55, defaultType: textfield, items: [ userName ] }); 包含表单的窗体 // 包含表单的窗体 var queryWindow = new Ext.Window({ title: User Query, width: 260, height:140, minWidth: 300, minHeight: 200, layout: fit, plain:true, bodyStyle:padding:5px;, closable :false,// 窗体右上角是否有关闭按钮 buttonAlign:center,// 窗体中按钮的摆放方式 items: queryForm, …… 包含表单的窗体 请参照配套源码文件 表单中的数据会以AJAX的形式，请求的方式发送到后台的控制器中 窗体控制 显示窗体 queryWindow.show(); 隐藏窗体 queryWindow.hide(); * *