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

  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;
}
});
分类:Web 时间:2010-08-26 人气:389
本文关键词: array document body config config sm tbar
分享到:
blog comments powered by Disqus

相关文章

  • . / Script / .. / config / .. / config / environment.rb: 8: solution 2009-08-11

    I use stand-alone-package programming ror to occur when an issue. / Script / .. / config / .. / config / environment.rb: 8: syntax error, unexpected ... ... ... ... Later in the / config / environment.rb in the eighth line of the can has been comment

  • Prototype extension Array, document, String, Function, Number 2010-11-20

    Array expansion <!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> <title> Exte

  • 基于Zend的Config机制的应用分析 2014-01-17

    本篇文章介绍了,基于Zend的Config机制的应用分析.需要的朋友参考下 Zend的Config类在Zend_Config_Ini 代码$config = new Zend_Config_Ini("/var/www/html/usvn/config/config.ini", "general"); date_default_timezone_set($config->timezone); USVN_ConsoleUtils::setLocale($confi

  • C + + class to read configuration file Config prepared 2010-10-05

    Foreigner to write a piece of code to write in the Server reads the configuration file of this class more practical //Config.h #pragma once #include <string> #include <map> #include <iostream> #include <fstream> #include <sstrea

  • Config DRBD on Redhat 5.6 32bit VM 2011-06-22

    1 Linux disk configuration 1 The Linux machine should better has second disk, because we don't want to sync the system partition. 2 The partition DRBD used to sync should have same size. 3 The partition DRBD used must be not mounted arbitrarily, beca

  • android.graphics.Bitmap.Config ALPHA_8, ARGB_44... 2012-04-22

    最近学习Api文档,打开Android.graphics.Bitmap类里有一个内部类Bitmap.Config类,在Bitmap类里createBitmap(int width, int height, Bitmap.Config config)方法里会用到,打开个这个类一看 枚举变量 public static final Bitmap.Config ALPHA_8 public static final Bitmap.Config ARGB_4444 public static final

  • Akka Config Lib的简单使用 2015-01-13

    Akka Config Lib的简单使用 akka框架中使用该库配置akka,该项目地址为https://github.com/typesafehub/config 首先在classpath下定义文件为: complex1.conf complex-app { something = "hello world" # here we want a simple-lib-context unique to our app # which can be custom-configured.

  • EXT JS PANEL document 2010-11-11

    This chapter describes the official document panel part Config Options activeItem: String / Number Used to set the currently active child component, the value for this sub-component of the serial number or id. But it can only be applied that can only

  • Ext.Panel document translation (transfer) 2010-04-23

    Ext.Panel API translation reference site: http://tianmoboping.blog.163.com/ activeItem: String / Number Used to set the current activities of the sub-component values for this sub-component of the serial number or id. But it can only be used once onl

  • ckeditor3.2.1 document translation (with goole translation) 2010-05-13

    First, a js file to load <head> ... <script type="text/javascript" src="/ckeditor/ckeditor.js"> </ script> </ Head> In the page, first create a textarea <textarea name="editor1"> Hello </ text

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.114 (s). 12 q(s)