ExtJs4学习笔记(五) comboBox使用方法及扩展

最新推荐文章于 2023-05-12 16:16:19 发布

akrions

最新推荐文章于 2023-05-12 16:16:19 发布

阅读量6.3k

点赞数

分类专栏： ExtJs4学习笔记文章标签： extjs4 combobox 扩展 tree 多选

本文链接：https://blog.csdn.net/u014677625/article/details/23868561

版权

这篇博客介绍了ExtJS4中ComboBox的基础用法，包括如何实现后台加载。同时探讨了Ext.ux.TreePicker扩展，用于创建下拉树，并提供了.NET MVC4的后台代码示例。此外，还讨论了一个多选下拉列表的扩展，该扩展支持多项高亮、取消选中、添加图标等功能，并给出了官方地址和Demo下载链接。

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

基础用法

首先介绍最基础的用法，效果类似用html中的select但是提供后台加载方法，下面来看下代码：

Ext.onReady(function(){
        	//模拟数据，如果需要后台加载直接用proxy即可
		 var store=Ext.create('Ext.data.Store',{	 
		 	fields:['text','value'],
		 	data:[{
		 		"text":"天津",
		 		"value":"tj",
		 	},{
		 		"text":"北京",
		 		"value":"bj",
		 	},{
		 		"text":"上海",
		 		"value":"sh",
		 	}]
		 });
		 Ext.create('Ext.form.ComboBox',{
		 	fieldLabel: '城市',
		    store: store,//数据
		    queryMode: 'local',//加载本地数据
		    displayField: 'text',//显示的字段，对应store中的text值
		    valueField: 'vaule',//实际传递到后台的值
		    renderTo: Ext.getBody()//直接输出到body中
		 })
	})

效果如图：

下拉树

这里用到了一个官方的拓展Ext.ux.TreePicker，在Ext中的example文件夹中会有一个ux文件夹，将整个文件夹拷贝到自己项目的ExtJs的src文件夹下，没看懂路径也不要紧，直接引用Ext.ux.TreePicker会提示路径错误，这时候吧ux放到他提示的路径即可。由于下拉树需要读取后台信息，所以这里用到了.net mvc4，下面贴上代码。</