对Extjs下拉列表动态添加和删除数据

最新推荐文章于 2020-12-14 15:47:10 发布

文心兰的幸福

最新推荐文章于 2020-12-14 15:47:10 发布

阅读量5k

点赞数

分类专栏：前端文章标签： extjs

本文链接：https://blog.csdn.net/u014330421/article/details/77990806

版权

本文介绍了如何在ExtJS中动态添加和删除下拉列表的数据。通过监听事件、使用Store的各种方法如`remove()`, `add()`, `insert()`, `update()`等来实现数据的增删改。同时，讲解了`getCount()`, `each()`, `getRange()`, `getById()`, `find()`, `findBy()`等函数的用法，以及如何对数据进行查询、过滤和排序。此外，还提到了`load()`和`reload()`函数用于加载和重新加载数据，以及`filter()`和`filterBy()`用于数据筛选。" 133782088,7337247,深度学习驱动的太阳能光伏电池技术：现状与未来,"['人工智能', '深度学习', '图像处理', '能源技术', '机器学习']

摘要由CSDN通过智能技术生成

最近开发中遇到一个问题，就是动态的往下拉列表中添加和删除数据。经过各种查文档加搜索，终于解决了。以下是我的代码：

首先，我需要点击别的模块时动态删除下拉列表中的某些选项，所以添加单击监听事件：

listeners:{
	click:function(){		
		var reportT = me.find('name','reportType')[0].store;//获取名为reportType的下拉列表的store
		if(reportT.getCount()==10){//因为我下拉列表总共十条，为了避免连续点击删除，所以加判断
			var record = reportT.getRange(4, 8);//获取第5到9条数据
			reportT.remove(record);//移出
		}
	}
}

然后，点重置按钮时，我需要还原下拉列表，再将删除的添加回来：

handler:function(btn){
	var reportT = me.find('name','reportType')[0].store;
	if(reportT.getCount()==5){//此时下拉列表只有五条数据，为了避免不断添加，添加判断
		var recordData = Ext.data.Record.create([{name:'code'},{name:'name'}]);
		//从下标为4的位置开始添加
                reportT.insert(4,[new recordData({                
			code: 'gxYwby',   
			name: 'A报表'
		}),new recordData({                
			code: 'gxZzsg',   
			name: 'B报表'
		}),new recordData({                
			code: 'gxZgsh',   
			name: 'C报表'
		}),new recordData({                
			code: 'gxZzzgqr',   
			name: 'D报表'
		}),new recordData({                
			code: 'gxLxhb',   
			name: 'E报表'
		})]);
	}
}

以上就是我的操作过程，因为是刚写完，还不知道实用性怎样，会不会有bug，有待进一步检验。

后记：

在查询过程中看到一篇不错的文章，也粘过来以作参考：

Store.getCount()返回的是store中的所有数据记录，然后使用for循环遍历整个store，从而得到每条记录。

除了使用getCount()的方法外，还可以使用each()函数，如下面的代码所示。

1. store.each(function(record) {

2. alert(record.get('name'));

3. });

Each()可以接受一个函数作为参数，遍历内部record，并将每个record作为参数传递给function()处理。

如果希望停止遍历，可以让function()返回false。

也可以使用getRange()函数连续获得多个record，只需要指定开始和结束位置的索引值，如下面的代码所示。

1. var records = store.getRange(0, 1);

3. for (var i = 0; i < records.length; i++) {

4. var record = records[i];

5. alert(record.get('name'));

6. }

如果确实不知道record的id，也可以根据record本身的id从store中获得对应的record，如下面的代码所示。

1. store.getById(1001).get('name')

EXT还提供了函数find()和findBy()，可以利用它们对store中的数据进行搜索࿰