功能说明:首先是根据一个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的作用主要是匹配根据国家获取的都市的名称。
分享到:
相关推荐
Ext.grid.EditorGridPanel是Ext JS库中的一个组件,主要用于创建具有可编辑单元格的表格。这个组件在数据展示和编辑方面提供了丰富的功能,是构建数据密集型应用的理想选择。下面将详细阐述其特点、工作原理及如何...
为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下: 代码如下: //部门列表 var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data....
在描述中提到的`Ext.grid.EditorGridPanel`,是用于创建可编辑的表格面板,它继承自`GridPanel`。通过在列配置中指定`editor`属性,我们可以为每个单元格添加编辑器,例如`TextField`、`ComboBox`等,使得用户可以...
在Ext中,Button不仅可以显示文本,还可以包含图标,支持多种样式和行为配置。 ##### 3. **ColorPalette(颜色调色板)** ColorPalette组件提供了一个颜色选择器,允许用户从预定义的颜色列表中选择颜色。这对于...
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 JS版本3.0的Grid中嵌入动态ComboBox,并实现了用户选择数据后更新Grid显示的功能。这种动态交互能够大大提高用户对Grid数据处理的便捷性和体验感。在实际应用中,根据需求的不同,...
**2.5 Editor Grid Panel (Ext.grid.EditorGridPanel)** - **xtype**: `editorgrid` - **功能描述**:Editor Grid Panel 是一个支持行级编辑的网格面板。 - **主要用途**:适合于需要对表格中的数据进行编辑的场景...
在EXT JS库中,"ext的edittreegrid实现"是一种功能强大的组件,它结合了树形视图(Tree)和编辑网格(EditorGrid)的功能,允许用户在具有层次结构的数据上进行直观的编辑操作。这个组件对于那些需要管理结构化且...
- `ext-all-dev.js`:带有额外开发信息的版本,便于开发过程中的调试和错误追踪。 - `ext.js`、`ext-debug.js`、`ext-dev.js`:类似`ext-all.js`系列文件,但只包含了基本的Ext JS功能,适合于特定需求的轻量级项目...
在页面完全加载后,通常会调用`Ext.onReady`函数,确保ExtJS在DOM完全就绪后执行,避免了元素未加载完成的问题。 #### 组件库详解 ExtJS的核心优势在于其丰富的组件库,几乎涵盖了Web应用开发的所有需求: - **...
在ExtJS中,下拉列表树控件通常由两个主要部分组成:`ComboBox` 和 `TreePanel`。`ComboBox` 是基础的下拉框组件,而 `TreePanel` 则是用于展示树状数据的组件。要创建一个下拉列表树,我们需要将 `TreePanel` 配置...
1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、...73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65
- **用途**: 在长时间运行的任务中显示完成百分比,增强用户体验。 **Ext.StatusBar** - **描述**: 底部状态栏,用于显示系统或应用的状态信息。 - **用途**: 常见于应用程序底部,显示操作结果、系统状态等。 **...
- **`editorgrid` (Ext.grid.EditorGridPanel)**: 可编辑的表格组件,允许用户直接在表格内进行数据编辑。 - **`propertygrid` (Ext.grid.PropertyGrid)**: 属性表格组件,专门用于展示对象的属性。 - **`editor` ...
11. **`editorgrid`** - `Ext.grid.EditorGridPanel`,可编辑的表格组件,允许用户直接在表格中编辑数据。 12. **`propertygrid`** - `Ext.grid.PropertyGrid`,属性表格组件,用于展示对象的属性。 13. **`...
11. **`editorgrid`:** 可编辑的表格组件,允许用户直接在表格中编辑数据,通过`Ext.grid.EditorGridPanel`类实现。 12. **`propertygrid`:** 属性表格组件,用于展示对象的属性列表,通过`Ext.grid.PropertyGrid`...
- **EditorGridPanel**: `Ext.grid.EditorGridPanel`,可编辑的表格组件。 - **GridPanel**: `Ext.grid.GridPanel`,表格组件。 - **PagingToolbar**: `Ext.PagingToolbar`,分页工具栏。 - **Panel**: `Ext....
- **描述**: 显示状态信息的状态栏,版本2.2加入后,在3.0版本中被移除。 8. **`colorpalette`:** - **`xtype`**: `colorpalette` - **`Class`**: `Ext.ColorPalette` - **描述**: 一个允许用户选择颜色的颜色...