`

Extjs Formpanel code 例子

EXTAjax应用服务器jsonprototype 
阅读更多 
/*

 * Ext JS Library 2.0.2

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

 * licensing@extjs.com

 * 

 * 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.

 * licensing@extjs.com

 * 

 * 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);
   }
    
});
 
  • 大小: 121.9 KB
  • 大小: 106.3 KB
  • 大小: 98.7 KB
  • 大小: 116.5 KB
分享到：
| 过敏性鼻炎的治疗和保养
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extjs中的formPanel以及表单的应用

    FormPanel 是 ExtJS 中的一个核心组件，用于创建和处理表单元素，包括输入字段、按钮、选择框等。它提供了丰富的功能，如数据验证、远程提交、异步加载等，是构建用户交互界面的关键部分。 在ExtJS中，FormPanel是...

    Extjs4.1 小例子（适合extjs初学者学习使用）

    标题中的"Extjs4.1 小例子"意味着这个压缩包包含了一些基础的示例代码，旨在帮助初学者快速入门。通过这些小例子，你可以了解如何使用ExtJS 4.1来创建用户界面，包括布局管理、组件系统、数据绑定、事件处理等核心...

    Extjs例子Extjs例子

    Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子

    Extjs Extjs4.2.1 例子

    Extjs Extjs4.2.1 入门小例子 test1.jsp test2.jsp test3.jsp

    初学extjs的小例子

    这里面有三个extjs的小例子，其中testb.html和testc.html所实现的效果是一样的，只不过testb.html里面的控件全是用extjs创建的，而testc.html是extjs与jsp的结合。例子很简单，主要记录自己每天的成长经历！

    Extjs3.1例子源代码

    Extjs3.1例子源代码Extjs3.1例子源代码Extjs3.1例子源代码vv

    extjs四个例子，一个中文API

    新手学习，初学extjs时用刚刚好，里边有三个例子，还有一个我自己写的例子（简单粗暴动态菜单），还有一个中文API

    简单的两种Extjs formpanel加载数据的方式

    在这个例子中，`row.Note`是数据源中的值，它被赋给了`textarea`的`value`属性，从而显示在formpanel中。 ### 注意事项 1. **字段映射**：确保formpanel的字段与数据源的属性名称相匹配，这样才能正确地加载数据。...

    extjs动态表格例子

    extjs动态表格例子

    formpanel extjs

    extjs formpanel学习，秘诀，笔记

    FCKeditor结合extjs实例

    标题 "FCKeditor结合extjs实例" 描述的是一个实际项目中使用的技术组合，涉及到的主要是两个前端富文本编辑器库：FCKeditor 和 ExtJS。这个实例表明在开发企业级网站时，如何将这两者有效地整合以实现复杂的用户界面...

    extjs 简单分页例子

    在这个“EXTJS简单分页例子”中，我们将深入探讨EXTJS如何实现分页功能，以及如何与后台进行交互。 分页是Web应用中常见的数据展示方式，尤其在处理大量数据时，它可以提高页面加载速度并提供良好的用户体验。EXTJS...

    extjs+asp例子

    在这个"extjs+asp例子"中，我们将探讨如何整合这两个技术。 1. **ExtJS简介** ExtJS 提供了多种预定义的UI组件，如网格、表单、菜单、工具栏等，这些组件都具有高度可定制性和响应式设计。通过使用MVC（Model-View...

    SSH+ExtJs分页小例子

    在这个"SSH+ExtJs分页小例子"中，我们将探讨如何将这两种技术结合实现数据分页显示。 首先，我们来看NewsDAO.java文件。这个文件包含了两个关键方法：`findPageAll`和`totalRecord`。`findPageAll`方法实现了分页...

    ExtJS .net分页例子

    根据提供的标题“ExtJS .Net分页例子”，本文将详细介绍如何在.NET平台下使用ExtJS实现数据分页功能。ExtJS是一款强大的JavaScript库，用于构建复杂的前端应用，而.NET则是微软提供的一套开发框架，常用于服务器端...

    extjs 嵌入 ckeditor 例子

    在IT领域，ExtJS是一个强大的JavaScript框架，用于构建富客户端应用程序。它提供了丰富的组件库，使得开发者能够创建功能丰富的Web应用界面。而CKEditor则是一款知名的富文本编辑器，广泛用于网页内容的编辑和格式化...

    extjs简单例子

    这个“extjs简单例子”教程集合，显然旨在帮助初学者快速上手并理解ExtJS的基本概念和功能。下面，我们将详细探讨这些文件所涵盖的知识点。 1. **《TutorialIntroduction to Ext 2.0 (Chinese)》** 这个文档可能...

    Java ExtJs小例子

    Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子

    EXTJS Grid总结例子

    本总结例子将深入探讨EXTJS Grid的核心特性和使用方法，通过源代码分析，帮助开发者更好地理解和应用EXTJS Grid。 一、EXTJS Grid的基本结构 EXTJS Grid由多个部分组成，包括Store（数据存储）、Columns（列配置）...

    extjs官方例子

    extjs官方例子

Magicbox
Global site tag (gtag.js) - Google Analytics