`
fisherhe
  • 浏览: 53594 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Ext之实现下拉查询Combox(Local)

    博客分类:
  • EXT
EXT 
阅读更多

/**
 * 数据源
 * 
 * @type
 */
var makes = [['Acura'], ['Aston Martin'], ['Audi'], ['BMW'], ['Buick'],
		['Cadillac'], ['Chevrolet'], ['Chrysler'], ['Dodge'], ['Ferrari'],
		['Ford'], ['GMC'], ['Honda'], ['HUMMER'], ['Hyundai'], ['Infiniti'],
		['Isuzu'], ['Jaguar']]
/**
 * 构建store
 */
var makesStore = new Ext.data.SimpleStore({
			fields : ['name'],
			data : makes
		});
/**
 * 构建combox
 * 
 */
var makesCombo = {
	xtype : 'combo',
	store : makesStore,
	displayField : 'name',
	valueField : 'name',
	editable : true,
	mode : 'local',
	forceSelection : true,
	triggerAction : 'all',
	filedLabel : '车名',
	emptyText : '输入要查询的车名',
	selectOnFocus : true
};
/**
 * 加载combox
 */
Ext.onReady(function() {
			var showcombo = new Ext.Panel({
						frame : true,
						title : '查询车名',
						bodyStyle : 'padding:5px',
						width : 420,
						id : 'comb',
						url : '...',//提交地址
						items : [makesCombo],
						buttons : [{
									text : '确认',
									handler : function() {
										Ext.getCmp('comb').getForm().submit;
									}
								}]
					});
			// 渲染到body标签上
			showcombo.render(document.body);
		})

 效果图见附件.

 

  • 大小: 8.7 KB
分享到:
评论

相关推荐

    Ext 将grid渲染到combox

    下面将详细介绍如何利用 Ext JS 的 XTemplate 特性来实现这一需求。 #### 基本概念与原理 在 Ext JS 中,`ComboBox` 和 `Grid` 都是常用的数据展示控件。通常情况下,`ComboBox` 用于展示和选择单个值,而 `Grid` ...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时...在EXTJS4中,这个控件是实现复杂下拉选择功能的利器。

    extcombox搜索功能

    在ExtJS的ComboBox中,搜索功能是其核心特性之一,允许用户通过输入关键字来过滤下拉列表中的选项,以实现快速定位。这种功能通常称为模糊查询,因为用户可以输入部分关键字,系统会自动匹配并显示与之相关的所有项...

    comboxTree下拉树,实现单选功能

    ComboBox是EXT JS中的一种基础组件,通常用于显示一个下拉列表供用户选择。而TreePanel则是一个可以展示层次结构数据的视图,常用于文件系统或者组织结构的展示。 在ComboxTree中,我们首先需要创建一个配置对象,...

    Ext IconComBox 图片下拉框

    Ext IconComBox是一款基于Ext JS库的组件,它扩展了标准的下拉框(ComboBox)功能,使得在下拉列表前可以添加自定义的图标。这个特性使得UI设计更加丰富多彩,提高了用户界面的视觉吸引力和交互性。在本文中,我们将...

    Ext3.1 21款精美主题和动态换皮肤

    <link id="theme" rel="stylesheet" type="text/css" href="ext/2.0/resources/css/xtheme-default.css" />2、定义一个combox,将可选样式作为数据源填入下拉列表: 定义样式数据 Ext.simpledata.themes = [ ['...

    ext combox 下拉框不出现自动提示,自动选中的解决方法

    在EXT JS中,Combox组件是一种常用的输入控件,它结合了文本输入框和下拉列表的功能,可以用于实现选择性的输入。在某些情况下,开发者可能希望实现类似百度搜索那样的实时提示功能,即用户在输入时,下拉框能根据...

    Extjs 4.1 下拉框 Tree 的实现(mvc)

    queryMode: 'local', editable: false, // 其他配置... }); var treePanel = Ext.create('Ext.tree.Panel', { border: false, width: 160, height: 220, allowBlank: false, store: { // 数据源配置 ...

Global site tag (gtag.js) - Google Analytics