sample.js

php绿色服务器,让大家试用greenamp

 var GridUI = function() { 
     //enable Quicktips 
    Ext.QuickTips.init(); 
     
     //set vars 
    var ds; //datastore for grid 
    var cm; //columnModel 
    var grid; //component 
    var fm = Ext.form, Ed = Ext.grid.GridEditor; // shorthand alias     
     
    //create the datastores     
    function setupDataSource() { 
        //create the Data Store for the grid     
        ds = new Ext.data.Store({ 
            //set the http-proxy (link to the php document) 
            proxy: new Ext.data.ScriptTagProxy({ 
            url: 'get_data.php?ac=showdata' //a function in your php-script must be activated when ac = showdata 
        }), 
         
        //set up the JsonReader 
        reader: new Ext.data.JsonReader({ 
            root: 'results', 
            totalProperty: 'total', 
            id: 'id' 
        },  
            {name: test, type: 'string', mapping: 'test'} //columnmapping 
            ) 
        }); 
         
        //load datastores 
        ds.load(); 
    }      
     
    //create the columnmodel 
    function getColumnModel() { 
        cm = new Ext.grid.ColumnModel([{ 
              header: "Testcolumn", 
              dataIndex: 'test', 
              //width: 150, 
             editor: false 
         }]); 
         
        //set the default for sorting the columns 
        cm.defaultSortable = false; 
         
        return cm; 
    }     
     
    //create the grid 
    function buildGrid() {     
        //create the form 
        var gridForm = new Ext.form.Form({}); 
         
        //create the grid 
        var grid = new Ext.grid.EditorGrid('editor-grid', { 
            ds: ds, 
            cm: getColumnModel(), 
            enableColLock:false, 
            selModel: new Ext.grid.RowSelectionModel({singleSelect:true}) 
        }); 
         
        //set the layout for the grid 
        var layout = Ext.BorderLayout.create({ 
            center: { 
                margins:{left:3,top:3,right:3,bottom:3}, 
                panels: [new Ext.GridPanel(grid)] 
            } 
        }, 'grid-panel'); 
         
        //render the grid 
        grid.render(); 
         
        //set the header 
        var gridHead = grid.getView().getHeaderPanel(true); 
     
        var tb = new Ext.Toolbar(gridHead, [{}]); 
         
        //activate function updateDB when a cell is edited 
        grid.on('afteredit', updateDB); 
         
        function updateDB(oGrid_event){ 
            jsonData = "["; 
                         
                        for(i=0;i<ds.getCount();i++) { 
                            record = ds.getAt(i); 
                            jsonData += Ext.util.JSON.encode(record.data) + ","; 
                        } 
                         
                        jsonData = jsonData.substring(0,jsonData.length-1) + "]"; 
                         
                        gridForm.submit( 
                            { 
                                //waitMsg: 'Saving changes, please wait...', 
                                url:'get_data.php?ac=saveData', //php function that saves the data 
                                params:{data:jsonData}, 
                                success:function(form, action) { 
                                    alert('Congrats!  Your changes were saved!!!!'); 
                                }, 
                                failure: function(form, action) { 
                                    alert('Oops the delete did not work out too well!'); 
                                } 
                            } 
                        ); 
        } 
         
        //render form 
        gridForm.render('editGrid'); 
    } 

     return { 
         //the init 
        init : function() { 
            setupDataSource(); 
            buildGrid(); 
        }, 
         
        getDataSource: function() { 
            return ds; 
        } 
    } 
}(); 

Ext.onReady(GridUI.init, GridUI, true);