/**
* 数据源
*
* @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 JS 的 XTemplate 特性来实现这一需求。 #### 基本概念与原理 在 Ext JS 中,`ComboBox` 和 `Grid` 都是常用的数据展示控件。通常情况下,`ComboBox` 用于展示和选择单个值,而 `Grid` ...
在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时...在EXTJS4中,这个控件是实现复杂下拉选择功能的利器。
在ExtJS的ComboBox中,搜索功能是其核心特性之一,允许用户通过输入关键字来过滤下拉列表中的选项,以实现快速定位。这种功能通常称为模糊查询,因为用户可以输入部分关键字,系统会自动匹配并显示与之相关的所有项...
ComboBox是EXT JS中的一种基础组件,通常用于显示一个下拉列表供用户选择。而TreePanel则是一个可以展示层次结构数据的视图,常用于文件系统或者组织结构的展示。 在ComboxTree中,我们首先需要创建一个配置对象,...
Ext IconComBox是一款基于Ext JS库的组件,它扩展了标准的下拉框(ComboBox)功能,使得在下拉列表前可以添加自定义的图标。这个特性使得UI设计更加丰富多彩,提高了用户界面的视觉吸引力和交互性。在本文中,我们将...
<link id="theme" rel="stylesheet" type="text/css" href="ext/2.0/resources/css/xtheme-default.css" />2、定义一个combox,将可选样式作为数据源填入下拉列表: 定义样式数据 Ext.simpledata.themes = [ ['...
在EXT JS中,Combox组件是一种常用的输入控件,它结合了文本输入框和下拉列表的功能,可以用于实现选择性的输入。在某些情况下,开发者可能希望实现类似百度搜索那样的实时提示功能,即用户在输入时,下拉框能根据...
queryMode: 'local', editable: false, // 其他配置... }); var treePanel = Ext.create('Ext.tree.Panel', { border: false, width: 160, height: 220, allowBlank: false, store: { // 数据源配置 ...