Extjs Formpanel code 例子

/*

 * Ext JS Library 2.0.2

 * Copyright(c) 2006-2008, Ext JS, LLC.

 * [email protected]

 * 

 * http://extjs.com/license

 */
 	Ext.namespace("Tenpay");
	Tenpay.Form = Ext.extend(Ext.form.FormPanel,{

				frame:true,
  				url:'dispatch',
  				plain:true,
  				labelWidth:120,
  				labelAlign:"center",
  				initComponent:function(){
  					
  					Ext.apply(this, {
  						bodyStyle:"padding:5px 5px 0",
  						monitorValid:true,
						defaults:{xtype:'textfield',width:200},
  						items:[{
		                	fieldLabel:"编号",
							name:"fcbm_index",
                            ctCls: "data_tab_tdr2",
							allowBlank:false
						},{
							fieldLabel:"服务器绑定IP",
							name:"fcbm_ip",
                            ctCls: "data_tab_tdr2",
							allowBlank:false
						},{
							fieldLabel:"主侦听端口",
							name:"fcbm_port",
							allowBlank:false
						},{
							fieldLabel:"服务器标示",
							name: "fcbm_svr",
							allowBlank:false
						},{
							fieldLabel:"开放端口列表",
							name:"fcbm_port_list_idx",
							allowBlank:false
						},{
							fieldLabel:"承载的应用",
							name:"fcbm_port_app",
							allowBlank:false
						},{
							xtype:"combo",
							fieldLabel:"信息状态",
							mode :"local",
							displayField :'state',
							valueField:'abbr',
							readOnly:true,
							triggerAction : "all",
							emptyText:"请选择,不能为空",
							hiddenName:"fcbm_rec_status",
							store:new Ext.data.SimpleStore({
											fields:['abbr','state'],
											data:[['1','可用'] , ['0','不可用']]
							})
						},{
							fieldLabel:"停止状态应答包",
							name:"fcbm_stop_resp",
							allowBlank:false,
							anchor:"80%"
					},{
						
							xtype:"hidden",
							name:"objectId",
							hidden:true,
							hiddenLabel:true
							//value:"object_id"
					}],	
					
					
					buttons: [{
			 			text :"确定",
			 			handler:this.submit,
			 			scope:this,
			 			formBind:true
					},
					{
            			text     :"取消",
            			scope:this,
            			handler  : this.reset
					}]
  					});
  				
                Tenpay.Form.superclass.initComponent.apply(this, arguments);				
      			}
      			,onRender:function() {
 
				// call parent
				 Tenpay.Form.superclass.onRender.apply(this, arguments);
 
				// set wait message target
				this.getForm().waitMsgTarget = this.getEl();
	 
				}, // eo function onRender

				onLoadClick:function() {
 					this.load({
 					url:this.url
 					,waitMsg:'Loading...'
 					,params:{cmd:'load'}
 					});
					// any additional load click processing here
				 } ,
				 // eo function onLoadClick
				  submit:function() {
				  	if(this.getForm().isDirty())
				  	{
						this.getForm().submit({
						url:this.url
						,scope:this
						,success:this.onSuccess
						,failure:this.onFailure
						,params:{cmd:'save'}
						,waitMsg:'正在保存,请稍候....'
						});
				  	}
					},
					// eo function submit
					onSuccess:function(form, action) {
 						Ext.Msg.show({
 						title:'修改成功'
 						,msg:'修改成功!'
 						,modal:true
 						,scope:this
 						,fn:this.onFlush
 						,icon:Ext.Msg.INFO
						,buttons:Ext.Msg.OK
 						});
 						
 					} ,// eo function onSuccess
 					onFlush:function(form,action){
 						document.location.href="fcbm.do?method=show";
 							//Ext.Ajax.request({url:"fcbm.do" , method:"POST" ,  params:{method:"show"}}) ;
// 							this.getForm().submit({
// 								url:'fcbm'
// 								,scope:this
// 								,params:{method:'show'}
// 								,waitMsg:'ҳ����ת�У����Ժ�...'
// 							});
 					},
 					onFailure:function(form, action) {
 							this.showError(action.response.responseText);
							}, // eo function onFailure
							showError:function(msg, title) {
									title = title || 'Error';
									Ext.Msg.show({
									title:title
									,msg:msg
									,modal:true
									,icon:Ext.Msg.ERROR
									,buttons:Ext.Msg.OK
									});
							}, // eo function showError
					reset:function(){
						this.ownerCt.close();
							
					}
      			});
    			//end extends
      			
		// register xtype
		Ext.reg('fcForm', Tenpay.Form);


Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';
    Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';
  	var isload = true;
    var bts;
    var tt;
    var jsData = Ext.get('datas');
    if(jsData.dom.value=='' || jsData.dom.value=="")
    {
        isload = false;
    }
  
   if(isload)
   {
	bts = Ext.DomQuery.select("span input[type=button]");
	tt = Ext.util.JSON.decode(jsData.dom.value);
	Ext.each(bts,function(obj){
			var btn = Ext.get(obj['id']);
			btn.on("click",function(){
					
					var win = new Ext.Window({
   			
					    	    layout:'fit',
					    		plain:true,
					    		width:500,
					    		height:320,
					    		title: '编辑负载均衡器信息',
					    		draggable: true, // �����Ϸ�
					    		closable: true, // ���Թر�
					    		//closeAction:"hide",
					    		buttonAlign:'center',
					    		modal: true,// Ϊģʽ�Ի���
					    		items:{
					    			id:'fcformload', 
					    			xtype:'fcForm'
					    		},
							  	listeners:{"show":function() {
            						var form = Ext.getCmp('fcformload').getForm();
            						form.setValues(tt[btn.id]);
       							 }}
						});
                     win.show(btn);
						
			},this);
	});
    
    
    //点击查看链结触发事件
    var as = Ext.DomQuery.select("span a");
    Ext.each(as,function(obj){
    
         var a = Ext.get(obj['id']);
         var dp = Ext.get('d'+a.id);
         a.on("click",function(){
                var win =new Ext.Window({
                
                                layout:'fit',
                                title:'查看负载均衡器信息',
                                plain:true,
                                width:650,
                                autoHeight:true,
                                html:dp.dom.innerHTML,
                                buttons:[{
                                    text:"关闭",
                                    handler:function(){
                                        win.hide();
                                    },
                                    scope:this
                                }]
                });
                win.show(a);
         });
    
    },this);
    
   }
	
	//�������
	Tenpay.Adform = Ext.extend(Ext.form.FormPanel,{
		
				frame:true,
  				url:'dispatch',
  				plain:true,
  				labelWidth:120,
  				labelAlign:"center",
  				initComponent:function(){
  					
  					Ext.apply(this, {
  						bodyStyle:"padding:5px 5px 0",
  						monitorValid:true,
						defaults:{xtype:'textfield',width:200},
  						items:[{
		                	fieldLabel:"编号",
							name:"fcbm_index",
							allowBlank:false
							,blankText:"����Ϊ�գ�����ȷ��д"
						},{
							fieldLabel:"服务器绑定IP",
							name:"fcbm_ip",
							allowBlank:false
							,blankText:"该字段不能为空"
						},{
							fieldLabel:"主侦听端口",
							name:"fcbm_port",
							allowBlank:false
							,blankText:"该字段不能为空"
						},{
							fieldLabel:"服务器标示",
							name: "fcbm_svr",
							allowBlank:false
							,blankText:"该字段不能为空"
						},{
							fieldLabel:"开放端口列表",
							name:"fcbm_port_list_idx",
							allowBlank:false
						},{
							fieldLabel:"承载的应用",
							name:"fcbm_port_app",
							allowBlank:false
							,blankText:"该字段不能为空"
						},{
							xtype:"combo",
							fieldLabel:"信息状态",
							mode :"local",
							displayField :'state',
							valueField:'abbr',
							readOnly:true,
							triggerAction : "all",
							emptyText:"请选择",
							hiddenName:"fcbm_rec_status",
							allowBlank:false,
							blankText:"该字段不能为空",
							store:new Ext.data.SimpleStore({
											fields:['abbr','state'],
											data:[['1','可用'] , ['0','不可用']]
							})
							
						},{
							fieldLabel:"停止状态应答包",
							name:"fcbm_stop_resp",
							allowBlank:false,
							anchor:"80%"
							,blankText:"该字段不能为空"
							
					},{
						
							xtype:"hidden",
							name:"objectId",
							hidden:true,
							hiddenLabel:true
							//value:"object_id"
					}],	
					
					
					buttons: [{
			 			text :"提交",
			 			handler:this.submit,
			 			scope:this,
			 			formBind:true
					},
					{
            			text     :"取消",
            			scope:this,
            			handler  : this.reset
					}]
  					});
  				
                Tenpay.Form.superclass.initComponent.apply(this, arguments);				
      			}
      			,onRender:function() {
 
				// call parent
				 Tenpay.Form.superclass.onRender.apply(this, arguments);
 
				// set wait message target
				this.getForm().waitMsgTarget = this.getEl();
	 
				}, // eo function onRender
				  submit:function() {
				  	if(this.getForm().isDirty())
				  	{
						this.getForm().submit({
						url:this.url
						,scope:this
						,success:this.onSuccess
						,failure:this.onFailure
						,params:{cmd:'add'}
						,waitMsg:'正在保存。。。'
						});
				  	}
					},
					// eo function submit
					onSuccess:function(form, action) {
 						Ext.Msg.show({
 						title:'添加成功'
 						,msg:'新增成功'
 						,modal:true
 						,scope:this
 						,fn:this.onFlush
 						,icon:Ext.Msg.INFO
						,buttons:Ext.Msg.OK
 						});
 						
 					} ,// eo function onSuccess
 					onFlush:function(form,action){
 						document.location.href="fcbm.do?method=show";
 					},
 					onFailure:function(form, action) {
 							this.showError(action.response.responseText);
							}, // eo function onFailure
							showError:function(msg, title) {
									title = title || 'Error';
									Ext.Msg.show({
									title:title
									,msg:msg
									,modal:true
									,icon:Ext.Msg.ERROR
									,buttons:Ext.Msg.OK
									});
							}, // eo function showError
					reset:function(){
						this.ownerCt.close();
					}
			
	});

	Ext.reg('Adform', Tenpay.Adform);
	
	var adbtn = Ext.get("adBtn");
	adbtn.on("click", function(){
	
		var w = new Ext.Window({
		 
		  	 layout:'fit'
		  	 ,plain:true
		  	 ,width:500
		  	 ,height:300
		  	 ,title:'新增负载均衡器信息'
		  	 ,draggable:true
		  	 ,closeable:true
		  	 ,buttonAlign:'center'
		  	 ,model:true
		  	 ,items:{
		  	 	id:'adform'
		  	 	,xtype:'Adform'
		  	 }
		 });
		w.show();
         
	});
});

----------------------------------------------------------------------------------------------------------------
/*

 * Ext JS Library 2.0.2

 * Copyright(c) 2006-2008, Ext JS, LLC.

 * [email protected]

 * 

 * http://extjs.com/license

 */
    Ext.namespace("Tenpay");
    Tenpay.Form = Ext.extend(Ext.form.FormPanel,{

                frame:true,
                url:'dispatch',
                plain:true,
                labelWidth:120,
                labelAlign:"center",
                initComponent:function(){
                    
                    Ext.apply(this, {
                        bodyStyle:"padding:5px 5px 0",
                        monitorValid:true,
                        defaults:{xtype:'textfield',width:200},
                        items:[{
                            fieldLabel:"编号",
                            name:"fcbm_index",
                            allowBlank:false
                        },{
                            fieldLabel:"负载均衡器状态",
                            name:"fcbm_real_status",
                            allowBlank:false
                        },{
                            fieldLabel:"自动切换时间(秒)",
                            name:"fcbm_auto_time",
                            allowBlank:false
                        },{
                            fieldLabel:"最大空闲连接数",
                            name: "fcbm_max_spare",
                            allowBlank:false
                        },{
                            fieldLabel:"最大连接数",
                            name:"fcbm_max_conn",
                            allowBlank:false
                        },{
                            xtype:"datefield",
                            fieldLabel:"配置信息刷新时间",
                            name:"fcbm_flush_time",
                            altFormats: 'Y-m-d H:i:s',
                            format: 'Y-m-d H:i:s',
                            allowBlank:false
                        },{
                            fieldLabel:"连接服务器列表",
                            name:"fcbm_svr_list",
                            allowBlank:false
                        },{
                            fieldLabel:"允许访问客户端列表IP列表",
                            name:"fcbm_cli_list",
                            allowBlank:false
                        },{
                            fieldLabel:"允许访问的交易类型列表",
                            name:"fcbm_tran_list",
                            allowBlank:false
                        },{
                            fieldLabel:"停止状态应答包",
                            name:"fcbm_stop_resp",
                            allowBlank:false,
                            anchor:"80%"
                    },{
                        
                            xtype:"hidden",
                            name:"objectId",
                            hidden:true,
                            hiddenLabel:true
                            //value:"object_id"
                    }], 
                    
                    
                    buttons: [{
                        text :"确定",
                        handler:this.submit,
                        scope:this,
                        formBind:true
                    },
                    {
                        text     :"取消",
                        scope:this,
                        handler  : this.reset
                    }]
                    });
                
                Tenpay.Form.superclass.initComponent.apply(this, arguments);                
                }
                ,onRender:function() {
 
                // call parent
                 Tenpay.Form.superclass.onRender.apply(this, arguments);
 
                // set wait message target
                this.getForm().waitMsgTarget = this.getEl();
     
                }, // eo function onRender

                onLoadClick:function() {
                    this.load({
                    url:this.url
                    ,waitMsg:'Loading...'
                    ,params:{cmd:'load'}
                    });
                    // any additional load click processing here
                 } ,
                 // eo function onLoadClick
                  submit:function() {
                    if(this.getForm().isDirty())
                    {
                        this.getForm().submit({
                        url:this.url
                        ,scope:this
                        ,success:this.onSuccess
                        ,failure:this.onFailure
                        ,params:{cmd:'cfg'}
                        ,waitMsg:'正在保存,请稍候....'
                        });
                    }
                    },
                    // eo function submit
                    onSuccess:function(form, action) {
                        Ext.Msg.show({
                        title:'修改成功'
                        ,msg:'修改成功!'
                        ,modal:true
                        ,scope:this
                        ,fn:this.onFlush
                        ,icon:Ext.Msg.INFO
                        ,buttons:Ext.Msg.OK
                        });
                        
                    } ,// eo function onSuccess
                    onFlush:function(form,action){
                        document.location.href="fcbmcfg.do?method=show";
                            //Ext.Ajax.request({url:"fcbm.do" , method:"POST" ,  params:{method:"show"}}) ;
//                          this.getForm().submit({
//                              url:'fcbm'
//                              ,scope:this
//                              ,params:{method:'show'}
//                              ,waitMsg:'ҳ����ת�У����Ժ�...'
//                          });
                    },
                    onFailure:function(form, action) {
                            this.showError(action.response.responseText);
                            }, // eo function onFailure
                            showError:function(msg, title) {
                                    title = title || 'Error';
                                    Ext.Msg.show({
                                    title:title
                                    ,msg:msg
                                    ,modal:true
                                    ,icon:Ext.Msg.ERROR
                                    ,buttons:Ext.Msg.OK
                                    });
                            }, // eo function showError
                    reset:function(){
                        this.ownerCt.close();
                    }
                },this);
                //end extends
                
        // register xtype
        Ext.reg('fcForm', Tenpay.Form);


Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';
    Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';
    var isload = true;
    var bts;
    var tt;
    var jsData = Ext.get('datas');
    if(jsData.dom.value=='' || jsData.dom.value=="")
    {
        isload = false;
    }
  
   if(isload)
   {
    bts = Ext.DomQuery.select("span input[type=button]");
    tt = Ext.util.JSON.decode(jsData.dom.value);
    Ext.each(bts,function(obj){
            var btn = Ext.get(obj['id']);
            btn.on("click",function(){
                    
                    var w= new Ext.Window({
            
                                layout:'fit',
                                plain:true,
                                width:500,
                                height:410,
                                title: '编辑负载均衡器信息',
                                draggable: true�,
                                closable: true,
                                //closeAction:"hide",
                                buttonAlign:'center',
                                modal: true,
                                items:{
                                    id:'fcformload', 
                                    xtype:'fcForm'
                                },
                                listeners:{"show":function() {
                                    var form = Ext.getCmp('fcformload').getForm();
                                    form.setValues(tt[btn.id]);
                                 }}
                        });
                        w.show();
                        
            },this);
    });
    
    
    var as = Ext.DomQuery.select("span a");
    Ext.each(as,function(obj){
    
        
         var a = Ext.get(obj['id']);
         var dp = Ext.get('d'+a.id);
         a.on("click",function(){
                var win =new Ext.Window({
                
                                layout:'fit',
                                plain:true,
                                title:'查看负载均衡器配置信息',
                                width:400,
                                autoHeight:true,
                                html:dp.dom.innerHTML,
                                buttons:[{
                                    text:"关闭",
                                    handler:function(){
                                        win.hide();
                                    },
                                    scope:this
                                }]
                });
                win.show(a);
         });
    },this);
   }
    
});

 

你可能感兴趣的:(json,应用服务器,Ajax,ext,prototype)