edit-grid_li.js

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

/*
 * Ext JS Library 1.0.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * [e-mail]
 * 
 * http://www.extjs.com/license
 */
var ds;
var grid;
var Plant;
Ext.namespace('Ext.exampledata');
var states=[
        ['AL', '中国电信'],
        ['AK', 'Alaska'],
        ['AZ', 'Arizona'],
        ['AR', 'Arkansas'],
        ['CA', 'California']];
var storea = new Ext.data.SimpleStore({
          fields: ['abbr', 'state'],
          data : states
    });
var fcb = new Ext.form.ComboBox({
               typeAhead: true,
               //disabled:true,
               triggerAction: 'all',
               //transform:'light',
               mode: 'local',
               store: storea,
               forceSelection:true  ,
               displayField:'state',
               lazyRender:true,
               selectOnFocus:true
            })  ;  
            
Ext.onReady(function(){

    function formatBoolean(value){
        return value ? 'Yes' : 'No';  
    };
    
    function formatDate(value){
        return value ? value.dateFormat('M d, Y') : '';
    };
    // shorthand alias
    var fm = Ext.form, Ed = Ext.grid.GridEditor;
    
    // 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([{
           header: "light",
           dataIndex: 'common',
           width: 220,
           editor: new Ed(new fm.TextField({
               allowBlank: false
           }))
        },{
           header: "下拉框",
           dataIndex: 'light',
           width: 130,
           editor: new Ed(fcb      )
        },{
           header: "Price",
           dataIndex: 'price',
           width: 70,
           align: 'right',
           renderer: 'usMoney',
           editor: new Ed(new fm.NumberField({
               allowBlank: false,
               allowNegative: false,
               maxValue: 10
           }))
        },{
           header: "Available",
           dataIndex: 'availDate',
           width: 95,
           renderer: formatDate,
           editor: new Ed(new fm.DateField({
                format: 'm/d/y i',
                minValue: '01/01/06',
                disabledDays: [0, 6],
                disabledDaysText: 'Plants are not available on the weekends'
            }))
        },{
           header: "Indoor?",
           dataIndex: 'indoor',
           width: 55,
           renderer: formatBoolean,
           editor: new Ed(new fm.Checkbox())
        }]);

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

    // this could be inline, but we want to define the Plant record
    // type so we can add records dynamically
     Plant = Ext.data.Record.create([
           // the "name" below matches the tag name to read, except "availDate"
           // which is mapped to the tag "availability"
           {name: 'common', type: 'string'},
           {name: 'botanical', type: 'string'},
           {name: 'light'},
           {name: 'price', type: 'float'},             // automatic date conversions
           {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y i'},
           {name: 'indoor', type: 'bool'}
      ]);

    // create the Data Store
     ds = new Ext.data.Store({
        // load using HTTP
        proxy: new Ext.data.HttpProxy({url: 'plants.xml'}),

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have a "plant" tag
               record: 'plant'
           }, Plant)
    });  
    /*var 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: 'common', type: 'string', mapping: 'common'} //columnmapping 
            ) 
        }); **/

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

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


    // render it
    grid.render();

    
    var gridHead = grid.getView().getHeaderPanel(true);
    var tb = new Ext.Toolbar(gridHead, [{
        text: 'Add Plant',
        handler : function(){
            var p = new Plant({
                common: 'New Plant 1',
                light: 'Mostly Shade',
                price: 0,
                availDate: new Date(),
                indoor: false
            });
            grid.stopEditing();
            ds.insert(0, p);
            grid.startEditing(0, 0);
        }
    }]);
    
    var gridHead = grid.getView().getHeaderPanel(true);
    var tb = new Ext.Toolbar(gridHead, [{
        text: '增加',
        handler : function(){
            /*var p = new Plant({
                common: 'New Plant 1',
                light: 'Mostly Shade',
                price: 0,
                availDate: new Date(),
                indoor: false
            });
            grid.stopEditing();
            ds.insert(0, p);
            grid.startEditing(0, 0);*/
            add_row();
        }
    },{
        text: '删除',
        handler : function(){
            //var recode = grid.getSelectionModel().getSelected(); 
            //ds.remove(recode);
            del_row();
        }
    },{text: '清空', handler : function(){  ds.removeAll();   ds.reload();     }    }
     ,{text: '显示行数', handler : function(){  alert(ds.getCount());        }    }
     ,{text: '更新下拉框', handler : function(){  refresh_combox();        }    }
    ]);    

    // trigger the data store load
    ds.load();
});

function del_row(){
	 alert(grid.getSelectionModel().getSelected().get('light'));
	 var recode = grid.getSelectionModel().getSelected(); 
         ds.remove(recode);
	}
function add_row(){
            var p = new Plant({
                common: '中国人',
                light: 'Mostly Shade',
                price: 0,
                availDate: new Date(),
                indoor: false
            });
            grid.stopEditing();
            for (i=1;i<2;i++){
                 ds.insert(0, p);
                 }
            grid.startEditing(0, 0);
        }
function refresh_combox(){  
	states=[
        ['AL', '南靖电信'],
        ['AK', 'Alaska'],
        ['AZ', 'Arizona'],
        ['AR', 'Arkansas'],
        ['CA', 'California']];  
storea = new Ext.data.SimpleStore({
          fields: ['abbr', 'state'],
          data : states
    });
fcb = new Ext.form.ComboBox({
               typeAhead: true,
               //disabled:true,
               triggerAction: 'all',
               //transform:'light',
               mode: 'local',
               store: storea,
               forceSelection:true  ,
               displayField:'state',
               lazyRender:true,
               selectOnFocus:true
            })  ;  
         }