`
zhaolianyang
  • 浏览: 97439 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext中combobox在EditorGridPanel中带参数的显示问题

EXT 
阅读更多
功能说明:首先是根据一个GridPanel中的一列数据在另一个EditorGridPanel显示对应的这一列的子菜单的显示。
一、首先定义一个ColumnModel:
var clm_CM = new Ext.grid.ColumnModel({
 		columns:[
        	{header:'<center>编号</center>',dataIndex:'CODE'},
        	{header:'<center>公司名称</center>',dataIndex:'NAME'},
        	{header:'<center>英文名称</center>',dataIndex:'EN'},
        	{header:'<center>所属国家</center>',dataIndex:'COUNTRY_NAME'},
	{header:'<center>code</center>',dataIndex:'COUNTRY_CODE',hidden:true }
    ]});


二、定义GridPanel,一些事件的逻辑处理也在这里:
 var grd_WestGridPanel = new Ext.grid.GridPanel({
    	title : '公司列表',
		cm : clm_CM,
		//sm : rsm_Navigate,
		width : 600,
		loadMask : true,
		region : 'west',
		store : sto_Store,
		enableColumnResize : false,
		enableColumnMove : true,
		viewConfig : {
			forceFit : true
		},
		listeners:{
			'cellclick':function(grid, rowIndex, columnIndex, e){
				var rec = grid.getStore().getAt(rowIndex);
				txtf_Code.setValue(rec.get('CODE'));
				txtf_Name.setValue(rec.get('NAME'));
				txtf_En.setValue(rec.get('EN'));
				cmb_Country.setRawValue(rec.get('COUNTRY_NAME'));
				cmb_Country.setValue(rec.get('COUNTRY_CODE'));
				MODIFY_NO = rec.get('MODIFY_NO');
				btn_Applicable.enable();
				btn_AddLocalContact.enable();
				btn_Commit.disable();
				
				sto_AddressGridPanel_Store.load({
					params : {
						'COUNTRY_CODE' : rec.get('COUNTRY_CODE'),
						'CODE' : txtf_Code.getValue(),
						'funcId' : params.funcId
					}
			    });
				sto_cmb_CityByCountryCode_Store.load({
			    	params : {
			    		'COUNTRY_CODE' : rec.get('COUNTRY_CODE'),
						'funcId' : params.funcId
			    	}
				}); 
			}
		}  
	});


三、定义上面的store:
 var sto_Store =new Gt.common.engine.JsonStore({
        url :...,//根据情况自己设置
        root : 'navigate',
        fields : [
        	'CODE',
        	'NAME',
        	'EN',
          'COUNTRY_NAME',
          'COUNTRY_CODE',
          'MODIFY_NO'
        ],
        autoLoad : false,
        autoDestroy : true
    });


四、定义另外的一个EditorGridPanel:
 var grd_AddressGridPanel = new Ext.grid.EditorGridPanel({
    	title: '当前联络地址',
		cm : clm_AddressCm,
		//sm : rsm_AddressSm,
		plugins:[chb_delete],
		clicksToEdit:1,
		tbar: tlb_AddLocalContact,
		loadMask : true,
		region : 'center',
		store : sto_AddressGridPanel_Store,
		enableColumnResize : false,
		enableColumnMove : true,
		viewConfig : {
			scrollOffset : 20,
			forceFit : true
		}
	});

五、定义EditorGridPanel的ColumnModel:
 var clm_AddressCm = new Ext.grid.ColumnModel([
        {header:'<center>'都市名称'</center>',dataIndex:'CITY_CODE',
        	editor:new Ext.form.ComboBox({
		    	store: sto_cmb_CityByCountryCode_Store,
		        valueField:'CITY_CODE',   
		        displayField:'CITY_NAME',
		        mode: 'local',
		        triggerAction: 'all'
		    }),
		    renderer:function(value){
				if(value==''){
					return Gt.common.util.getMessage('PJ0022.PAG007.LABEL.021');
				}
				else{
					cmb_City.setValue(value);
					return cmb_City.getRawValue();
		    	}
		    }
		},
        {header:'<center>地址</center>',dataIndex:'ADDRESS',editor:new Ext.form.TextField({allowBalank:false})},
        {header:'<center>电话</center>',dataIndex:'TEL_NO',editor:new Ext.form.TextField({allowBalank:false})},
        {header:'<center>电话类型</center>',dataIndex:'TEL_NO_TYPE',editor: cmb_Type, renderer: func_type},
        chb_delete
    ]);


六、定义EditorGridPanel中的store:
 var sto_AddressGridPanel_Store =new Gt.common.engine.JsonStore({
        url : '...',//根据情况自己设置
        root : 'LocalContact',
        fields : [
        	'COUNTRY_CODE',
    		'CODE',
    		'BRANCH_NO',				
        	'CITY_CODE',
        	'CITY_NAME',
        	'ADDRESS',
        	'TEL_NO',
          'TEL_NO_TYPE',
          'DELETE_FLG',
          'MODIFY_NO'
            ],
        autoLoad : false,
        autoDestroy : true
    });


七、定义EditorGridPanel中combobox的store(根据国家获取都市):
// 都市名 ComboBoxのStore byCountryCode
    var sto_cmb_CityByCountryCode_Store =new Gt.common.engine.JsonStore({
        url : ...,//根据情况自己设置
        root : 'getCityByCountryCode',
        fields : [
        	'CITY_CODE',
        	'CITY_NAME'
        	],
        autoLoad : false,
        autoDestroy : true
    });


八、定义一个隐藏的combobox(显示所有都市名称):
    // 都市 ComboBox
    var cmb_City = new Ext.form.ComboBox({
    	hidden : true,
        store : sto_cmb_City_Store,
        valueField : 'CITY_CODE',   
        displayField : 'CITY_NAME'
    });

九、隐藏combobox的store:
 var sto_cmb_City_Store =new Gt.common.engine.JsonStore({
        url :...,//根据情况自己设置
        root : 'getCity',
        fields : [
        	'CITY_CODE',
        	'CITY_NAME'
            ],
        autoLoad : true,
        autoDestroy : true
    });


特别说明:用隐藏的combobox的作用主要是匹配根据国家获取的都市的名称。
3
3
分享到:
评论

相关推荐

    可编辑表格Ext.grid.EditorGridPanel

    Ext.grid.EditorGridPanel是Ext JS库中的一个组件,主要用于创建具有可编辑单元格的表格。这个组件在数据展示和编辑方面提供了丰富的功能,是构建数据密集型应用的理想选择。下面将详细阐述其特点、工作原理及如何...

    Extjs EditorGridPanel中ComboBox列的显示问题

    为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下: 代码如下: //部门列表 var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data....

    Ext TreePanel

    在描述中提到的`Ext.grid.EditorGridPanel`,是用于创建可编辑的表格面板,它继承自`GridPanel`。通过在列配置中指定`editor`属性,我们可以为每个单元格添加编辑器,例如`TextField`、`ComboBox`等,使得用户可以...

    Ext组件说明 Ext组件概述

    在Ext中,Button不仅可以显示文本,还可以包含图标,支持多种样式和行为配置。 ##### 3. **ColorPalette(颜色调色板)** ColorPalette组件提供了一个颜色选择器,允许用户从预定义的颜色列表中选择颜色。这对于...

    EXT核心API详解

    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....

    extjs中grid中嵌入动态combobox的应用

    最后,通过上述步骤,就能在Ext JS版本3.0的Grid中嵌入动态ComboBox,并实现了用户选择数据后更新Grid显示的功能。这种动态交互能够大大提高用户对Grid数据处理的便捷性和体验感。在实际应用中,根据需求的不同,...

    Ext组件描述,各个组件含义

    **2.5 Editor Grid Panel (Ext.grid.EditorGridPanel)** - **xtype**: `editorgrid` - **功能描述**:Editor Grid Panel 是一个支持行级编辑的网格面板。 - **主要用途**:适合于需要对表格中的数据进行编辑的场景...

    ext的edittreegrid实现

    在EXT JS库中,"ext的edittreegrid实现"是一种功能强大的组件,它结合了树形视图(Tree)和编辑网格(EditorGrid)的功能,允许用户在具有层次结构的数据上进行直观的编辑操作。这个组件对于那些需要管理结构化且...

    ext4.2学习之路

    - `ext-all-dev.js`:带有额外开发信息的版本,便于开发过程中的调试和错误追踪。 - `ext.js`、`ext-debug.js`、`ext-dev.js`:类似`ext-all.js`系列文件,但只包含了基本的Ext JS功能,适合于特定需求的轻量级项目...

    ext学习之路

    在页面完全加载后,通常会调用`Ext.onReady`函数,确保ExtJS在DOM完全就绪后执行,避免了元素未加载完成的问题。 #### 组件库详解 ExtJS的核心优势在于其丰富的组件库,几乎涵盖了Web应用开发的所有需求: - **...

    ExtJS下拉列表树控件

    在ExtJS中,下拉列表树控件通常由两个主要部分组成:`ComboBox` 和 `TreePanel`。`ComboBox` 是基础的下拉框组件,而 `TreePanel` 则是用于展示树状数据的组件。要创建一个下拉列表树,我们需要将 `TreePanel` 配置...

    ExtJS入门教程(超级详细)

    1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、...73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65

    extjs控件列表

    - **用途**: 在长时间运行的任务中显示完成百分比,增强用户体验。 **Ext.StatusBar** - **描述**: 底部状态栏,用于显示系统或应用的状态信息。 - **用途**: 常见于应用程序底部,显示操作结果、系统状态等。 **...

    ExtJs xtype一览

    - **`editorgrid` (Ext.grid.EditorGridPanel)**: 可编辑的表格组件,允许用户直接在表格内进行数据编辑。 - **`propertygrid` (Ext.grid.PropertyGrid)**: 属性表格组件,专门用于展示对象的属性。 - **`editor` ...

    ExtJs组件类的对应表

    11. **`editorgrid`** - `Ext.grid.EditorGridPanel`,可编辑的表格组件,允许用户直接在表格中编辑数据。 12. **`propertygrid`** - `Ext.grid.PropertyGrid`,属性表格组件,用于展示对象的属性。 13. **`...

    extJs xtype 类型

    11. **`editorgrid`:** 可编辑的表格组件,允许用户直接在表格中编辑数据,通过`Ext.grid.EditorGridPanel`类实现。 12. **`propertygrid`:** 属性表格组件,用于展示对象的属性列表,通过`Ext.grid.PropertyGrid`...

    Extjs实用教程

    - **EditorGridPanel**: `Ext.grid.EditorGridPanel`,可编辑的表格组件。 - **GridPanel**: `Ext.grid.GridPanel`,表格组件。 - **PagingToolbar**: `Ext.PagingToolbar`,分页工具栏。 - **Panel**: `Ext....

    Extjs xtype集合

    - **描述**: 显示状态信息的状态栏,版本2.2加入后,在3.0版本中被移除。 8. **`colorpalette`:** - **`xtype`**: `colorpalette` - **`Class`**: `Ext.ColorPalette` - **描述**: 一个允许用户选择颜色的颜色...

Global site tag (gtag.js) - Google Analytics