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

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.