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

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

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();



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜鸟进军大神陆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值