ExtJS4.2 Study (vii) Editorgrid editable form (GO)

Acknowledgement Address: http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html

----------------------------------------------------------------------------------------------

The effect of the above implementation is the effect of this section, now look at the code:

/** * Grid * This JS demonstrates how to set up an editable table*/ //tabular data At least has columns, data, conversion of raw data 3 itemsExt.onready (function(){    //Defining Columns    varcolumns =[{header:' Number ', Dataindex: ' id ', width:50, editor:{Allowblank:true            }}, //Sortable:true to set whether to sort the column{header: ' name ', Dataindex: ' Name ', width:80, editor:{Allowblank:true}}, {header:' Description ', dataindex: ' Descn ', width:112, editor:{Allowblank:true                    }}      ]; //Defining Data    vardata =[        [' 1 ', ' Xiao Wang ', ' Description 01 '],        [' 2 ', ' John Doe ', ' description 02 '],        [' 3 ', ' Zhang San ', ' description 03 '],        [' 4 ', ' bundle Yangyang ', ' The Thinker Diary net '],        [' 5 ', ' goofy ', ' description 05 ']    ]; //Convert raw data to ext data that can be displayed    varstore =NewExt.data.ArrayStore ({data:data, fields:[{name:' ID '},//mapping:0 This allows you to specify the position of the column display, 0 for the 1th column, and optionally to set the position of the column display{name: ' name '}, {name:' Descn '}        ]    }); //Loading Datastore.load (); //Create a table    //Original: Ext.grid.GridPanel, but not found in Extjs4.1 (4.2), only new Ext.grid.Panel, but the effect is consistent.     varGrid =NewExt.grid.Panel ({renderto:' Grid ',//Render Positionwidth:550, Autoheight:true, Store:store, Columns:columns,//Show ColumnsStriperows:true,//Zebra EffectSelType: ' Cellmodel ', plugins:[ext.create (' Ext.grid.plugin.CellEditing ', {clickstoedit:1//Set Click cell Edit (set to 2 is double-click to modify)})], tbar:[‘-‘, {text:' Add a row ', Handler:function(){                varp ={ID:‘‘, Name:‘‘, DESCN:‘‘                        }; Store.insert (0, p); }            },‘-‘, {text:' Delete a row ', Handler:function() {Ext.Msg.confirm (' System prompt ', ' OK to delete? ' ‘,function(BTN) {if(btn== ' yes '){                            varSM =Grid.getselectionmodel (); varRecord = Sm.getselection () [0];                        Store.remove (record);                }                    }); }        },‘-‘, {text:Save, Handler:function(){                varm = Store.getmodifiedrecords ();//Original: Store.getmodifiedrecords (). Slice (0); all can.                varJsonarray = []; Ext.each (M,function(item) {Jsonarray.push (item.data);                }); Ext.Ajax.request ({method:' POST ', URL:'/extjstest1/editgridservlet ', Success:function(response) {Ext.Msg.alert (' System hint ', Response.responsetext,function() {store.load ();                    }); }, Failure:function() {Ext.Msg.alert ("Error", "There was a problem contacting the backend." "); }, params:' Data= ' +ext.encode (Jsonarray)//Original: encodeURIComponent (Ext.encode (Jsonarray)) can be                }); }        }]    });});

First, the above JS code Description 1. Ext.grid.plugin.CellEditing

plugins:[                 ext.create (' Ext.grid.plugin.CellEditing ', {                     clickstoedit://  Set Click cell Edit (set to 2 is double-click to modify)                 })        ,

Here we have the Cellediting plugin enabled , and the rest of the section doesn't change. But the result is that you can now modify the cell in a TextField way. Remember that you cannot leave the cell blank or you cannot modify it.

By default, you need to double-click a cell to activate the editor for modification. However, you can also configure the table with Clickstoedit:1 so that you can modify it by clicking the cell to activate the editor.

TextField does not allow null values because the Allowblank:false property is set in the corresponding editor when the columns is created. Allowblank:false indicates that the null value is not run in TextField.

2.tbar

tbar:['-', {            text:' Add a line'            , handler:function()                {var p = {                        id:',                        name:',                        descn:'                        };                    Store.insert (0, p);                }            ,

This is the configuration attribute in Ext.panel.Panel, which is described in the API:

Because Ext.grid.Panel inherits the Ext.panel.Panel, it inherits all of its properties, so it can use this tbar.

2.1 Handler

This is a property in the configuration option (config options) in Ext.panel.Tool, which is described in the API as follows:

3.store.insert

This is the method in Ext.data.ArrayStore, see the API specifically.

Second, backstage code

@SuppressWarnings ("Serial")   Public classEditgridservletextendsHttpServlet {@Overrideprotected voiddoget (httpservletrequest req, HttpServletResponse resp)throwsservletexception, IOException {doPost (REQ,RESP); } @Overrideprotected voidDoPost (httpservletrequest req, HttpServletResponse resp)throwsservletexception, IOException {req.setcharacterencoding ("UTF-8"); String Data= Req.getparameter ("Data");            SYSTEM.OUT.PRINTLN (data);      Resp.getwriter (). print (data); }  } 

Printing results:

PostScript: ExtJS Simulation of Java object-oriented thinking (of course, and the Java language can not be equated, after all, it is written in JavaScript), is a heavyweight foreground framework, which involves more classes, so the query API is to understand the class, properties, methods and other important ways.

ExtJS4.2 Study (vii) Editorgrid editable form (GO)