extjs4.2 from表单创建、窗口设置、显示

淡淡的烟草味﹌ 2022-06-03 07:41 308阅读 0赞

什么都不说了，先贴上代码

var form = new Ext.form.FormPanel({
           frame: true,
           //title: '表单标题',
           //style: 'margin:10px',
           buttonAlign: 'center',
           items : [{
        	   layout : "column", // 从左往右的布局
               border:false,
               padding:5,
        	   items:[{
        	   height:20
           		}]},{
            	 layout : "column", // 从左往右的布局
            	 border:false,
            	 padding:5,
            	 items:[{ 
                    	   columnWidth:.45,
                		   labelAlign : "right",
                           fieldLabel:"父节点ID",//文本框标题
                      	   xtype: 'textfield',
                      	   name: 'RIGHT_PARENT_ID',//隐藏域父节点id
                      	   id: 'RIGHT_PARENT_ID',
                      	   readOnly:true,//不可编辑,只读
                      	   //hidden: true,
                      	  // hideLabel:true
                      	   },{
                      		   columnWidth:.45,
                  		       labelAlign : "right",
                               fieldLabel:"系统ID",//文本框标题
                          	   xtype: 'textfield',
                          	   name: 'SYSTEMID',//隐藏域系统id
                          	   id: 'SYSTEMID',
                          	   readOnly:true,//不可编辑
                          	   //hidden: true,
                          	   //hideLabel:true
                          	   }]
             },{
          	 layout : "column", // 从左往右的布局
          	 border:false,
          	 padding:5,
          	 items:[{
          		 columnWidth:.45, 
          		 labelAlign : "right",
                   fieldLabel:"权限名称",//文本框标题
                   xtype:"textfield",//表单文本框
                   name:"RIGHT_NAME",
                   id:"RIGHT_NAME",
                   allowBlank:false,//不允许为空  
                   width:300
                 },{
              		 columnWidth:.45, 
              		 labelAlign : "right",
                       fieldLabel:"权限编号",//文本框标题
                       xtype:"textfield",//表单文本框
                       name:"RIGHT_ID",
                       id:"RIGHT_ID",
                       allowBlank:false,
                       width:300
                     }]
           },
           {
            	 layout : "column", // 从左往右的布局
            	 border:false,
            	 padding:5,
            	 items:[{
            		 columnWidth:.45,
            		 labelAlign : "right",
                     fieldLabel:"权限地址",//文本框标题
                     xtype:"textfield",//表单文本框
                     name:"RIGHT_URL",
                     id:"RIGHT_URL",
                     allowBlank:false,//不允许为空  
                     width:300
                   },{
            		 columnWidth:.45,
            		 labelAlign : "right",
                     fieldLabel:"权限顺序",//文本框标题
                     xtype:"textfield",//表单文本框
                     name:"RIGHT_SORT",
                     id:"RIGHT_SORT",
                     allowBlank:false,//不允许为空  
                     width:300
                   }]
             }, {
            	 layout : "column", // 从左往右的布局
            	 border:false,
            	 padding:5,
            	 items:[{
                  	   columnWidth:.45,
                	   labelAlign : "right",
                	   xtype:'combobox',
                	   editable:false,//不可编辑
                	   name:'RIGHT_STATUS',
                	   fieldLabel:'权限状态',
                	   emptyText:'请选择',
                	   allowBlank:false,
                	   store:[['1','启用'],['0','禁用']]
                     },{
                		 columnWidth:.45,
                		 labelAlign : "right",
                         fieldLabel:"权限主图标",//文本框标题
                         xtype:"textfield",//表单文本框
                         name:"RIGHT_MAIN_ICON",
                         id:"RIGHT_MAIN_ICON",
                         allowBlank:true,//不允许为空  
                         width:300
                       }]
             }],
           buttons: [
         			{  
                     text:'提交',  
                     handler:function(){  
                    	 Ext.Ajax.request({   
                             url : ctx+'/right',//请求地址
                             params:form.getForm().getValues(),//获取表单输入的键值对
                             method : 'post',   
                             success : function(response) {   
                            	 Ext.Msg.alert("提示", "添加成功"); 
                             },   
                             failure : function() {   
                                 Ext.Msg.alert("提示", "方法调用失败");   
                             }   
                         });  
                     }  
                 }, {
                  text: '关闭',
                  icon: '../../../Images/extjs/cross.png',
                  handler: function () {
                      win.close(this);
                  }
              }
            ]
       });

窗口属性设置

var win = Ext.create("Ext.window.Window", {
           title: "添加权限",       //标题
           draggable: true,
           icon: '../../../Images/extjs/pencil.png',
           height: 300,                          //高度
           width: 700,                           //宽度
           layout: "fit",                        //窗口布局类型
           modal: true, //是否模态窗口，默认为false
           resizable: true,
           maximizable :true, // 显示最大化按钮在右上角
           renderTo: document.body,
           closeAction:'hide', 
           items: [form],
           animCollapse : true, 
           animateTarget : Ext.getBody(),
       });

显示窗口：

win.show();

发表评论取消回复

表情：

评论列表（有 0 条评论，308人围观）

还没有评论，来说两句吧...

相关阅读

相关 ant-design-vue表单from清空，设置值

ant-design-vue表单from取值 // 获取用户填写的值 this.form.validateFields((err, values) => {

素颜马尾好姑娘i/ 2022年12月06日 15:53/ 0 赞/ 180 阅读

相关 ExtJS4 表单横向布局

效果图： ![Center][] 源码: var win = Ext.create("Ext.window.Window", \{ title: "审计底稿",

谁借莪１个温暖的怀抱￠/ 2022年09月25日 03:29/ 0 赞/ 166 阅读

相关 extjs 表单验证实例

//放在onReady的function（）\{\}中 Ext.QuickTips.init(); //为组件提供提示信息功能，

港控/mmm°/ 2022年09月20日 12:36/ 0 赞/ 166 阅读

相关 Extjs表单控件入门

ExtJs表单控件用formPanel来做为表单元素的容器。默认情况下，是使用Ajax异步提交。大家知道要使用Extjs必须引入他的库,所以我们要引入以下几个文件: ex

妖狐艹你老母/ 2022年08月23日 14:42/ 0 赞/ 227 阅读

相关 ExtJS form表单控件创建

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

Love The Way You Lie/ 2022年07月19日 01:26/ 0 赞/ 224 阅读

相关 ExtJS 将表单设置为不可编辑（查看）

![效果图][20161013184052950] 代码： afterrender : function(thiz) {

亦凉/ 2022年07月16日 09:40/ 0 赞/ 268 阅读

相关 extjs4.2 from表单创建、窗口设置、显示

什么都不说了，先贴上代码 var form = new Ext.form.FormPanel({ frame: true,

淡淡的烟草味﹌/ 2022年06月03日 07:41/ 0 赞/ 309 阅读

相关 HTML04.From表单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

灰太狼/ 2022年06月01日 10:19/ 0 赞/ 139 阅读

相关 from表单应用

今天，我们来学习from表单的应用，首先，我们要知道from的两个属性action和method，前者表示规定表单提交时向何处发生表单数据，后者规定了表单提交的方式，简单的说就

缺乏、安全感/ 2022年02月23日 11:42/ 0 赞/ 201 阅读

相关 ExtJs表单验证的方法总结

一、基本验证方式，使用vtype属性。 1.alpha只能输入字母，无法输入其他（如数字，特殊符号等） 2.alphanum只能输入字母和数字，无法输入其他 3.emai

女爷i/ 2021年09月10日 07:08/ 0 赞/ 415 阅读