首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

extjs4在rowediting中应用combobox,combobox只显示value,不显示displayvalue的解决方案

2013-01-19 
extjs4在rowediting中使用combobox,combobox只显示value,不显示displayvalue的解决方案如题,直接上代码,1

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方法,才能达到满意的效果,大家看看更改的如果有什么问题,请大家批评指正!

?

热点排行