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

sponsored links
  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; 
} 
});
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of ext (add, delete, change, search, export excel)

  • ruby 1.9, break the rules of language change

    Tip: If reproduced please specify the author Small Game And provenance In ruby 1.9, the statement break some rules changes, animals = Array.new . push ( "dog") # Does not work in Ruby 1.8 . push ( "cow") . push ( "cat") . sor

  • jQuery / Ajax / PHP / Json example of an integrated collection

    jQuery excellent Javascript is a framework for a good js packaging, provides a lot of convenient features. jQuery for ajax packaging can be called outstanding. jQuery can json file transfer protocol to transmit data (similar to xml, but also significant t

  • js version of Ant Colony Algorithm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb

  • Verification Code Rails implementation continued

    http://sanyking.javaeye.com/blog/120339 Connect with the address above on this website are one of the other way regarding the implementation Verification Code article, my article are based on the above completed, and the world is one big copy article, loo

  • Play flash page 3 (javascript script swfobject.js1)

    / ** * SWFObject v1.5: Flash Player detection and embed - http://blog.deconcept.com/swfobject/ * * SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License: * Http://www.opensource.org/licenses/mit-license.php * * / if (typeof deconc ...

  • javascript built-in functions Info

    48. In the old browsers do not perform this JS :<!-- //--> 49. To quote a document-style JS: <script type="text/javascript" src="/blog/aaa.js"> </ script> 50. Specified in the script does not support the browser displ

  • Imitation Java type HashMap implementation of JavaScript

    Imitation Java type HashMap implementation of JavaScript

  • Javascript object inheritance

    Javascript object inheritance

  • Javascript Object Model

    Javascript Object Model

  • Hibernate II Study Notes

    11. Many-to-many Of many that can be converted to two one-to-many <set name="students" table="teacher_student"> <key column="techer_id"/> <many-to-many column="student_id"/> </set> many-to-many data only from one end of the mainten

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries