ComboBox或TextField实现下拉GridPanel控件

最新推荐文章于 2020-03-23 12:19:01 发布

hwakang

最新推荐文章于 2020-03-23 12:19:01 发布

阅读量174

点赞数

分类专栏： ExtJs 文章标签： EXT

ExtJs 专栏收录该内容

9 篇文章

订阅专栏

之前，在网上找了些关于下拉GridPanel的解决方案，但都不是太理想，主要问题是当我将控件放入一个弹出框中显示，在搜索后，出现的下拉GridPanel会处于Window的后面被遮挡住，这样就不行了。试图去改进，但是嫌麻烦，于是自己重新想了个解决方案。不过代码还有待进一步改进，希望用到的朋友能够提更多的建议...（Q号：329365156）

代码如下：

// 信息列
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
			header : '企业编号',
			dataIndex : 'userId',
			sortable : true
		}, {
			header : '企业名称',
			dataIndex : 'entName',
			sortable : true
		}, {
			header : '付款单位编号',
			dataIndex : 'payEntId',
			sortable : true
		}, {
			header : '付款单位名称',
			dataIndex : 'payEntName',
			sortable : true
		}]);
// 信息数据源
var ds = new Ext.data.Store({
			autoLoad : false,
			proxy : new Ext.data.HttpProxy({
						url : '#'
					}),
			reader : new Ext.data.JsonReader({
						totalProperty : 'total',
						root : 'root'
					}, [{
								name : 'userId'
							}, {
								name : 'entName'
							}, {
								name : 'payEntId'
							}, {
								name : 'payEntName'
							}])
		});
// 显示列表
var comboBoxGrid = new Ext.grid.GridPanel({
			ds : ds,
			cm : cm,
			width : 450,
			height : 180,
			region : 'center',
			autoSizeColumns : true,
			loadMask : true,
			frame : true,
			trackMouseOver : true,
			viewConfig : {
				forceFit : true
			},
			bbar : new Ext.PagingToolbar({
						pageSize : 5,
						store : ds,
						displayInfo : true,
						beforePageText : "第",
						afterPageText : "页  共{0}页",
						displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
						emptyMsg : "没有记录"
					})
		});
// 双击事件
comboBoxGrid.on('rowdblclick', function(grid, rowIndex, e) {
			selectMenu.hide();
			var record = grid.getSelectionModel().getSelected();
			var entName = record.get("entName");
			invNoTf2.setValue(entName);
		});
var selectMenu = new Ext.menu.Menu({
			items : [comboBoxGrid]
		});
var entNameTf = new Ext.form.TextField({
	fieldLabel : '企业名称',
	name : 'entName',
	enableKeyEvents : true,
	anchor : '95%',
	listeners : {
		specialkey : function(field, e) {
			if (e.getKey() == e.ENTER) {
				var url = '/jadsoft/businessInvoices.do?actionType=GetEntInfos&key='
						+ entNameTf.getValue()
				ds.proxy.setUrl(url, true);
				if (this.menu == null) {

					this.menu = selectMenu;
				}
				ds.load({
							params : {
								start : 0,
								limit : 5
							}
						});
				this.menu.show(this.el, "tl-bl?");
			}
		}
	}
})

示例如下图：