- 浏览: 471762 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (190)
- ExtJS (40)
- JavaScript (16)
- Java设计模式 (13)
- Html (10)
- Tomcat (9)
- myeclipse (5)
- JSP (5)
- CSS (10)
- JS/CSS (1)
- windows (12)
- Navicat For MySQL (1)
- struts2 (6)
- Spring2.0 (1)
- Java反射机制 (5)
- hibernate (9)
- java (17)
- B/SWeb完美打印方案 (1)
- 数据库相关 (4)
- java web报表 (1)
- 报表打印 (2)
- java泛型 (1)
- Servlet (2)
- SVN (7)
- Log4j (0)
- android (3)
最新评论
-
kation733:
斯蒂芬斯蒂芬多萨法阿凡达是否阿萨德
同时开启两个Tomcat -
BlueBing:
一路的夏天 写道楼主的代码会报错吧!在前面的时候String ...
使用Java反射机制遍历实体类的属性和类型 -
ying890:
非常感谢!
Ext JS中文乱码解决方案 -
zhylandroid:
谢谢了,对我很有帮助
DatabaseMetaData开发实务(上) -
wendy.wujing:
maxHttpHeaderSize="8192&qu ...
查看Tomcat配置的端口
Ext.form.ComboBox 属性详解(见注释)及使用方法
定义一个ComboBox:
- Wayfoon.YearComb = new Ext.form.ComboBox({
- id:'cbid',
- name:'year',//name只是改下拉的名称
- hiddenName:'hyear',//提交到后台的input的name
- width : 80,
- store : Wayfoon.Year,//填充数据
- emptyText : '请选择',
- mode : 'local',//数据模式,local代表本地数据
- readOnly : true,//是否只读
- value : (new Date()).YEAR,//默认值,要设置为提交给后台的值,不要设置为显示文本
- triggerAction : 'all',// 显示所有下列数据,一定要设置属性triggerAction为all
- allowBlank : false,//不允许为空
- valueField : 'value',//值
- displayField : 'text',//显示文本
- editable: false,//是否允许输入
- forceSelection: true,//必须选择一个选项
- blankText:'请选择'//该项如果没有选择,则提示错误信息
- });
注意:
id:'cbid',//作用不大,可以自动生成
name:'year',//name只是改下拉的名称,几乎没有作用
hiddenName:'hyear',//提交到后台的input的name,重要
使用firebug查看html代码, 以上代码生成html是
- <div id="ext-gen279" class="x-form-field-wrap x-trigger-wrap-focus" style="width: 80px;">
- <input id="hyear" type="hidden" name="hyear" value="01"/>
- <input id="cbid" class="x-form-text x-form-field x-form-focus" type="text" autocomplete="off" size="24" readonly="" style="width: 55px;"/>
- <img id="ext-gen280" class="x-form-trigger x-form-arrow-trigger" src="http://www.yibenzhang.com/JSFW/ext/resources/images/default/s.gif"/>
- </div>
可以看出一个下列选择 主要由三部分组成 两个input 和一个img。例外 name属性没有起到作用。
combobox中要用到的数据:可以改成数据库读取数据
- Wayfoon.Year = new Ext.data.SimpleStore({
- fields : ['value', 'text'],
- data : [['2008', '2008'], ['2009', '2009']]
- });
如果要下列框级联,在combox 里面加上
- listeners:{
- select:{
- fn:function(combo,record,index) {
- var store;
- if(record.get('value')=='广东')
- {
- store = Wayfoon.MMS.TypeStore5;
- }
- else if(record.get('value')=='广西')
- {
- store = Wayfoon.MMS.TypeStore51;
- }
- Ext.getCmp('city'+id).clearValue();
- Ext.getCmp('city'+id).store = store;
- if(Ext.getCmp('city'+id).view){
- Ext.getCmp('city'+id).view.setStore(store);
- }
- Ext.getCmp('city'+id).enable();
- }
- }
- }
比如省份和城市级联
- //省份数据
- Wayfoon.MMS.TypeStore4 = new Ext.data.SimpleStore({
- fields : ['value', 'text'],
- data : [['', '全部省份'],
- ['广东', '广东'], ['广西', '广西'], ['黑龙江', '黑龙江'],['吉林', '吉林'],['陕西', '陕西'],
- ['浙江', '浙江'],['江苏', '江苏'],['四川', '四川'],['湖北', '湖北'],['新疆', '新疆'],
- ['云南', '云南'],['安微', '安微'],['福建', '福建'],['江苏', '江苏'],['山东', '山东'],
- ['北京','北京']]
- });
- //城市数据1
- Wayfoon.MMS.TypeStore5 = new Ext.data.SimpleStore({
- fields : ['value', 'text'],
- data : [['', '全部城市'], ['深圳市', '深圳市'], ['广州市', '广州市']]
- });
- //城市数据2
- Wayfoon.MMS.TypeStore51 = new Ext.data.SimpleStore({
- fields : ['value', 'text'],
- data : [['', '全部城市'], ['桂林', '桂林'], ['山水', '山水']]
- });
- //省份combo
- Wayfoon.Province=function(id){
- var comboProvince=({
- xtype : 'combo',
- //name : 'combo-province',
- readOnly : true,
- triggerAction : 'all',
- allowBlank : true,
- width : 60,
- store : Wayfoon.MMS.TypeStore4,
- value : '',
- //pageSize:10,
- //typeAhead: true,
- //resizable : true,
- hiddenName : 'hComboProv',
- displayField : 'text',
- valueField : 'value',
- mode : 'local',
- emptyText : '选择省份',
- listeners:{
- select:{
- fn:function(combo,record,index) {
- var store;
- if(record.get('value')=='广东')
- {
- store = Wayfoon.MMS.TypeStore5;
- }
- else if(record.get('value')=='广西')
- {
- store = Wayfoon.MMS.TypeStore51;
- }
- Ext.getCmp('city'+id).clearValue();
- Ext.getCmp('city'+id).store = store;
- if(Ext.getCmp('city'+id).view){
- Ext.getCmp('city'+id).view.setStore(store);
- }
- Ext.getCmp('city'+id).enable();
- }
- }
- }
- });
- return comboProvince;
- }
- //城市combo
- Wayfoon.City=function(id){
- var comboCity=(
- {
- id:'city'+id,
- xtype : 'combo',
- readOnly : true,
- triggerAction : 'all',
- allowBlank : true,
- width : 60,
- store : new Ext.data.Store(),//Wayfoon.MMS.TypeStore5,
- value : '',
- hiddenName : 'hComboCity',
- displayField : 'text',
- valueField : 'value',
- mode : 'local',
- emptyText : '选择城市'
- });
- return comboCity;
- }
发表评论
-
功能: 用户点击grid的表头菜单显示/隐藏列,拉动列、重新刷新页面后保留。
2011-01-05 11:56 2364var grid = new Ext.grid.GridPa ... -
fieldSet组件的基本用法 将fieldSet上的边框去掉或者改变内边距
2010-05-29 09:58 10548先把fieldSet简单的回忆下: fieldset:对表单进 ... -
ext grid 没有数据时不显示横向滚动条的解决办法
2010-05-28 14:18 2663EXT Grid 没有数据时不显示横向滚动条的解决办法: t ... -
ExtJS中动态设置TextField的readOnly属性
2010-04-28 14:49 2420假设 textField, 它的 id = 'textFiel ... -
Ext监控回车按键
2010-03-06 11:25 2399listeners : {specialkey : funct ... -
Ext.Ajax类
2010-03-05 10:35 1921Ext.Ajax类Ext.Ajax类是一个简单而清晰的XHR封 ... -
Ext JS 键映射:键盘作为第一类操作对象
2010-02-26 15:07 2293Ext.KeyMap Ext提供几个不同的组件,支持键盘导航, ... -
如何在服务器端 读取Ext.ux.UploadDialog上传的文件?
2009-12-10 17:09 2224问题已经解决。 1。要导入 commons.io.jar包 ... -
ext 多文件上传控件 Ext.ux.UploadDialog 使用中的问题
2009-12-10 17:03 3325Ext.ux.UploadDialog 像ext一 ... -
Ext.data专题五:常用proxy之MemoryProxy
2009-08-26 14:44 3953MemoryProxy只能从JavaScript对象获得数据, ... -
Ext.data专题四:Ext.data.Store
2009-08-26 14:42 2823Ext.data.Store是EXT中用来进行数据交换和数据交 ... -
Ext.data专题三:Ext.data.Record
2009-08-26 14:40 5344Ext.data.Record就是一个设 ... -
Ext.data专题二:Ext.data.Connection
2009-08-26 14:38 1432Ext.data.Connection是对Ext.li ... -
Ext.data专题一:Ext.data简介
2009-08-26 14:36 1282Ext.data在命名空间中定义了一系列store、reade ... -
深入浅出Ext JS:数据存储与传输
2009-07-11 15:40 248010.4 Ext.data.Store Ex ... -
EXT核心API详解(十一)_Ext.data.Store/GroupingStore/JsonStore/SimpleStore
2009-07-03 17:17 5651Ext.data.Storestore是一个为 ... -
《Ext实战》节选:自定义单元格的显示格式
2009-07-02 14:49 1338有时候,需要在Grid中显示一个链接,或根据数字的大小显示不同 ... -
ext afteredit详解
2009-07-02 09:48 2415grid.on("afteredit",a ... -
ext_comboBox二级级联下拉框
2009-06-27 16:11 1809Ext.onReady(function(){ ... -
ExtJS 给textfield赋值的方法总结
2009-06-25 15:21 3322var value="值"; (1) f ...
相关推荐
### Ext.form表单中各种属性应用详解 #### 1. Ext.form.NumberField **Ext.form.NumberField** 是 **Ext.form.TextField** 的一个扩展,它专为处理数字输入而设计,提供了一系列与数值相关的配置选项。 - **...
本示例探讨如何利用Ext JS中的`Ext.form.field.ComboBox`组件,结合Java后端和JSON数据格式,来创建这样一个功能。 `Ext.form.field.ComboBox`是Ext JS框架中一个强大的组件,它提供了下拉列表的功能,可以用于创建...
5. `field`:`Ext.form.Field`是所有表单字段的基础类,提供了一般性的属性和方法,如验证和状态管理。 6. `fieldset`:`Ext.form.FieldSet`是用于组织和分组表单字段的容器,通常包含一个标题和可选的边框。 7. `...
在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...
8. **组合框模式**:`Ext.form.TextField`还可以扩展为`Ext.form.ComboBox`,实现下拉选择功能,这在需要用户从预定义选项中选择时非常有用。 在压缩包中的`Ext.form.TextField`文件夹,很可能是包含了一个或者多个...
用EXT来实现下拉框ComboBox 下拉框可以实现分页
总结来说,在Ext.js中,获取`Ext.Store`应使用`Ext.getStore`方法,而不是`Ext.getCmp`,因为Store是通过`storeId`在内存中注册和管理的,而不是作为页面上的一个可视组件。同时,Store的设计方式有助于数据的安全性...
在ExtJS中,可以使用`addListener`或`on`方法来添加事件监听器。 7. **UI反馈**:在用户进行全选或全取消操作后,界面上应有明显的反馈,例如改变全选按钮的文本或图标状态,以反映当前的选择状态。 8. **优化性能...
var comboBox = Ext.create('Ext.form.ComboBox', { fieldLabel: '选择项', store: ['选项1', '选项2', '选项3'], displayField: 'text', valueField: 'text', }); ``` 2. **添加或删除选项**: 当需要添加...
53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext....
Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择部门', store: Ext.create('Ext.data.TreeStore', { model: 'Department', root: { text: '所有部门', expanded: true, children: [ /* ... *...
ExtJS ComboBox级联是一种在Web应用中常见的交互方式,它允许用户从下拉列表中选择一个值,并且这个选择会影响到另一个ComboBox的选择项,通常用于表示层级关系的数据,比如省份-城市-区县。这种功能在数据筛选、...
EXTJS的`GridPanel`提供了`selModel`属性来管理选择,你可以通过`selModel.selectAll()`和`selModel.deselectAll()`方法来实现全选和去全选。 标签中的“源码”意味着你需要理解EXTJS的底层工作原理,而“工具”则...
1. **创建一个新的类**:定义一个继承自Ext.form.ComboBox的新类,添加必要的配置和方法来支持多选。 2. **配置store**:设置一个数据存储(Store)来保存可选项,确保每个记录都有一个表示选中状态的字段,如`...
在Web开发中,Ext JS是一个流行的JavaScript框架,它提供了丰富的UI组件,包括级联下拉框(Combobox)。本篇将深入探讨如何在Ext JS中实现级联下拉框的功能。 首先,我们需要了解Ext JS中的Combobox组件。Combobox...
- **功能描述**:Component 是所有 Ext 组件的基础类,它定义了所有 Ext 组件都共有的基本属性和方法。 - **主要用途**:作为所有其他组件的基类。 **1.5 Container (Ext.Container)** - **xtype**: `container` -...
以上就是关于Ext.grid.EditorGridPanel的基本介绍和使用方法。在实际开发中,你可以根据项目需求调整配置,实现更多功能,如排序、过滤、分页等。通过深入理解和实践,你将能够熟练掌握这个强大的表格编辑组件。
在本文中,我们将深入探讨如何使用Ext 2.0的ComboBox组件实现省份和城市联动选择框的功能。Ext是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括ComboBox,用于创建下拉选择框。在这个例程中,我们将看到...
editor: new Ext.form.ComboBox({ id: "combo_process", store: store_process, valueField: "process_id", displayField: "process_name", forceSelection: true, typeAhead: true, triggerAction: 'all', ...
EXT2_combobox_form.rar_combobox ext_ext 这个标题暗示我们关注的是一个与EXT2相关的项目,其中包含了关于form表单和combobox的示例。EXT是一个流行的JavaScript库,主要用于构建富客户端应用,特别是Web应用的用户...