The EXTJS4.2 control's grid binds different controls depending on the data source column data Seteditor

The Grid is bound differently depending on the data source column data, such as: text boxes and drop-down boxes

The main code is written in the grid's plugins: [RowEditing], below which is defined by the RowEditing object, which is defined as Ext.grid.plugin.CellEditing, not Ext.grid.plugin.RowEditing.

EXT.GETCMP (' PVN '). Seteditor (Form component); This is the column binding component to the grid.

PVN is the id! defined in the column

As follows:

var rowEditing = ext.create (' Ext.grid.plugin.CellEditing ', {//RowEditing

Clickstoedit:2, listeners: {' edit ': function(E, s) {var selecteddata = Grid_dynaproperty.getselectionmodel (). GetSelection () [0].data; if (Selecteddata.valuemethod = = "1") {ext.getcmp (' PVN '). Seteditor (New Ext.form.field.ComboBox ({name: ' Propertyvaluename ', Typeahead:true, Store:combodata_dynapropertyvalue, Valuefield: " Propertyvaluename ", Displayfield:" Propertyvaluename ", Querymode: ' Remote ',//local remote triggeraction: ' All ', Lazyrender:true, Repeattriggerclick:true, listeners: {"Expand": Function (combo, store, index) {V Ar selecteddata = Grid_dynaproperty.getselectionmodel (). GetSelection () [0].data; combodata_ Dynapropertyvalue.load ({params: {PropertyId:selectedData.PropId, Start:startdynaproperty, Limit:limitdynaproperty } }); } } })); } else {ext.getcmp (' PVN '). Seteditor (New Ext.form.field.Text ());      }}}); 

1. Binding the dropdown frame

2. Bound text box

The code is as follows:

varrowEditing = ext.create (' Ext.grid.plugin.CellEditing ', {//RowEditingClickstoedit:2, listeners: {' Edit ':function(E, s) {varSelecteddata = Grid_dynaproperty.getselectionmodel (). GetSelection () [0].data; if(Selecteddata.valuemethod = = "1") {ext.getcmp (' PVN '). Seteditor (NewExt.form.field.ComboBox ({name:' Propertyvaluename ', TypeAhead:true, Store:combodata_dynapropertyvalue, Valuefield:"Propertyvaluename", Displayfield:"Propertyvaluename", Querymode:' Remote ',//Local RemoteTriggerAction: ' All ', Lazyrender:true, Repeattriggerclick:true, listeners: {"Expand":function(combo, store, index) {varSelecteddata = Grid_dynaproperty.getselectionmodel (). GetSelection () [0].data; Combodata_dynapropertyvalue.load ({params: {Pro                                        PertyId:selectedData.PropId, Start:startdynaproperty,                            Limit:limitdynaproperty}});            }                        }                    })); } Else{ext.getcmp (' PVN '). Seteditor (NewExt.form.field.Text ()); }        }    }});varGrid_dynaproperty = ext.create (' Ext.grid.Panel '), {store:store_dynaproperty, autowidth:true, Aotuheight:true, Animcollapse:false, Enablecolumnmove:false, Enablehdmenu:false, Loadmask:true, Loadmask: {msg:' Loading data, please wait ... '}, Viewconfig: {forcefit:true, Striperows:true}, Forcefit:true,//List Width AdaptiveStriperows:true,//Zebra crossingAutosizecolumns:true,//Adaptive column size based on the width of each column of contentTrackmouseover:true,//highlight when mouse movesSelmodel: {seltype: ' Checkboxmodel '},//selection BoxScrolltrue, plugins: [rowEditing], columns: [{header:' Serial number ', Xtype: ' Rownumberer ', align: ' left ', width:50}, {header:Properties, Dataindex:' PropertyName ', Width:200}, {header:' Fill in the value ' method, Dataindex:' Valuemethod ', Width:200, renderer:function(V, NV, v1) {if(v = = "1") {                    return' Select attribute value '; } Else {                    return' Hand loss attribute value '; }}}, {header:' Attribute English name ', ID:' Propertyengname ', Dataindex:' Propertyengname ', Width:200, Editor: {allowblank:true}}, {header:' attribute value ', ID:' PVN ', Dataindex:' Propertyvaluename ', Width:130, Editor: {xtype:' Numberfield ' }    }]});

The EXTJS4.2 control's grid binds different controls depending on the data source column data Seteditor