extjs4在rowediting中使用combobox,combobox只显示value,不显示displayvalue的解决方案
如题,直接上代码,
1定义一个combo,按照下面的代码重写extjs4中combo的setvalue方法
var RoleCombo = Ext.create('Ext.form.field.ComboBox', {
? ? ? ? ? ? name : 'roleNames',
? ? ? ? ? ? typeAhead : true,
? ? ? ? ? ? editable : false,
? ? ? ? ? ? triggerAction : 'all',
? ? ? ? ? ? lazyRender : true,
? ? ? ? ? ? width : 300,
? ? ? ? ? ? store : me.RoleStore,
? ? ? ? ? ? valueField : 'id',
? ? ? ? ? ? displayField : 'showname',
? ? ? ? ? ? multiSelect : true,
? ? ? ? ? ? queryMode : 'local',
? ? ? ? ? ? selectOnTab : true,
? ? ? ? ? ? allowBlank : false,
? ? ? ? ? ? setValue : function(value, doSelect) {
? ? ? ? ? ? ? ? var canRealValue = (doSelect == undefined);
? ? ? ? ? ? ? ? var me = this, valueNotFoundText = me.valueNotFoundText, inputEl = me.inputEl, i, len, record, dataObj, matchedRecords = [], displayTplData = [], processedValue = [];
?
? ? ? ? ? ? ? ? if(me.store.loading) {
?
? ? ? ? ? ? ? ? ? ? me.value = value;
? ? ? ? ? ? ? ? ? ? me.setHiddenValue(me.value);
? ? ? ? ? ? ? ? ? ? return me;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? value = Ext.Array.from(value);
?
? ? ? ? ? ? ? ? for( i = 0, len = value.length; i < len; i++) {
? ? ? ? ? ? ? ? ? ? record = value[i];
? ? ? ? ? ? ? ? ? ? if(!record || !record.isModel) {
? ? ? ? ? ? ? ? ? ? ? ? record = me.findRecordByValue(record);
? ? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? ? ? if(record) {
? ? ? ? ? ? ? ? ? ? ? ? matchedRecords.push(record);
? ? ? ? ? ? ? ? ? ? ? ? displayTplData.push(record.data);
? ? ? ? ? ? ? ? ? ? ? ? processedValue.push(record.get(me.valueField));
? ? ? ? ? ? ? ? ? ? } else {
?
? ? ? ? ? ? ? ? ? ? ? ? if(!me.forceSelection) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? processedValue.push(value[i]);
? ? ? ? ? ? ? ? ? ? ? ? ? ? dataObj = {};
? ? ? ? ? ? ? ? ? ? ? ? ? ? dataObj[me.displayField] = value[i];
? ? ? ? ? ? ? ? ? ? ? ? ? ? displayTplData.push(dataObj);
?
? ? ? ? ? ? ? ? ? ? ? ? } else if(Ext.isDefined(valueNotFoundText)) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? displayTplData.push(valueNotFoundText);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? me.setHiddenValue(processedValue);
? ? ? ? ? ? ? ? me.value = me.multiSelect ? processedValue : processedValue[0];
? ? ? ? ? ? ? ? if(!Ext.isDefined(me.value)) {
? ? ? ? ? ? ? ? ? ? me.value = null;
? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? if(canRealValue && me.value && me.value.length == 1) {
? ? ? ? ? ? ? ? ? ? var rawvalue;
? ? ? ? ? ? ? ? ? ? var newMatchedRecords=[];
? ? ? ? ? ? ? ? ? ? var value = (me.value)[0];
? ? ? ? ? ? ? ? ? ? if(value.indexOf(',') == -1) {
? ? ? ? ? ? ? ? ? ? ? ? var record = me.findRecord(me.valueField, parseInt(value));
? ? ? ? ? ? ? ? ? ? ? ? if(record) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? rawvalue = record.data;
? ? ? ? ? ? ? ? ? ? ? ? ? ? newMatchedRecords = record;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? var valarr = value.split(',');
? ? ? ? ? ? ? ? ? ? ? ? var result = [];
? ? ? ? ? ? ? ? ? ? ? ? for(var i = 0; i < valarr.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? val = parseInt(valarr[i]);
? ? ? ? ? ? ? ? ? ? ? ? ? ? var record = me.findRecord(me.valueField, val);
? ? ? ? ? ? ? ? ? ? ? ? ? ? if(record) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? result[i] = record.data;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? newMatchedRecords[i] = record;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? rawvalue = result;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? me.displayTplData = rawvalue;
? ? ? ? ? ? ? ? ? ? matchedRecords = newMatchedRecords;
? ? ? ? ? ? ? ? ? ? me.lastSelection = me.valueModels = matchedRecords;
?
? ? ? ? ? ? ? ? ? ? if(inputEl && me.emptyText && !Ext.isEmpty(value)) {
? ? ? ? ? ? ? ? ? ? ? ? inputEl.removeCls(me.emptyCls);
? ? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? ? ? me.setRawValue(me.getDisplayValue());
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? me.displayTplData = displayTplData;
? ? ? ? ? ? ? ? ? ? me.lastSelection = me.valueModels = matchedRecords;
?
? ? ? ? ? ? ? ? ? ? if(inputEl && me.emptyText && !Ext.isEmpty(value)) {
? ? ? ? ? ? ? ? ? ? ? ? inputEl.removeCls(me.emptyCls);
? ? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? ? ? me.setRawValue(me.getDisplayValue());
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? me.checkChange();
?
? ? ? ? ? ? ? ? if(doSelect !== false) {
? ? ? ? ? ? ? ? ? ? me.syncSelection();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? me.applyEmptyText();
?
? ? ? ? ? ? ? ? return me;
? ? ? ? ? ? }
? ? ? ? });
?
2定义一个renderer方法供column使用
var comboRenderer = function(combo) {
? ? ? ? ? ? return function(value) {
? ? ? ? ? ? ? ? var val = 0;
? ? ? ? ? ? ? ? if(value.indexOf(',') != -1) {
? ? ? ? ? ? ? ? ? ? var valarr = value.split(',');
? ? ? ? ? ? ? ? ? ? var valstr = '';
? ? ? ? ? ? ? ? ? ? for(var i = 0; i < valarr.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? val = parseInt(valarr[i]);
? ? ? ? ? ? ? ? ? ? ? ? var record = combo.findRecord(combo.valueField, val);
? ? ? ? ? ? ? ? ? ? ? ? valstr += record.get(combo.displayField) + ", ";
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? return valstr.substring(0, valstr.length - 2);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? val = parseInt(value);
? ? ? ? ? ? ? ? ? ? var record = combo.findRecord(combo.valueField, val);
? ? ? ? ? ? ? ? ? ? return record ? record.get(combo.displayField) : combo.valueNotFoundText;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
?
3column定义时renderer使用上边定义的方法
dataIndex : 'roleNames',
? ? ? ? ? ? ? ? width : 250,
? ? ? ? ? ? ? ? sortable : true,
? ? ? ? ? ? ? ? editor : RoleCombo,
? ? ? ? ? ? ? ? renderer : comboRenderer(RoleCombo)
?
关于其他的关于gird的写法,rowediting的定义等等的代码,使用和官方的例子一致,这里不再赘述!
?
网上有一些方法,都没有解决实际问题,比如说定义combo的focus事件,当点击rowediting是这个字段时,显示displayvalue,但是如果点击焦点是grid的别的列,value值就又再次显示出来,只有重写setvalue方法,才能达到满意的效果,大家看看更改的如果有什么问题,请大家批评指正!
?