ext (add, delete, change, search, export excel)

Aug 26 posted in Web (RSS), comments.
Advertisements
  The following grid for the expansion of the     Code  
/** 
* @auther qinya
* @class   Ext.ux.GridExtend 
*   General  grid 
*/ 
Ext.ux.GridExtend=function(config){ 
    Ext.QuickTips.init(); 
    this.config=config;


    this.filters=this.config.filters||''; 
     
     
    /** 
     * @param {String} 
     *   Show list  id 
     */ 
    this.el=this.config.el||document.body; 
    /** 
     * @param   {String} 
     *   Read the edited form of the data  url 
     */ 
    this.editUrl=this.config.editUrl; 
    /** 
     * @param   {String} 
     *   Read the edited form of the data  url 
     */ 
    this.deleteUrl=this.config.deleteUrl; 
    /** 
     * @param   {String} 
     *   Read the list of data  url 
     */ 
    this.storeUrl=this.config.storeUrl; 
    /** 
     * @param   {String} 
     *   Add to the list of data stored  url 
     */ 
    this.formSaveUrl=this.config.formSaveUrl; 
    /** 
     * @param   {String} 
     *   The title list   
     */ 
    this.title=this.config.title||''; 
    /** 
     * @param   {Array} 
     *   Top of the list the status bar   
     */ 
    this.tbar=this.config.tbar||[{//grid  Top of the column   
            text:'  Add ', / / name of the button   
            tooltip:'  Add data ', / / mouse over the button prompts   
            iconCls:'add',                  //  Button class diagram   
            handler:this.newInfo.createDelegate(this)           //  Treatment triggered when the button is clicked, a function of time   
        },'-',{//'-'  Intervals for multi-character button   
            text:'  Delete ', / / delete button Name   
            tooltip:'  Delete data ', / / mouse over the button prompts   
            iconCls:'remove',               //  Button class diagram   
            handler:this.handlerDelete.createDelegate(this)         //  Treatment triggered when the button is clicked, a function of time   
        },'-',{ 
            text:'  Export Excel ', / / delete the name of the button   
            tooltip:'  Export Excel ', / / mouse over the button prompts   
            iconCls:'exportExcel', 
            handler:this.exportExcel.createDelegate(this)           //  Treatment triggered when the button is clicked, a function of time   
        }];


    /** 
     * @param     Checkbox object   
     */ 
    this.sm=this.config.sm||new Ext.grid.CheckboxSelectionModel({//start Ext.grid.CheckboxSelectionModel 
        singleSelect:false                  //  It can only choose one   
    }); 
    /** 
     * @param   {Array} 
     *   The list in front of the column data   
     */ 
    this.cmDataArrayBefore=[//start Ext.grid.ColumnModel 
        //defaultSortable:true,             //  Default order   
        new Ext.grid.RowNumberer(),         //  Serial number data function   
        this.sm 
    ]; 
    /** 
     * @param   {Array} 
     *  Display the contents of the data read out from the background, so this data in the  dataIndex  Attribute with the  <br> 
     *   Read from the back field to be consistent   
     */ 
    this.cmDataArray=this.config.cmDataArray||[]; 
    /** 
     * @param   {Array} 
     *   The back of the list column data   
     */ 
    this.cmDataArrayAfter=this.config.cmDataArrayAfter||[]; 
    /** 
     * @param   {Ext.grid.ColumnModel} 
     *   List of data fields   
     */ 
    this.cm=this.config.cm||new Ext.grid.ColumnModel( 
            this.cmDataArrayBefore.concat(this.cmDataArray).concat(this.cmDataArrayAfter) 
    );//end Ext.grid.ColumnModel     
     
    /** 
     * @param   {Array} 
     *   GridStore data field is set to read data objects   
     */ 
    this.gridStoreFields=this.config.gridStoreFields||new Array(); 
     
    /* 
     *   If no data this.gridStoreFields  ,  In the this.cmDataArray  dataIndex  Property values  <br> 
     *   Objects in the array given gridStoreFields  name  Property values   
     */ 
    if(this.gridStoreFields.length==0){ 
        for(var i=0,len=this.cmDataArray.length;i<len;i++){ 
            this.gridStoreFields[i]={name:this.cmDataArray[i].dataIndex}; 
        } 
    } 
     
    /** 
     * @param   {new Ext.data.Store} 
     *   Read from a list of the contents of the background   
     */ 
    this.gridStore=this.config.gridStore||new Ext.data.Store({//start Ext.data.Store 
        proxy:new Ext.data.HttpProxy({ 
            url:this.storeUrl                   //  Read data  url 
        }), 
        reader:new Ext.data.JsonReader({//start Ext.data.JsonReader 
            root:'rows',                    //  The properties of stored data   
            totalProperty:'results',        //  Total number of pages   
            id:'uniqueCode'                 //  Id value of each line   
        },                                  //end Ext.data.JsonReader 
        this.gridStoreFields) 
    });//end Ext.data.Store 
     
    this.gridStore.load({params:{start: 0, limit: 10}}); 
    /** 
     * @param   {Ext.PagingToolbar} 
     *   The status bar at the bottom   
     */ 
    this.bbar=this.config.bbar||new Ext.PagingToolbar({     //  The bottom of the grid toolbar to add page   
            pageSize:10,                    //  The data show the number of articles   
            store:this.gridStore,           //  Select the button when the page loaded into the data grid   
            displayInfo:true,               //  Set whether to display the information page column   
            displayMsg:'  Display   {0}   Article to   {1}   Records, a total of   {2}   Article ', / / message of pages of information column   
            emptyMsg:"  No record "/ / When there is no record of the information to be displayed when   
        });//end bbar 
    /** 
     *   If you want to set this parameter must be set in the corresponding cm  id 
     */ 
    this.autoExpandColumn=this.config.autoExpandColumn||''; 
         
    /** 
     * @param   {Object} 
     *   By default, there is such a show, if not for  false 
     *   Must contain the following parameters  :<br> 
     * loadingEL        {String}      The content is displayed when the page loads  id<br> 
     * loadingMaskEl    {String}      Starting to prove the contents of the  id<br> 
     */ 
    this.loadingMark=this.config.loadingMark||{ 
        loadingEL:'loading', 
        loadingMaskEL:'loading-mask' 
    }; 
    /** 
     * @param   {Ext.grid.GridPanel} 
     * @private 
     */ 
    this.grid=this.config.gridStore||new Ext.grid.GridPanel({ 
        //el:this.el,                           //  Shows the layer grid object  ID. 
        store:this.gridStore,                   // grid  Loading data  . 
        viewConfig:{ 
            autoFill:true, 
            deferEmptyText:'  Please wait  ...', 
            emptyText:'  No data  ', 
            enableRowBody:true 
        }, 
        sm:this.sm,                             //  Added before each line a set of data  checkBox 
        height:Ext.get(this.el).getComputedHeight(), 
        //autoHeight:true, 
        loadMask:true, 
        maskDisabled:true, 
        cm:this.cm,                             //  Setting the field  . 
        title:this.title,                       //  Title Name  . 
        iconCls:'icon-grid',                //  Css class of the title picture before   
        autoExpandColumn:this.autoExpandColumn, 
        plugins: this.filters, 
        bbar:this.bbar, 
        tbar:this.tbar 
    }); 
     
    this.formFields=this.config.formFields||new Array(); 
     
    /** 
     *   Double-click the data events, pop up a layer of data Edit this entry   
     * @param   grid          This list of objects   
     * @param   rowIndex      The number of rows in the list   
     * @param   e             This event triggered the event object   
     */ 
    this.rowdblclick=this.config.rowdblclick||function(grid, rowIndex, e){ 
        var selectId=this.gridStore.data.items[rowIndex].id; 
        this.editInfo(selectId); 
    }; 
    this.grid.on('rowdblclick',this.rowdblclick.createDelegate(this)); 
    this.grid.render(this.el); 
     
    //  Js is loaded when removed  loading  Contents page and fade in   
    if(this.loadingMark){ 
        setTimeout(function(){ 
            Ext.get(this.loadingMark.loadingEL).remove(); 
            Ext.get(this.loadingMark.loadingMaskEL).fadeOut({remove:true}); 
        }.createDelegate(this), 250); 
    }    
}


Ext.ux.GridExtend.prototype={ 
    /** 
     *   Load the data form the form   
     * @param   selectId      Select this provision only code the data, this parameter is sent to the background processing   
     */ 
    editInfo:function(selectId){ 
        var form=this.getForm(); 
         
        form.form.load({//start load   Parameter settings   
            url:this.editUrl, 
            params:{ 
                uniqueCode:selectId 
            }, 
            waitMsg:'Loading..' 
        });//end load   Parameter settings   
         
        this.formWindow(form,'  Edit  '); 
    }, 
    getForm:function(){ 
        //  Error message on the right   
        Ext.form.Field.prototype.msgTarget = 'side'; 
        //var formSaveUrl=this.formSaveUrl; 
        //var formFields=this.formFields; 
        var formSaveUrl=Ext.clone(this.formSaveUrl); 
        var formFields=Ext.clone(this.formFields); 
         
        //  Instantiated form panel   
        var form=new Ext.form.FormPanel({//start Ext.form.FormPanel 
            baseCls:'x-plain', 
            url:this.formSaveUrl, 
            frame:true, 
            id:'form', 
            items:formFields 
        });//end Ext.form.FormPanel 
         
        return form; 
    }, 
    /** 
     *   Loaded form of the form window   
     * @param   form              To load  form 
     * @param   titlePre          Title prefix   
     */ 
    formWindow:function(form,titlePre){ 
        //  Example of window   
        this.window=new Ext.Window({//start Ext.Window 
            title:titlePre+'  Task List  ', 
            width:500, 
            height:500, 
            minWidth:300, 
            minHeight:300, 
            layout:'fit', 
            //closeAction:'hide', 
            plain:true, 
            bodyStyle:'padding:5px', 
            iconCls:'form', 
            buttonAlign:'center', 
            items:form, 
            modal:true, 
             
            buttons:[{                          //  Button   
                text:'  Save  ', 
                handler:(function(){//start function  Button handler   
                    if(form.getForm().isValid()){//  Whether through the inspection form, the form is submitted by the Select  ,  Otherwise, an error window pops up   
                        form.getForm().submit({ 
                            scope:this, 
                            waitMsg:'  Save Data  ...', 
                            success:function(form,action){ 
                                Ext.MessageBox.alert('  News  :','  Successfully saved  '); 
                                this.grid.store.reload(); 
                                this.window.close() ; 
                            }, 
                            failure:function(form,action){ 
                                Ext.MessageBox.alert('  Errors  :', action.result.errors); 
                                this.window.close() ; 
                            } 
                        }); 
                    }else{ 
                        Ext.MessageBox.alert('  Errors  :','  Fill out the form error  !'); 
                    } 
                     
                }).createDelegate(this)//end function                
            },{ 
                text:'  Reset  ', 
                handler:function(){//start function  Button handler   
                    form.getForm().reset(); 
                }//end function 
            }] 
        });//end Ext.Window


        //  Display window   
        this.window.show(); 
    }, 
    /** 
     *   Add new data function list   
     */ 
    newInfo:function(){//start newTableInfo 
        this.formWindow(this.getForm(),'  Add  ');        
    },//end newTableInfo 
    /** 
     *   Delete data, and the only code to send this data to the background   
     */ 
    handlerDelete:function(){//start deleteRecord 
        this.sendId(this.deleteUrl); 
         
    },//end deleteRecord 
    sendId:function(url){//start deleteRecord 
        var ids=new Array();                //  Array storage uniqueCode   
        var records=this.grid.selModel.selections.items;//grid  In the selected data type  Array 
        for(var i = 0, len = records.length; i < len; i++){ 
            ids[ids.length]=records[i].id; //  Id give the data  ids  Array   
        } 
        Ext.Ajax.request({                  //  Ajax call to send a request to the background   
            scope:this, 
            url:url,                    //  Delete grid data  url. 
            success:function(transport){                //  After the success of the returned function handle   
                var oXmlDom=transport.responseText; 
                if(oXmlDom!=''){ 
                     
                    var content=eval(oXmlDom); 
                    Ext.MessageBox.alert("  Errors  :",content.errors) 
                }else{ 
                    this.grid.store.reload();       //  Reload the data in the grid   
                } 
            }, 
            failure:function(){             //  Remove the failed deal with the background function   
                Ext.MessageBox.alert('  Message ',' Delete failed  !'); 
            } 
        }); 
         
    },//end deleteRecord 
    exportExcel:function(){ 
        document.location.href='http://localhost:8080/chalk/hf/sortManager.do?action=export'; 
    } 
} 
  Here is before you add the js, mainly to deal with some  ext2.0  Some effect, without also  ,  However, these effects may be less  

 

//  Local application filled pictures   
Ext.BLANK_IMAGE_URL='../resources/images/default/s.gif'; 
//  Ie the width of the default is not enough   
Ext.apply(Ext.MessageBox,{ 
    alert:function(title, msg, fn, scope){ 
        this.show({ 
            title : title, 
            msg : msg, 
            buttons: this.OK, 
            minWidth:200, 
            fn: fn, 
            scope : scope 
        }); 
        return this; 
    } 
}); 
Ext.menu.RangeMenu.prototype.icons = { 
      gt: '../resources/extendIamges/greater_then.png', 
      lt: '../resources/extendIamges/less_then.png', 
      eq: '../resources/extendIamges/equals.png' 
}; 
Ext.grid.filter.StringFilter.prototype.icon = '../resources/extendIamges/find.png';


/* 
*   Filter changes the data sent to the background model  . 
*   Cases :filter.[i][field].filter.[i][type].filter.[i][value].filter.[i][comparison]. 
* 
*/


Ext.grid.GridFilters.prototype.buildQuery=function(filters){ 
    var p = {}; 
        for(var i=0, len=filters.length; i<len; i++) { 
            var f = filters[i]; 
            var root = [this.paramPrefix, '[', i, ']'].join(''); 
            p[root + '[field]'] = f.field; 
            //  Modify here   
            var dataPrefix = root; 
            for(var key in f.data) { 
                p[[dataPrefix, '[', key, ']'].join('')] = f.data[key]; 
      } 
        } 
         
    return p; 
}


//  Added inspection function   
Ext.apply(Ext.form.VTypes, {     
    //  Time of inspection attributes   
    daterange: function(val, field) { 
        var date = field.parseDate(val); 
         
        var dispUpd = function(picker) { 
          var ad = picker.activeDate; 
          picker.activeDate = null; 
          picker.update(ad); 
        };


        //debugger; 
        if (field.startDateField) { 
          var sd = field.startDateField; 
          sd.maxValue = date; 
          if (sd.menu && sd.menu.picker) { 
            sd.menu.picker.maxDate = date; 
            dispUpd(sd.menu.picker); 
          } 
        } else if (field.endDateField) { 
          var ed = field.endDateField; 
          ed.minValue = date; 
          if (ed.menu && ed.menu.picker) { 
            ed.menu.picker.minDate = date; 
            dispUpd(ed.menu.picker); 
          } 
        }


        return true; 
} 
});