`
Franciswmf
  • 浏览: 800047 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

ExtJS4简单form布局

 
阅读更多




			//定义一个新增窗口
       var addWindow = Ext.create("top.Ext.Window",{
			title:"新增信息",
			closeAction : "hide",
			width:600,
			height:450,
			layout:'fit',
			resizable:false,
			modal:true,
			items:[{
				xtype:"form",
				bodyStyle:"padding:25px;",
				border:false,
				items:[{
					layout:'form',
					border:false,
					borderStyle:"0px 0px 0px 0px",
					items:[{
						fieldLabel:'工程名称',
						xtype:'textfield',
						name:'name',
						allowBlank : false,//是否允许为空  
         				blankText : '不允许为空', 
         				msgTarget :'qtip',          //显示一个浮动的提示信息
						labelSeparator:':'
					}]
				},
				{
					layout:'form',
					border:false,
					borderStyle:"0px 0px 0px 0px",
					items:[{
						fieldLabel:'工程类型',
						xtype:'textfield',
						name:'gcType',
						allowBlank : false,//是否允许为空  
         				blankText : '不允许为空', 
         				msgTarget :'qtip',          //显示一个浮动的提示信息
						labelSeparator:':'
					}]
				}
				,
				{
					layout:'form',
					border:false,
					borderStyle:"0px 0px 0px 0px",
					items:[{
						fieldLabel:'省份',
						xtype:'textfield',
						name:'province',
						allowBlank : false,//是否允许为空  
         				blankText : '不允许为空', 
         				msgTarget :'qtip',          //显示一个浮动的提示信息
						labelSeparator:':'
					}]
				}
				,
				{
					layout:'form',
					border:false,
					borderStyle:"0px 0px 0px 0px",
					items:[{
						fieldLabel:'城市',
						xtype:'textfield',
						name:'city',
						allowBlank : false,//是否允许为空  
         				blankText : '不允许为空', 
         				msgTarget :'qtip',          //显示一个浮动的提示信息
						labelSeparator:':'
					}]
				}
				,
				{
					layout:'form',
					border:false,
					borderStyle:"0px 0px 0px 0px",
					items:[{
						fieldLabel:'县区',
						xtype:'textfield',
						name:'county',
						allowBlank : false,//是否允许为空  
         				blankText : '不允许为空', 
         				msgTarget :'qtip',          //显示一个浮动的提示信息
						labelSeparator:':'
					}]
				}
				,
				{
					layout:'column',
					border:false,
					borderStyle:"0px 0px 0px 0px",
					items:[{
						columnWidth:0.85,
                        layout: 'form',
                        border:false,
                        items: [{
                        fieldLabel:'工程地址',
						xtype:'textfield',
						name:'address',
						allowBlank : false,//是否允许为空  
         				blankText : '不允许为空', 
         				msgTarget :'qtip',          //显示一个浮动的提示信息
						labelSeparator:':'
                               }]

					},
					{
						columnWidth:0.15,
                        layout: 'form',
                        border:false,
                        items: [{
                        xtype:'label',
                        style:'font-size:12px; color:red;',
                        text: '(如街道/乡镇/村名等,不包括省/市/县)',
                        name: 'typeName'
                               }]

					}
					]
				}
				,
				{
					layout:'form',
					border:false,
					items:[{
						xtype:'textfield',
						name:'id',
						hideLabel:true,
						hidden:true
					}]
				}
				]
			}],
			buttonAlign:'center',
			//按钮
			buttons:[
				{
					text: "保存",
					scale: 'medium',
					margin:"0 30 0 0",
					handler: function(){
					 	addWindow.down("form").submit({
					 		url:"<%=cpStr%>/codeCompile/add.do",
					 		success: function (form, action) {
					 			if(action.result.success){
					 				addWindow.close();
					 				Ext.Msg.alert('提示',"保存信息成功!");
							 	   	store.load();//重新加载数据
					 			}else{
					 				addWindow.close();
					 				Ext.Msg.alert('提示',"遇到异常情况,保存信息失败!");
							 	   	store.load();//重新加载数据
					 			}
					 	    }
					 	});
			        } 
				},{
					text : "重置",
				 	scale: 'medium',
					handler: function(){
					 	addWindow.down("form").getForm().reset();
				    } 
				}
			],
			//监听
			listeners:{
				'show': function() { 
					//this.queryById("name").focus();
				}
			}
		});
  • 大小: 11.4 KB
分享到:
评论

相关推荐

    extjs4 入门基础,form、grid、tree

    此外,4.x系列也提供了更好的响应式布局方案,以适应不同设备的屏幕尺寸。 在学习过程中,建议参考ExtJS的官方文档,了解每个组件的详细配置和用法,同时通过编写实际项目来加深理解。此外,不断实践和探索ExtJS的...

    extjs4中文文档

    2. **布局管理**:EXTJS4提供多种布局方式,如Fit布局、Border布局、Form布局等,能够灵活地调整组件在页面上的排列和尺寸。 3. **数据绑定**:EXTJS4支持双向数据绑定,使得视图与模型之间的数据同步变得简单,...

    ExtJS3.2列布局

    "ExtJS3.2列布局"是这个框架中的一个重要概念,尤其在处理form表单时非常实用。 列布局(Column Layout)是ExtJS的一种布局策略,它允许你在同一行内创建多个并排显示的区域,每个区域可以包含不同的组件,如文本框...

    ExtJs中表单formPanel的横向布局

    本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局,即在一个表单中元素能够按照列分布,形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...

    Extjs4--Form登录功能,结合struts2

    3. **数据绑定**:ExtJS 4支持双向数据绑定,使视图与模型之间的数据同步变得更加简单。 **二、创建登录表单** 1. **定义表单组件**:在ExtJS中,可以使用`Ext.form.Panel`创建一个表单。在这个例子中,我们需要两...

    学习ExtJS form布局

    一、 Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。 hideLabels:tru表示隐藏标签,默认为false。 ...

    ExtJs 动态添加表单

    在ExtJS中,我们可以使用`Ext.container.Container`类来创建一个容器,然后设置布局为`form`,以便容纳表单字段。例如: ```javascript var formPanel = Ext.create('Ext.form.Panel', { layout: 'form', items...

    extjs-form组件配置参数详解

    `Ext.form.BasicForm`类提供了一个基础表单的功能,支持表单数据的提交、加载以及简单的数据绑定。 **配置项** - **baseParams**: 默认传递到请求中的参数。 - **method**: 提交方式,支持`GET`和`POST`。 - **url*...

    Extjs fieldset两行两列布局

    ### Extjs FieldSet 两行两列布局解析 在Extjs框架中,`FieldSet`是一种常见的组件,常用于组织一组相关的表单字段,并通过一个标题来标识这组字段的主题。本文将详细介绍如何使用Extjs实现一个两行两列布局的`...

    extjs4官方示例以及api文档html版

    这些示例涵盖了EXTJS4的各种组件和功能,包括表格(Grid)、面板(Panel)、表单(Form)、菜单(Menu)、工具栏(Toolbar)、树形视图(Tree)、图表(Charts)等。通过运行示例,你可以直观地看到组件的外观和交互...

    extjs4学习资源大全

    ExtJS4是一款强大的JavaScript框架,主要用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括数据绑定、模型、视图、控制器等概念,使得开发者能够创建功能丰富的、交互性强的前端应用。本资源包主要涵盖了...

    Extjs4使用要点个人整理

    3. **表单(Form)配置**:`ExtJS_Form配置.docx`可能包含表单字段的配置,如文本域(textfield)、下拉框(combobox)、复选框(checkbox)等。还会涉及表单验证、数据绑定和提交策略。 4. **树形控件(Tree)配置...

    Extjs4 下拉树 TreeCombo

    ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...

    ExtJS4 doc文档

    除了上述核心组件,ExtJS4还包括丰富的其他组件,如窗体(form)、图表(charts)、对话框(dialogs)、布局(layouts)等,它们共同构建出一个完整的UI开发框架。ExtJS4的API文档详细阐述了每个组件的用法、配置项...

    extjs4 ComboBox 点击下拉框 出现grid效果

    在EXTJS4中,ComboBox是一个常用的组件,它用于创建下拉选择框,通常用于输入框的辅助选择。这个组件提供了一种用户友好的方式来从一组预定义的选项中进行选择。然而,根据你的标题和描述,你似乎遇到了一个特别的...

    ExtJS布局之border实例

    ### ExtJS布局之border实例详解 #### 一、Border布局简介 在ExtJS框架中,`border`布局是一种非常常见的布局方式,它将容器划分为五个区域:north(北)、south(南)、east(东)、west(西)以及center(中心)。...

    Extjs4 api

    2. **布局管理**:框架提供了多种布局方式,如fit布局、border布局、form布局等,用于自动调整组件大小和位置,适应不同屏幕尺寸和数据变化。 3. **数据绑定**:ExtJS 4引入了MVVM(Model-View-ViewModel)模式,...

    Extjs4 Extjs4学习指南

    ### Extjs4 学习指南知识点详述 ...员工管理系统通常涉及数据展示、增删改查等功能,可以利用Extjs4的Grid Panel、Form Panel等组件实现。 以上是对“Extjs4学习指南”知识点的详细说明,希望对学习者有所帮助。

    ExtJs常用布局--layout详解实例代码

    ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版,可直接运行哦...

    Extjs4+MVC+struts2后台管理系统

    在实现过程中,开发者可能利用ExtJS4的FormPanel组件来构建登录表单,并通过AjaxForm或Store进行异步提交。Struts2的动作类接收到请求后,会验证用户名和密码的合法性,如果验证通过,则创建会话并返回成功信息,...

Global site tag (gtag.js) - Google Analytics