country.js

ext-demo,ext简单示例

Ext.onReady(function(){
	var myPageSize = 10;
	
	var validFlagArray = [['Y','有效'],['N','无效']];
	
	var fieldName = "";
	
    // shorthand alias
    var fm = Ext.form, Ed = Ext.grid.GridEditor;
    
    //we enable the QuickTips for the later Pagebar
    Ext.QuickTips.init();
    
   /************************************************************
	* Display the result in page
    * the column model has information about grid columns
    * dataIndex maps the column to the specific data field in
    * the data store (created below)
    ************************************************************/
    var cm = new Ext.grid.ColumnModel([{
           id: 'id',
           header: "Identify",
           dataIndex: 'id',
           width: 50,
           hidden: true
        },{
           header: "国别名称",
           dataIndex: 'countryName',
           width: 170
        },{
           header: "国别代码",
           dataIndex: 'countryCode',
           width: 70
        },{
           header: "有效标记",
           dataIndex: 'validFlag',
           width: 70
        },{
           header: "创建者",
           dataIndex: 'createUser',
           width: 100
        },{
           header: "创建时间",
           dataIndex: 'createDate',
           width: 110
        },{
           header: "修改者",
           dataIndex: 'updateUser',
           width: 100
        },{
           header: "修改时间",
           dataIndex: 'updateDate',
           width: 110
        }
       ]);
      

    // by default columns are sortable
    cm.defaultSortable = false;

   /************************************************************
    * connect to backend - grid - core part
    * create the Data Store
    *   connect with backend and list the result in page
    *   through JSON format
    ************************************************************/
    var ds = new Ext.data.Store({
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.ScriptTagProxy({
		   url: window.location.pathname + "/../countryAction.do?method=listOrDelete"
        }),
        // create reader that reads the Topic records
        reader: new Ext.data.JsonReader({
            root: 'results',
            totalProperty: 'totalCount',
            id: 'id'
        }, [
            {name: 'id'},
            {name: 'countryName'},
			{name: 'countryCode'},	
			{name: 'validFlag'},
			{name: 'createUser'},
			{name: 'createDate'},
			{name: 'updateUser'},
			{name: 'updateDate'}
        ]),

        // turn on remote sorting
        remoteSort: true
    });

    ds.setDefaultSort('createDate', 'ASC');

    // create the editor grid
    var grid = new Ext.grid.EditorGrid('editor-grid', {
        ds: ds,
        cm: cm,
        //selModel: new Ext.grid.CellSelectionModel(),
        selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
        enableColLock:false
    });

    var layout = Ext.BorderLayout.create({
        center: {
            margins:{left:2,top:3,right:2,bottom:3},
            panels: [new Ext.GridPanel(grid)]
        }
    }, 'grid-panel');

    // render it
    grid.render();
 
   /************************************************************
    * create header panel 
    * add filter field - search function
    ************************************************************/
	var gridHead = grid.getView().getHeaderPanel(true);
	var tb = new Ext.Toolbar(gridHead);

	filterButton = new Ext.Toolbar.MenuButton({
	    icon: 'public/image/list-items.gif',
	    cls: 'x-btn-text-icon',
		text: '选择过滤器',
		tooltip: 'Select one of filter',
		menu: {
			items: [
				new Ext.menu.CheckItem({ text: '国别名称', value: 'countryName', checked: false, group: 'filter', checkHandler: onItemCheck }),
				new Ext.menu.CheckItem({ text: '国别代码', value: 'countryCode', checked: false, group: 'filter', checkHandler: onItemCheck }),
				new Ext.menu.CheckItem({ text: '有效标记', value: 'validFlag', checked: false, group: 'filter', checkHandler: onItemCheck })	
			]},
		minWidth: 105
	});
	tb.add(filterButton);

	// Create the filter field
	var filter = Ext.get(tb.addDom({ // add a DomHelper config to the toolbar and return a reference to it
	     tag: 'input', 
	     type: 'text', 
	     size: '30', 
	     value: '', 
		 style: 'background: #F0F0F9;'
	}).el);			

    // press enter keyboard
    filter.on('keypress', function(e) { // setup an onkeypress event handler
      if(e.getKey() == e.ENTER && this.getValue().length > 0) {// listen for the ENTER key
          ds.load({params:{start:0, limit:myPageSize}});
      }
    });
    
    filter.on('keyup', function(e) { // setup an onkeyup event handler
      if(e.getKey() == e.BACKSPACE && this.getValue().length === 0) {// listen for the BACKSPACE key and the field being empty
		  ds.load({params:{start:0, limit:myPageSize}});
      }
    });
 
    // Update search button text with selected item
	function onItemCheck(item, checked)
	{
		if(checked) {
			filterButton.setText(item.text + ':');
			fieldName = item.value;
		}
	}

   /************************************************************
    * create footer panel 
    *    actions and paging
    ************************************************************/ 
    var gridFoot = grid.getView().getFooterPanel(true);

    // add a paging toolbar to the grid's footer
    var paging = new Ext.PagingToolbar(gridFoot, ds, {
        pageSize: myPageSize,
        displayInfo: true,
        displayMsg: '共 {2} 项. 当前显示第 {0} - {1}项',
        emptyMsg: "没有记录"
    });
    // add the detailed add button
    paging.add('-', {
        pressed: true,
        enableToggle:true,
        text: '新增',
        cls: '',
        toggleHandler: doAdd
    });    
    // add the detailed delete button
    paging.add('-', {
        pressed: true,
        enableToggle:true,
        text: '删除',
        cls: '',
        toggleHandler: doDel
    });  
    // --- end -- create foot panel   

   /************************************************************
    * load parameter to backend 
    *    have beforelaod function
    ************************************************************/
	ds.on('beforeload', function() {
	  ds.baseParams = { // modify the baseParams setting for this request
	    filterValue: filter.getValue(),// retrieve the value of the filter input and assign it to a property named filter 
	    filterTxt: filterButton.getText(),
		fieldName: fieldName
	  };
	});
    // trigger the data store load
    ds.load({params:{start:0, limit:myPageSize}});

   /************************************************************
    * Action - delete
    *   start to handle delete function
    *   need confirm to delete
    ************************************************************/	
    function doDel(){
        var m = grid.getSelections();
        if(m.length > 0)
        {
        	Ext.MessageBox.confirm('确认', '确认要删除吗?' , doDel2);	
        }
        else
        {
        	Ext.MessageBox.alert('错误', '请选中需要删除的国别');
        }
    }     
      
    function doDel2(btn)
	{
       if(btn == 'yes')
       {	
			var m = grid.getSelections();
			var jsonData = "[";
	        for(var i = 0, len = m.length; i < len; i++){        		
				var ss = "{\"id\":\"" + m[i].get("id") + "\"}";

				if(i==0)
	           		jsonData = jsonData + ss ;
			   	else
					jsonData = jsonData + "," + ss;	
				ds.remove(m[i]);								
	        }	
			jsonData = jsonData + "]";
			ds.load({params:{start:0, limit:myPageSize, del:true, delData:jsonData}});		
		}
	}
	
   /************************************************************
    *  Add an "clickoutside" event to a Grid.
    *     @param grid {Ext.grid.Grid} The grid to add a clickoutside event to.
    *     The handler is passed the Event and the Grid.
    ************************************************************/	
    function addClickOutsideEvent(grid) {
    	if (!grid.events.clickoutside) {