如题,tabpanel有两个tab子项,左边放gridpanel,右边放formpanel,当选中gridpanel的某一行,然后点击formpanel的tab,该行数据填充到formpanel中相对应的组件中,代码如下
GW.StudentInfoImportModule.DataTabPanel = Ext.extend(Ext.TabPanel,{
constructor : function (config){
Ext.apply(this,config);
GW.StudentInfoImportModule.DataTabPanel.superclass.constructor.call(this,{
region : 'center',
border : false,
activeItem : 0,
minTabWidth: 100,
tabWidth: 120,
items : [new GW.StudentInfoImportModule.ImportedData({
title:'导入的数据',iconCls:'module-edit-icon',border:false
}),
new GW.StudentInfoImportModule.SingleStudentData({
title:'出错的数据',iconCls:'module-edit-icon',border:false,
listeners:{
activate:function (tab){
//第一步先获得gridpanel里面选中的列,第二步获得该列的数据,第三步获得formpanel,第四步加载
var studentInfo = Ext.getCmp('studentInfoImportedData');
if(studentInfo.getSelectionModel().getSelected()){
var jsonData = studentInfo.getSelectionModel().getSelected().json;
var studentForm = Ext.getCmp('singleStudentBaseInfoFormPanel').getForm();
for(var name in jsonData){
setData(studentForm,jsonData,name);
}
}
}
}
})
]
});
}
});
setData = function (studentForm,jsonData,name){
if(studentForm.findField(name)){
studentForm.findField(name).setValue(jsonData[name]);
}
};
分享到:
相关推荐
Store则是一个数据容器,它负责存储和管理数据模型,可以与各种组件(如GridPanel或FormPanel)进行数据绑定,实现数据的实时更新和同步。 自我扩展(self-extending)是一种设计模式,允许我们在现有的类基础上...
- 在 GridPanel 中选择一行或多行数据,执行删除操作。 - **多选功能**:启用 GridPanel 的多选功能,以便一次删除多条记录。 - **确认提示**:在实际删除前弹出确认对话框。 - **更新数据**:删除选中的数据行,...
1. **创建(Create)**:使用EXT的FormPanel组件收集用户输入,然后通过Ajax请求将数据提交到服务器端保存。例如,创建一个新的记录时,我们可以通过监听表单的submit事件,获取表单数据,并使用Ajax发送POST请求。 ...
不过在打开窗口前,需要先从GridPanel中选中的行获取已有数据,将这些数据填充到表单中。当用户修改完毕并提交表单后,更新选中的行的数据,并进行数据的刷新操作。 整体而言,ExtJs GridPanel实现增删改功能涉及到...
提交表单时,通常会触发一个AJAX请求,将数据发送到服务器,由Java后端处理并保存到数据库。 接着是读取(Read)操作,这通常通过数据网格(GridPanel)完成。数据网格展示来自服务器的数据,并且可以实时更新。...
在这个项目中,我们可能发现如GridPanel(表格面板)、FormPanel(表单面板)等核心组件的运用,这些都是ExtJs在数据展示和用户输入中的基石。 玉琴蝶园的应用可能包括以下关键部分: 1. 数据模型与Store:在ExtJs...
表格组件是展示大量数据的最佳选择,GridPanel则是Extjs中最强大的表格组件之一。 - **表格、表格面板**: 简要介绍了表格组件的基本概念。 - **列模型与数据**: 详细解释了如何定义列模型以及填充表格数据。 - **...
- GridPanel是Extjs中用于显示表格数据的组件。 - 支持分页、排序、过滤等多种功能。 - **列模型与数据** - 列模型定义了表格的列结构,包括列名、宽度、对齐方式等。 - 数据通常通过Store加载到表格中。 - **...
- 列模型定义了表格中每一列的显示方式和数据绑定。 3. **加强版列模型** - 介绍如何使用更复杂的列模型配置来实现高级功能。 #### 二十、行模型与Grid视图 1. **行选择模型** - 控制用户如何选择表格中的行。 2...
通过`items`属性,可以将多个组件嵌入到一个Panel中。 3. **Ext.grid.GridPanel**: Grid是EXTJS处理表格数据的主要组件,支持分页、排序、过滤等功能。GridPanel包括`store`(数据源)、`columns`(列定义)和`...
ExtJS的Ajax请求通常通过Store的proxy配置来触发,获取数据后自动填充GridPanel或FormPanel。 **总结** "Nhibernate+extjs的增删改查的例子"展示了如何在ASP.NET MVC项目中结合Nhibernate和ExtJS实现高效的数据...
`Ext.form.FormPanel`是Ext框架中用于处理表单的主要组件之一,它提供了一系列的方法来管理和提交表单数据。 - **submit方法**:`FormPanel.getForm().submit()`方法用于提交当前表单。该方法支持传递一些参数,如`...
4. **绑定数据**: 通过数据存储(Store)将数据绑定到组件。 5. **渲染**: 设置组件的渲染位置并显示。 #### 二、ExtJS 的 Heart—Ext.Element **2.1 如何理解 Ext.Element** `Ext.Element` 是 ExtJS 中的一个...
在Ext应用中,可能会有一个特殊的组件或者按钮,当用户点击时,会触发一个Ajax请求到服务器,服务器接收到请求后生成Excel文件,然后返回一个下载链接。这种功能对于数据密集型的应用非常有用,用户可以方便地将数据...