edit-grid.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:4k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ Ext.onReady(function(){
  2.     Ext.QuickTips.init();
  3.     function formatDate(value){
  4.         return value ? value.dateFormat('M d, Y') : '';
  5.     }
  6.     // shorthand alias
  7.     var fm = Ext.form;
  8.     // custom column plugin example
  9.     var checkColumn = new Ext.grid.CheckColumn({
  10.        header: 'Indoor?',
  11.        dataIndex: 'indoor',
  12.        width: 55
  13.     });
  14.     // the column model has information about grid columns
  15.     // dataIndex maps the column to the specific data field in
  16.     // the data store (created below)
  17.     var cm = new Ext.grid.ColumnModel([{
  18.            id: 'common',
  19.            header: 'Common Name',
  20.            dataIndex: 'common',
  21.            width: 220,
  22.            // use shorthand alias defined above
  23.            editor: new fm.TextField({
  24.                allowBlank: false
  25.            })
  26.         },{
  27.            header: 'Light',
  28.            dataIndex: 'light',
  29.            width: 130,
  30.            editor: new fm.ComboBox({
  31.                typeAhead: true,
  32.                triggerAction: 'all',
  33.                transform:'light',
  34.                lazyRender: true,
  35.                listClass: 'x-combo-list-small'
  36.             })
  37.         },{
  38.            header: 'Price',
  39.            dataIndex: 'price',
  40.            width: 70,
  41.            align: 'right',
  42.            renderer: 'usMoney',
  43.            editor: new fm.NumberField({
  44.                allowBlank: false,
  45.                allowNegative: false,
  46.                maxValue: 100000
  47.            })
  48.         },{
  49.            header: 'Available',
  50.            dataIndex: 'availDate',
  51.            width: 95,
  52.            renderer: formatDate,
  53.            editor: new fm.DateField({
  54.                 format: 'm/d/y',
  55.                 minValue: '01/01/06',
  56.                 disabledDays: [0, 6],
  57.                 disabledDaysText: 'Plants are not available on the weekends'
  58.             })
  59.         },
  60.         checkColumn
  61.     ]);
  62.     // by default columns are sortable
  63.     cm.defaultSortable = true;
  64.     // create the Data Store
  65.     var store = new Ext.data.Store({
  66.         // load remote data using HTTP
  67.         url: 'plants.xml',
  68.         // specify a XmlReader (coincides with the XML format of the returned data)
  69.         reader: new Ext.data.XmlReader(
  70.             {
  71.                 // records will have a 'plant' tag
  72.                 record: 'plant'
  73.             },
  74.             // use an Array of field definition objects to implicitly create a Record constructor
  75.             [
  76.                 // the 'name' below matches the tag name to read, except 'availDate'
  77.                 // which is mapped to the tag 'availability'
  78.                 {name: 'common', type: 'string'},
  79.                 {name: 'botanical', type: 'string'},
  80.                 {name: 'light'},
  81.                 {name: 'price', type: 'float'},             
  82.                 // dates can be automatically converted by specifying dateFormat
  83.                 {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
  84.                 {name: 'indoor', type: 'bool'}
  85.             ]
  86.         ),
  87.         sortInfo: {field:'common', direction:'ASC'}
  88.     });
  89.     // create the editor grid
  90.     var grid = new Ext.grid.EditorGridPanel({
  91.         store: store,
  92.         cm: cm,
  93.         renderTo: 'editor-grid',
  94.         width: 600,
  95.         height: 300,
  96.         autoExpandColumn: 'common',
  97.         title: 'Edit Plants?',
  98.         frame: true,
  99.         plugins: checkColumn,
  100.         clicksToEdit: 1,
  101.         tbar: [{
  102.             text: 'Add Plant',
  103.             handler : function(){
  104.                 // access the Record constructor through the grid's store
  105.                 var Plant = grid.getStore().recordType;
  106.                 var p = new Plant({
  107.                     common: 'New Plant 1',
  108.                     light: 'Mostly Shade',
  109.                     price: 0,
  110.                     availDate: (new Date()).clearTime(),
  111.                     indoor: false
  112.                 });
  113.                 grid.stopEditing();
  114.                 store.insert(0, p);
  115.                 grid.startEditing(0, 0);
  116.             }
  117.         }]
  118.     });
  119.     // trigger the data store load
  120.     store.load();
  121. });