`
wang19841229
  • 浏览: 96763 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

EXT学习笔记06下combox

    博客分类:
  • ajax
阅读更多

combox是EXT.form中最复杂的。<script>

			Ext.onReady(function(){
					new Ext.Window({
						modal:true,
						title:'添加用户',
						resizable:false,
						width:500,
						layout:'form',
						bodyStyle: 'padding:5px 5px 0',
						labelWidth:60,
						height:240,
						plain:true,
						buttonAlign:'center',  
						items:[{
							baseCls:'x-plain',
							layout:'column',
							items:[{
								 labelWidth:60,
								 layout:'form',
								 baseCls:'x-plain', 
								 columnWidth:.5,	 	
								 defaultType:'textfield',
								 items:[{
								 	fieldLabel:"姓名"
								 },{
								 	fieldLabel:"性别",
									xtype:"combo",
									width:130,
									readOnly:true,
									mode:"local",
									displayField:"sex",
									triggerAction:"all",
									value:"男",
									store:new Ext.data.SimpleStore({
										fields:["sex"],
										data:[["男"],["女"]]
									})
								 },{
								 	xtype:"datefield",
									format:"Y-m-d",
									readOnly:true,
								 	fieldLabel:"出生日期",
									width:130
								 },{
								 	fieldLabel:"地址"
								 }]
								   
							},{
								baseCls:'x-plain',
								labelWidth:60,
								layout:'form',
								columnWidth:.5,
								defaultType:'textfield',
								items:[{
									fieldLabel:"照片",
									inputType :"image",
									width:120,
									height:100 
								}]	
							}]							
						},{
							xtype:'textfield',
							fieldLabel:"详细地址",
							width:410
						},{
							xtype:'textfield',
							fieldLabel:"关系",
							width:410
						}],
						buttons:[{text:"确定"},{text:"取消"}],
						listeners:{
							"show":function(_window)
							{
								
								_window.findByType('textfield')[4].getEl().dom.scr="a.gif";
								
							}
						}  
					}).show();
			});
			
		</script>

   属性

  xtype:这个UI的xtype是combo

  readOnly:只读

  mode:模式这个很重要默认这个UI的数据是从服务器上请求,但是如果使用本地数据需要使用local

  triggerAction:这个属性也有意思。combox默认选中一个选项之后在点下拉列表只能选择刚才选择的解决办法是把这   个属性设为all。

value:默认值

最复杂的两个属性

displayField:显示的场所。这个属性是设定为store属性指定的数据提供原的fields一样的。

store:数据提供原:可以使用data包下的store结尾的类。我们用SimpleStore类实现,这个类只是本地数据。

           fields:属性与combox中的displayField属性对应。

           data:数据数组形式例如:[["男"],["女"]]

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

相关推荐

    Ext_comBox模糊查询

    在EXT JS中,Combox(下拉框组件)是一种常用的输入控件,它结合了文本输入框和下拉列表的功能,常用于数据选择和输入。本文将深入探讨如何在EXT中实现Combox的模糊查询功能,以及后台处理自动检索的方法。 模糊...

    ext combox

    在探讨“ext combox”这一主题时,我们深入解析其核心功能——自动提示,这是现代Web应用程序中一个非常实用且常见的特性,尤其在输入框中提供动态搜索建议方面,极大地提升了用户体验。本篇将详细阐述如何利用Ext ...

    Ext 将grid渲染到combox

    ### Ext JS 中将 Grid 渲染到 ComboBox 的方法 在 Ext JS 框架中,有时需要将 Grid 控件的数据渲染到 ComboBox 中,这在实际应用中是非常实用且灵活的功能。下面将详细介绍如何利用 Ext JS 的 XTemplate 特性来实现...

    EXT中COMBOX联动

    9. **远程过滤(Remote Filtering)**:在大型数据集的情况下,联动可能利用远程过滤,即在用户输入时只向服务器请求匹配的子集,以提高性能。 10. **事件传播(Event Propagation)**:理解事件的冒泡和捕捉机制...

    Ext+MVC(combox,tree,gird,layout)

    ext + mvc combox tree grid layout

    extcombox搜索功能

    在ExtJS中,`Ext.form.field.ComboBox`(简称ComboBox)是一种常用的控件,它提供了一个下拉列表,用户可以在其中选择一个或多个项目。这个控件在数据展示和用户交互方面具有广泛的应用,特别是在需要进行快速筛选和...

    combox

    combox的栏数如何生成?

    WPF_MVVM中DataGrid列中使用ComBox绑定

    本话题将探讨如何在MVVM架构下,将ComBox控件集成到DataGrid列中,并实现其与数据模型的双向绑定,以实现在选择ComBox项后,数据能够即时更新到绑定的实体中。 首先,我们需要理解DataGrid的基本用法。DataGrid是...

    c#Winform Combox控件重绘

    本文将详细探讨如何在VS2017环境下,针对.Net 2.0版本的Combox控件进行重绘操作。 首先,理解“重绘”(Redraw)的概念。在Windows Forms中,当控件的外观需要改变,如颜色、样式或形状时,我们通常会进行重绘。重...

    Combox下拉多值

    在IT行业中,`Combox`(也常写作ComboBox或下拉框)是一种常见的用户界面元素,用于提供用户从预定义的选项中选择一个或多个值。在本案例中,"Combox下拉多值"指的是支持用户选择多个值的ComboBox控件。这种控件在...

    delphi控件ComboxGrid

    ComboxGrid是一款在Delphi开发环境中使用的自定义控件,它是Combobox(下拉框)和Grid(表格)功能的结合体,为用户提供更丰富的数据选择和显示方式。在Delphi编程中,ComboxGrid控件可以极大地提高用户体验,因为它...

    重绘ComBox控件实现换行 当文本达到一定长度时实现换行

    在某些情况下,当ComBox中的选项文本较长时,可能会超出控件的宽度,导致显示不全,影响用户体验。为了解决这个问题,我们可以自定义重绘ComBox控件,使其在文本达到一定长度时自动换行。以下将详细讲解这个过程及其...

    combox 列表嵌套checkbox

    这种设计通常用于提供一种灵活的多选方式,特别是在选项众多且需要用户快速筛选的情况下。 在描述中提到的“实现combox 下拉框中列表带有checkbox,实现多选”,这涉及到了自定义控件和事件处理的知识点。在.NET ...

    Extjs之旅-combox之远程加载数据

    本篇我们将深入探讨“Extjs之旅”中的一个关键组件——Combox(组合框),特别是其远程加载数据的特性。 Combox在ExtJS中是一个非常灵活的控件,它可以看作是下拉列表和文本输入框的结合体,用户可以输入文本搜索,...

    Ext 异步加载添加 删除节点 修改combobox选择项

    最后,我们来看如何在Ext 2.0的本地模式下动态修改ComboBox的选择项。当ComboBox的选项数据已经加载到本地,但存储方式与ComboBox的store不匹配时,我们需要进行数据转换。假设树的节点数据需要映射到ComboBox的...

    combox 实现搜寻功能

    ### combox实现搜寻功能详解 在Java编程中,`JComboBox`是Swing库中的一个组件,用于创建下拉列表或组合框。它能够显示一个可编辑的文本字段和一个下拉列表,用户可以在其中选择一个选项或者手动输入文本。`...

    VBCombox实现下拉

    至于"Combox 搜索"这个压缩包文件名,可能包含了实现自动下拉功能的源代码,或者是用于演示的示例项目。通常,这样的项目文件可能包含一个VB工程,里面包含了Form窗口、ComboBox控件以及其他相关组件,以及上述的...

    Winform中的ComBox控件实现换行 当文本长度达到最大时实现换行

    然而,默认情况下,ComBox控件的显示文本是单行的,当文本长度超过一定限制时,超出的部分会被截断,显示为省略号。在某些设计需求中,我们可能希望当文本过长时,ComBox能自动换行以展示完整内容。本文将详细介绍...

    VC重绘combox

    9. **注意事项**:自定义绘制过程中需要注意保持控件的可访问性和功能完整,例如,确保焦点状态下的可见提示以及键盘导航仍然有效。 这个小样例“ziran”可能是一个简单的实现,展示了如何在VC++中实现ComboBox的...

    js 实现combox 树选择

    而在这种特殊情况下,下拉列表不仅包含简单的选项,还展示为树形结构,允许用户通过多级层次进行选择。 要实现这样的功能,首先我们需要理解几个关键概念: 1. **HTML元素**:ComboBox的构建基础是HTML的`&lt;select&gt;...

Global site tag (gtag.js) - Google Analytics