4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
12 Roo.BLANK_IMAGE_URL = "../../images/default/s.gif";
16 Roo.onReady(function(){
18 function formatBoolean(value){
19 return value ? 'Yes' : 'No';
22 function formatDate(value){
23 return value ? value.dateFormat('M d, Y') : '';
26 var fm = Roo.form, Ed = Roo.grid.GridEditor;
28 // the column model has information about grid columns
29 // dataIndex maps the column to the specific data field in
30 // the data store (created below)
31 var cm = new Roo.grid.ColumnModel([{
32 header: "Common Name",
36 editor: new Ed(new fm.TextField({
43 editor: new Ed(new Roo.form.ComboBox({
55 editor: new Ed(new fm.NumberField({
62 dataIndex: 'availDate',
65 editor: new Ed(new fm.DateField({
69 disabledDaysText: 'Plants are not available on the weekends'
75 renderer: formatBoolean,
76 editor: new Ed(new fm.Checkbox())
79 // by default columns are sortable
80 cm.defaultSortable = true;
82 // this could be inline, but we want to define the Plant record
83 // type so we can add records dynamically
84 var Plant = Roo.data.Record.create([
85 // the "name" below matches the tag name to read, except "availDate"
86 // which is mapped to the tag "availability"
87 {name: 'common', type: 'string'},
88 {name: 'botanical', type: 'string'},
90 {name: 'price', type: 'float'}, // automatic date conversions
91 {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
92 {name: 'indoor', type: 'bool'}
95 // create the Data Store
96 var ds = new Roo.data.Store({
98 proxy: new Roo.data.HttpProxy({url: 'plants.xml'}),
101 // the return will be XML, so lets set up a reader
102 reader: new Roo.data.XmlReader({
103 // records will have a "plant" tag
108 // create the editor grid
109 grid = new Roo.grid.EditorGrid('editor-grid', {
114 enableDragDrop : true,
120 var layout = Roo.BorderLayout.create({
122 margins:{left:3,top:3,right:3,bottom:3},
123 panels: [new Roo.GridPanel(grid)]
132 grid.dropTarget = new Roo.dd.DropTarget(grid.view.el, {
134 drop : function (source, e, data)
137 var t = Roo.lib.Event.getTarget(e);
138 var ri = grid.view.findRowIndex(t);
141 var dp = this.getDropPoint(e,data);
142 // at this point should have above or below..
143 var os = grid.selModel.getSelectedCell()
144 grid.ds.remove(data.selections[0]);
145 grid.ds.insert(ri + (dp == 'below' ? 1 : 0) , data.selections);
146 grid.selModel.select(ri + (dp == 'below' ? 1 : 0), os[1])
147 this.expandRow(false);
151 over : function (source, e, data)
154 // if drag point == drop point...
155 var t = Roo.lib.Event.getTarget(e);
156 var ri = grid.view.findRowIndex(t);
157 var dp = this.getDropPoint(e,data);
159 //Roo.log(JSON.stringify({ dp: dp, ri: ri, src_ri: data.rowIndex}));
160 if(ri == data.rowIndex ||
161 (dp == 'above' && ri-1 == data.rowIndex) ||
162 (dp == 'below' && ri+1 == data.rowIndex)
164 this.expandRow(false);
169 this.expandRow(ri, dp);
172 this.valid = 'ok-add';
173 //Roo.log("SET VALID TO: " + this.valid)
174 //Roo.log([source,e,data]);
176 // Roo.log("dragover");
180 var t = Roo.lib.Event.getTarget(e);
181 var ri = _this.grid.view.findRowIndex(t);
186 rid = _this.grid.getDataSource().getAt(ri).data;
189 var s = _this.grid.getSelectionModel().getSelections();
191 //if (!isFromGroup && isToGroup) {
192 //this.valid = 'ok-add';
198 expandRow : function(ri,pos)
200 var dom = grid.view.getRow(ri);
202 //if (this.activeDom == dom) {
205 if (this.activeDom) {
206 Roo.get(this.activeDom).removeClass('x-grid-dd-above');
207 Roo.get(this.activeDom).removeClass('x-grid-dd-below');
209 this.activeDom = false;
215 Roo.get(dom).addClass('x-grid-dd-' + pos);
217 this.activeDom = dom;
221 getDropPoint : function(e, data)
224 // data is from griddragzone
226 var te = Roo.lib.Event.getTarget(e);
227 var ri = Roo.fly(te).findParent("td", 6);
231 var t = Roo.lib.Dom.getY(dragEl),
232 b = t + dragEl.offsetHeight;
233 var y = Roo.lib.Event.getPageY(e);
234 //var noAppend = tn.allowChildren === false || tn.isLeaf();
236 // we may drop nodes anywhere, as long as allowChildren has not been set to false..
242 if(y >= t && y < (t + q)){
245 if(y >= b-q && y <= b){
248 Roo.log( JSON.stringify( {pos: y, dragtop : t, mid : q, drabgot: b }));
257 var gridHead = grid.getView().getHeaderPanel(true);
258 var tb = new Roo.Toolbar(gridHead, [{
260 handler : function(){
262 common: 'New Plant 1',
263 light: 'Mostly Shade',
265 availDate: new Date(),
270 grid.startEditing(0, 0);
274 // trigger the data store load