country.js

ext-demo,ext简单示例

	    	grid.addEvents({"clickoutside": true});
	    }
	    if (!Ext.grid.Grid.prototype.handleClickOutside) {
	    	Ext.grid.Grid.override({
	    		handleClickOutside: function(e) {
		            var p = Ext.get(e.getTarget()).findParent(".x-grid-container");
		            if (p != this.container.dom) {
				        this.fireEvent("clickoutside", e, grid);
		            }
	    		}
	    	});
	    }
        Ext.get(document.body).on("click", grid.handleClickOutside, grid);
    }

   /************************************************************
    * Create a new dialog - reuse by create and edit part
    ************************************************************/    
    function createNewDialog(dialogName) {
        var thisDialog = new Ext.LayoutDialog(dialogName, {
                modal:true,
                autoTabs:true,
                proxyDrag:true,
                resizable:false,
                width: 480,
                height: 302,
                shadow:true,
				center: {
                    autoScroll: true,
                    tabPosition: 'top',
                    closeOnTab: true,
                    alwaysShowTabs: false
                }
        });
        thisDialog.addKeyListener(27, thisDialog.hide, thisDialog); 
        thisDialog.addButton('取消', function() {thisDialog.hide();});
        
        return thisDialog;
    };
    
   /************************************************************
    * Action - update
    *   handle double click 
    *   user select one of the item and want to update it
    ************************************************************/
    grid.on('rowdblclick', function(grid, rowIndex, e) {
	    var selectedId = ds.data.items[rowIndex].id;

	    // get information from DB and set form now...
		var country_data = new Ext.data.Store({
		    proxy: new Ext.data.ScriptTagProxy({url: window.location.pathname + "/../countryAction.do?method=loadData&id=" + selectedId}),
			reader: new Ext.data.JsonReader({},['id','countryName','countryCode','validFlag']),
			remoteSort: false
		});
		
		country_data.on('load', function() {
		    
		    // set value now
		    var updateId = country_data.reader.jsonData.id;
		    countryName_show.setValue(country_data.reader.jsonData.countryName);
		    countryCode_show.setValue(country_data.reader.jsonData.countryCode);
		    validFlag_show.setValue(country_data.reader.jsonData.validFlag);
		    
			var updateInstanceDlg;        
	        if (!updateInstanceDlg) {
	            updateInstanceDlg = createNewDialog("a-updateInstance-dlg"); 
	            updateInstanceDlg.addButton('更新', function() {       

			    	// submit now... all the form information are submit to the server
			    	// handle response after that...
			    	if (form_instance_update.isValid()) {
					    form_instance_update.submit({
							
					        params:{id : updateId},
							waitMsg:'正在更新国别信息...',
							reset: false,
							failure: function(form_instance_update, action) {
							    Ext.MessageBox.alert('错误', decodeURI(action.result.errorInfo));
							},
							success: function(form_instance_update, action) {
							   	Ext.MessageBox.alert('确认', decodeURI(action.result.info) );
							    updateInstanceDlg.hide();
							    ds.load({params:{start:0, limit:myPageSize}});
							}
						});					
					}else{
						Ext.MessageBox.alert('错误', '请修正标记出的错误.');
					}	    	
			    });
	           	     
	            var layout = updateInstanceDlg.getLayout();
	            layout.beginUpdate();
	            layout.add('center', new Ext.ContentPanel('a-updateInstance-inner', {title: '更新国别信息'}));
	            layout.endUpdate(); 
	            
	            updateInstanceDlg.show();
	        }  
		}); 
		
		country_data.load();	    
	});
	
	
	 
   /************************************************************
    * Action - add
    *   start to handle add function
    *   new page appear and allow to submit
    ************************************************************/
    
   /************************************************************
    *  To create add new account dialog now....
    ************************************************************/   
    function doAdd(){
        var aAddInstanceDlg;
        
        if (!aAddInstanceDlg) {
            aAddInstanceDlg = createNewDialog("a-addInstance-dlg");       
            aAddInstanceDlg.addButton('重置', resetForm, aAddInstanceDlg);
            aAddInstanceDlg.addButton('保存', function() {       

		    	// submit now... all the form information are submit to the server
		    	// handle response after that...
		    	if (form_instance_create.isValid()) {
				    form_instance_create.submit({
						waitMsg:'正在保存国别信息...',
						reset: false,
						failure: function(form_instance_create, action) {
						    Ext.MessageBox.alert('错误', decodeURI(action.result.errorInfo));
						},
						success: function(form_instance_create, action) {
						    Ext.MessageBox.alert('确认', decodeURI(action.result.info));
						    aAddInstanceDlg.hide();
							
							form_instance_create.reset();
							
						    ds.load({params:{start:0, limit:myPageSize}});
						}
					});					
				}else{
					Ext.MessageBox.alert('错误', '请处理标记的错误.');
				}	    	
		    });

			var layout = aAddInstanceDlg.getLayout();
            layout.beginUpdate();
            layout.add('center', new Ext.ContentPanel('a-addInstance-inner', {title: '创建国别信息'}));
            layout.endUpdate(); 
            
            aAddInstanceDlg.show();
	    };        
	}
	
   /************************************************************
    * Form information - pop-up dialog
	* turn on validation errors beside the field globally
	************************************************************/
   	Ext.form.Field.prototype.msgTarget = 'side';
   	Ext.form.Field.prototype.height = 20;
	Ext.form.Field.prototype.fieldClass = 'text-field-default';
	Ext.form.Field.prototype.focusClass = 'text-field-focus';
	Ext.form.Field.prototype.invalidClass = 'text-field-invalid';

    /************************************************************
    * Create new form to hold user enter information
    * This form is used to create new instance
    ************************************************************/  
    var countryName_tf = new Ext.form.TextField({
        fieldLabel: '国别名称',
        name: 'countryName',
		allowBlank: false
    }); 
    var countryCode_tf = new Ext.form.TextField({
        fieldLabel: '国别代码',
        name: 'countryCode',
		allowBlank: false
    }); 
    
    var form_instance_create = new Ext.form.Form({
        labelAlign: 'right',
		url: window.location.pathname + "/../countryAction.do?method=createData"
    });

    form_instance_create.column({width: 430, labelWidth:120, style:'margin-left:8px;margin-top:8px'});
    form_instance_create.fieldset(
        {id:'desc', legend:'填写新的国别信息'},
        countryName_tf,
        countryCode_tf
	);
	
    form_instance_create.applyIfToFields({width:255});
    form_instance_create.render('a-addInstance-form');
    form_instance_create.end();
    
    resetForm = function() {
		countryName_tf.setValue('');
		countryCode_tf.setValue('');
	};
     

    /************************************************************
    * Create form to hold user enter information
    * This form is used to update current instance
    ************************************************************/   
    var countryName_show = new Ext.form.TextField({
        fieldLabel: '国别名称',
        name: 'countryName',
		allowBlank: false
    }); 
	
    var countryCode_show = new Ext.form.TextField({
        fieldLabel: '国别代码',
        name: 'countryCode',
		allowBlank: false
    }); 
	
    var validFlag_show = new Ext.form.ComboBox({
        store: new Ext.data.SimpleStore({
            fields: ['stateCode','stateName'],
            data : validFlagArray
        }),		
		//name: 'validFlag',
		hiddenName:'validFlag',
		fieldLabel: '有效标记',
        displayField:'stateName',
		valueField : 'stateCode',
        typeAhead: true,
		editable: false,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'选择一种状态...',
        selectOnFocus:true,
        resizable:false
    });	

	
	
    var form_instance_update = new Ext.form.Form({
        labelAlign: 'right',
		url: window.location.pathname + "/../countryAction.do?method=updateData"
    });

    form_instance_update.column({width: 430, labelWidth:120, style:'margin-left:8px;margin-top:8px'});
    form_instance_update.fieldset(
        {id:'', legend:'更新国别信息'},
        countryName_show,
        countryCode_show,
        validFlag_show
	);
	
    form_instance_update.applyIfToFields({width:255});
    form_instance_update.render('a-updateInstance-form');
    form_instance_update.end();
    
});