source: trunk/web/addons/job_monarch/lib/extjs/examples/grid/edit-grid.js @ 619

Last change on this file since 619 was 619, checked in by ramonb, 15 years ago

lib/:

  • added new AJAX dependancies: ExtJS, pChart, Lightbox2
File size: 4.9 KB
Line 
1/*
2 * Ext JS Library 2.2.1
3 * Copyright(c) 2006-2009, Ext JS, LLC.
4 * licensing@extjs.com
5 *
6 * http://extjs.com/license
7 */
8
9Ext.onReady(function(){
10    Ext.QuickTips.init();
11
12    function formatDate(value){
13        return value ? value.dateFormat('M d, Y') : '';
14    };
15    // shorthand alias
16    var fm = Ext.form;
17
18    // custom column plugin example
19    var checkColumn = new Ext.grid.CheckColumn({
20       header: "Indoor?",
21       dataIndex: 'indoor',
22       width: 55
23    });
24
25    // the column model has information about grid columns
26    // dataIndex maps the column to the specific data field in
27    // the data store (created below)
28    var cm = new Ext.grid.ColumnModel([{
29           id:'common',
30           header: "Common Name",
31           dataIndex: 'common',
32           width: 220,
33           editor: new fm.TextField({
34               allowBlank: false
35           })
36        },{
37           header: "Light",
38           dataIndex: 'light',
39           width: 130,
40           editor: new Ext.form.ComboBox({
41               typeAhead: true,
42               triggerAction: 'all',
43               transform:'light',
44               lazyRender:true,
45               listClass: 'x-combo-list-small'
46            })
47        },{
48           header: "Price",
49           dataIndex: 'price',
50           width: 70,
51           align: 'right',
52           renderer: 'usMoney',
53           editor: new fm.NumberField({
54               allowBlank: false,
55               allowNegative: false,
56               maxValue: 100000
57           })
58        },{
59           header: "Available",
60           dataIndex: 'availDate',
61           width: 95,
62           renderer: formatDate,
63           editor: new fm.DateField({
64                format: 'm/d/y',
65                minValue: '01/01/06',
66                disabledDays: [0, 6],
67                disabledDaysText: 'Plants are not available on the weekends'
68            })
69        },
70        checkColumn
71    ]);
72
73    // by default columns are sortable
74    cm.defaultSortable = true;
75
76    // this could be inline, but we want to define the Plant record
77    // type so we can add records dynamically
78    var Plant = Ext.data.Record.create([
79           // the "name" below matches the tag name to read, except "availDate"
80           // which is mapped to the tag "availability"
81           {name: 'common', type: 'string'},
82           {name: 'botanical', type: 'string'},
83           {name: 'light'},
84           {name: 'price', type: 'float'},             // automatic date conversions
85           {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
86           {name: 'indoor', type: 'bool'}
87      ]);
88
89    // create the Data Store
90    var store = new Ext.data.Store({
91        // load using HTTP
92        url: 'plants.xml',
93
94        // the return will be XML, so lets set up a reader
95        reader: new Ext.data.XmlReader({
96               // records will have a "plant" tag
97               record: 'plant'
98           }, Plant),
99
100        sortInfo:{field:'common', direction:'ASC'}
101    });
102
103    // create the editor grid
104    var grid = new Ext.grid.EditorGridPanel({
105        store: store,
106        cm: cm,
107        renderTo: 'editor-grid',
108        width:600,
109        height:300,
110        autoExpandColumn:'common',
111        title:'Edit Plants?',
112        frame:true,
113        plugins:checkColumn,
114        clicksToEdit:1,
115
116        tbar: [{
117            text: 'Add Plant',
118            handler : function(){
119                var p = new Plant({
120                    common: 'New Plant 1',
121                    light: 'Mostly Shade',
122                    price: 0,
123                    availDate: (new Date()).clearTime(),
124                    indoor: false
125                });
126                grid.stopEditing();
127                store.insert(0, p);
128                grid.startEditing(0, 0);
129            }
130        }]
131    });
132
133    // trigger the data store load
134    store.load();
135});
136
137Ext.grid.CheckColumn = function(config){
138    Ext.apply(this, config);
139    if(!this.id){
140        this.id = Ext.id();
141    }
142    this.renderer = this.renderer.createDelegate(this);
143};
144
145Ext.grid.CheckColumn.prototype ={
146    init : function(grid){
147        this.grid = grid;
148        this.grid.on('render', function(){
149            var view = this.grid.getView();
150            view.mainBody.on('mousedown', this.onMouseDown, this);
151        }, this);
152    },
153
154    onMouseDown : function(e, t){
155        if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
156            e.stopEvent();
157            var index = this.grid.getView().findRowIndex(t);
158            var record = this.grid.store.getAt(index);
159            record.set(this.dataIndex, !record.data[this.dataIndex]);
160        }
161    },
162
163    renderer : function(v, p, record){
164        p.css += ' x-grid3-check-col-td'; 
165        return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';
166    }
167};
Note: See TracBrowser for help on using the repository browser.