Javascript-extjs-gridpanel Components-Edit

Source: Internet
Author: User

If you want to edit the table, you need to complete the following three steps

1. Set the column in columns that you want to edit to editor and provide the control you want to use when editing the column.

2. Instantiate the subclass of the plug-in class, a column editor object, before Gridpanel renders.

3. Bind the Column Editor object to the Gridpanel.

4. Indicate that the selection mode for Gridpanel is column selection mode.

The following is only the key code for configuring the Edit column, as follows:

varcolumns =[{header:' Number ', Dataindex: ' ID '}, {header:Gender, Dataindex:' Name ', Editor: {xtype:"ComboBox",//Xtype represents the instantiation of a component or control object, which is equivalent to new Ext.form.combobox () and the object name is all lowercase. Allowblank:false//null values are not allowed}}, {header:' Description ', dataindex: ' DESCN ', Editor: {xtype:"TextField", Allowblank:false,//null values are not allowedSelectonfocus:true//The value is automatically checked when you click Edit to remove the user.         }    }];//new A column editor plug-invarCellediting =NewExt.grid.plugin.CellEditing ({clickstoedit:0//Set to 0 o'clock, double-click the column to put the column into edit state, 1 o'clock click the column to make the column edit. });varGrid =NewExt.grid.GridPanel ({renderto:' Box ', Store:store, Columns:columns, SelType:' Rowmodel ',//indicates selection mode for columnplugins:[//Binding Column Editor plug-incellediting]});

Javascript-Learning Total Directory

Javascript-extjs-gridpanel Components-Edit

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.