自已要用到这个控件，找了半天没有5.10现成的，网上只有以前版本的代码，所以参考他们的自已弄了一个。
写的不是很好，请多包含，但还可以使用，目前还没有出现BUG，如果出现了，请留言或自已修改一下。
/**
* extjs form combogrid.
*
*
* @author <a href='mailto:xiaomingyang@aksl.com.cn'>xiaomingyang</a> 2016-01-22，11:27
* @version v0.1
* @since 5.0
*/
Ext.define('Ext.form.field.ComboGrid', {
xtype : 'combogrid',
requires: [
],
alias : 'widget.combogrid',
extend : 'Ext.form.field.ComboBox',
alternateClassName: 'Ext.form.field.ComboGrid',
/**
* editable false
*/
editable : false,
/**
* min chars
*/
minChars : Infinity,
/**
* grid selection items
*/
_selections : [],
/**
* 设置为false
*/
matchFieldWidth : false,
/**
* display value
*/
displayValue : '',
/**
* grid配置
*/
gridCfg : {
store : this.store
},
initComponent: function() {
var _this = this;
this.on('expand', function() {
_this._syncSelection();
});
this.callParent(arguments);
},
/**
* 创建grid
*
* @returns {Ext.grid.Panel}
*/
createPicker : function() {
var _this = this;
if (this.store) {
Ext.apply(this.gridCfg, {
store : _this.store
});
}
_this.store.on('load', function() {
_this._syncSelection();
});
var picker = Ext.create('Ext.grid.Panel', this.gridCfg);
picker.on('select', this._onGridItemSelect, this);
picker.on('deselect', this._onGridItemDeselect, this);
var pageToolBar = picker.getDockedItems('toolbar[dock="bottom"]');
if (pageToolBar.length != 0 && pageToolBar.length == 1) {
pageToolBar[0].setStore(this.store);
} else if (pageToolBar.length > 1) {
Ext.Error.raise('TOO MANY PAGING GOT!');
}
this.picker = picker;
return picker;
},
/**
* grid选择响应
*
* @param _this
* @param record
* @param index
* @param eOpts
* @private
*/
_onGridItemSelect : function(_this, record, index, eOpts) {
var _this_ = this, dv = [], vv = [];
if (_this_.picker.getSelectionModel().getSelectionMode() == 'SINGLE') {
_this_._selections = [];
}
_this_._selections.push(record);
_this_._selections = _this_._uniqueArr(_this_._selections);
Ext.each(_this_._selections, function(item, index) {
if (item != null) {
var val = item.get(_this_.valueField);
if (val) {
vv.push(val);
}
var display = item.get(_this_.displayField);
if (display) {
dv.push(display);
}
}
});
_this_.value = vv.join(',') || '';
_this_.displayValue = dv.join(',') || '';
_this_.setRawValue(_this_.getDisplayValue());
},
/**
* grid反选响应
*
* @param _this
* @param record
* @param index
* @param eOpts
* @private
*/
_onGridItemDeselect : function(_this, record, index, eOpts) {
var _this_ = this;
Ext.each(_this_._selections, function(item, index, allItems) {
if (item != null) {
if (item.get(_this_.valueField) == record.get(_this_.valueField)) {
_this_._selections[index] = null;
}
}
});
_this_._selections = _this_._clearNullArr(_this_._selections);
var dv = [], vv = [];
Ext.each(_this_._selections, function(item, index) {
if (item != null) {
var val = item.get(_this_.valueField);
if (val) {
vv.push(val);
}
var display = item.get(_this_.displayField);
if (display) {
dv.push(display);
}
}
});
_this_.value = vv.join(',') || '';
_this_.displayValue = dv.join(',') || '';
_this_.setRawValue(_this_.getDisplayValue());
},
/**
* set value
*
* @param val value to be set, array
*/
setValue : function(val) {
var valType = this._getParamType(val);
this._selections = this._selections.concat([]);
var _this_ = this, dv = [], vv = [], displayField = _this_.displayField, valueField =_this_.valueField ;
if (valType == 'array') {
this._selections = [];
Ext.define('rightsGridModel', {
extend: 'Ext.data.Model',
fields: [_this_.valueField, _this_.displayField]
});
Ext.each(val, function(item, index) {
if (item != null) {
var gridStoreModel = Ext.create('rightsGridModel');
gridStoreModel.set(_this_.valueField, item[_this_.valueField]);
gridStoreModel.set(_this_.displayField, item[_this_.displayField]);
_this_._selections.push(gridStoreModel);
var val = item[_this_.valueField];
if (val) {
vv.push(val);
}
var display = item[_this_.displayField];
if (display) {
dv.push(display);
}
}
});
_this_.value = vv.join(',') || '';
_this_.displayValue = dv.join(',') || '';
_this_.setRawValue(_this_.getDisplayValue());
_this_._syncSelection();
}
},
/**
* get value
*/
getValue : function() {
return this.value || '';
},
/**
* get display value
*
* @returns {string}
*/
getDisplayValue : function() {
return this.displayValue || '';
},
/**
* clear all null or undefined elements in array
* @param arr
* @returns {*}
* @constructor
*/
_clearNullArr : function(arr) {
for (var i = 0; i < arr.length; i++) {
if (!arr[i] || arr[i] == '' || arr[i] == undefined) {
arr.splice(i, 1);
}
}
return arr;
},
/**
* 使数组元素单一
*
* @param arr 数组
* @returns {Array} 只含有单一元素的数组
* @private
*/
_uniqueArr : function(arr) {
var hashMap = {}, tmp = [], _this = this;
if (arr) {
Ext.each(arr, function(item, index) {
if (!hashMap[item.get(_this.valueField)]) {
hashMap[item.get(_this.valueField)] = true;
tmp.push(item);
}
});
}
return tmp;
},
/**
* 选择同步
*
* @private
*/
_syncSelection : function() {
var me = this, pk = me.picker;
if (pk) {
var EA = Ext.Array, gd = pk, st = gd.store;
var cs = [];
var sv = me.getValue() || '';
EA.each(st.data.items, function(r) {
if (EA.contains(sv.split(','), r.data[me.valueField].toString())) {
cs.push(r);
}
});
if (cs.length == 0) {
gd.getSelectionModel().deselectAll();
} else {
gd.getSelectionModel().select(cs, false, true);
}
}
},
/**
* 取数据类型(在setvalue的时候,传入的[]数组在 instanceof Array时为false)
*
* @param param
* @returns {string}
* @private
*/
_getParamType : function(param) {
return ((_t = typeof (param)) == "object" ? Object.prototype.toString.call(param).slice(8, -1) : _t).toLowerCase();
}
});
用例代码：
{
xtype: 'combogrid',
name :'rightsId',
allowBlank : true,
fieldLabel: '角色权限',
displayField : 'name',
valueField : 'id',
anchor: '99%',
gridCfg : {
frame : false,
resizable : true,
forceFit : true,
columnLines : false,
selModel: {
selType: 'checkboxmodel',
mode : 'SIMPLE'
},
columns: [{
xtype: 'rownumberer'
}, {
text : '权限名称',
dataIndex : 'name',
sortable : true,
flex : 2
}, {
text : '权限描述',
dataIndex : 'description',
sortable : true,
flex : 6
}],
dockedItems: [{
xtype: 'pagingtoolbar',
dock: 'bottom',
displayInfo: true
}],
floating: true,
hidden: true,
width : 540,
height : 270,
focusOnToFront: true
},
store : {
proxy: {
type: 'ajax',
url: $GLOBAL.CONTEXT_PATH + "/security/authority/getAllRightsListByPage",
reader: {
type: 'json',
rootProperty: 'list',
totalProperty: 'totalRow'
}
},
autoLoad: true,
pageSize : $GLOBAL.PAGE_LIMIT,
fields : [{
name : 'id',
type : 'number',
mapping : 'ID'
}, {
name : 'name',
type : 'string',
mapping : 'NAME'
}, {
name : 'description',
type : 'string',
mapping : 'DESCRIPTION'
}]
}
}
太感谢了，找了几天，终于找到一个可以用的了。。
相关推荐
5. **样式调整**：根据需求定制combogrid的外观，使其与应用的其他元素保持一致。 这个扩展使得在ExtJS 4项目中，我们可以创建一种强大的输入组件，它结合了组合框的简洁性和数据网格的可读性，提高了用户体验。在...
5. **样式调整**：为了提供良好的用户体验，可能需要调整控件的样式，使其更符合年度选择的场景，例如，显示的年份范围、字体大小等。 6. **测试与优化**：在实际环境中测试新组件，确保其在各种浏览器和设备上的...
在EXTJS这个强大的JavaScript框架中，时间控件是开发者经常使用的组件之一，尤其在构建复杂的Web应用程序时。EXTJS的时间控件允许用户选择或输入时间，通常以小时、分钟和秒为单位，提供了用户友好的界面和丰富的...
在ExtJS 5中，日期时间控件是开发用户界面时经常会用到的组件，它允许用户选择和输入日期及时间值。本篇文章将深入探讨ExtJS 5的日期时间控件及其特点。 首先，ExtJS 5 的日期时间控件（DateTimeField）结合了日期...
ExtJs图片按钮控件是ExtJs框架中一种增强的按钮组件，它允许开发者在按钮上显示图片，以提供更丰富的用户界面。这个控件通常用于创建具有视觉吸引力的交互式UI元素，比如导航按钮或者操作按钮。下面我们将深入探讨...
Extjs DateField控件 - 只选择年份（找了很久发现网上只有选择年月的控件，于是基于extjs年月控件设计了只选择年份的控件）
extjs4.1部分控件示例 MVC2 VS2010
5. **性能**：考虑控件的性能，特别是在大数据量或复杂交互场景下的表现。 总的来说，这三个ExtJs时间日期控件提供了多样化的选择，可以帮助你提升Web应用的用户体验。根据项目需求，选择最适合的一款，并深入研究...
5. **插件(Plugins)**：在ExtJS中，插件（`Ext.plugin.*`）用于扩展组件的功能。搜索插件可能包括对搜索历史的管理、多条件搜索支持、高亮匹配结果等特性。`SearchField.js`可能就包含了一个这样的插件，为搜索控件...
在ExtJS中，微调控件（Spinner）是一种用户界面组件，它允许用户通过点击向上或向下的箭头以微小增量增加或减少数值，常见于输入框旁边，提供一种方便的数值调整方式。这个控件在处理精确输入或者范围限制的数值时...
在ExtJS 4.2版本中，开发者可以使用DateTime控件来处理日期和时间的选择与显示，这尤其适用于需要精确到时分秒的场景。这个控件是ExtJS对基础日期选择器的扩展，增加了对时间部分的细致控制。 DateTime控件在ExtJS ...
CooliteToolkit(ExtJS可视化控件)Demo ExtJS JavaScript Framework and asp.net ajax Coolite Toolkit 是一个支持ASP.NET AJAX的Web控件，Coolite Toolkit非常适合做web应用程序的开发，它提供了很多专业的Asp.net...
本压缩包文件中收集了基于ExtJs扩展的一些控件，这些控件能够进一步增强应用程序的功能和用户体验。 首先，我们来看看“ExtJs：收集基于ExtJs扩展的一些控件”。这个文件可能是对一些自定义或第三方开发的ExtJs控件...
在3.2和3.3版本中，ExtJS的时间控件（DateTimeField）和日期控件（DateField）是开发者常用的功能组件，用于处理用户输入的日期和时间数据。这些控件具有高度可定制性，可以满足各种界面和功能需求。 1. **时间控件...
extjs的年月选择控件，主要针对原有的extjs Datefield控件的基础上增加了插件
在ExtJS中，时间控件是一种用户界面元素，允许用户选择或输入特定的时间值。它提供了丰富的交互性和自定义选项，使得时间选择过程更加直观和高效。在本篇文章中，我们将深入探讨ExtJS时间控件的使用、功能和配置。 ...
在"ExtJS日期时间控件"这个下载包中，包含了三种不同的日期控件实现方式。这可能是通过不同的配置、插件或者自定义扩展来实现的，旨在满足不同场景下的需求。下面我们将深入探讨这些知识点： 1. **ExtJS内置的...
在EXTJS中，时间控件是常见的交互元素，允许用户选择特定的时间，包括年、月、日、时、分和秒。这篇文档将深入探讨EXTJS中的时间控件及其使用方法。 首先，EXTJS时间控件的设计理念是为了提供用户友好的时间选择...
在ExtJS4中，日期控件是开发人员经常使用的组件之一，它允许用户选择日期、时间或两者兼有，以便进行数据输入或显示。本篇文章将深入探讨ExtJS4中的日期控件，特别是那些包含年、月、日、时、分、秒的复杂日期时间...