ext 的 RowExpander 官方的 只能加在 html,不能加载 ext的 组件对象。由于特殊的需求,需在RowExpander里边加一个form,所以不得不,自定义 RowExpander 组件。不多废话。
首先 ,去ext的官方论坛下载一个订制RowExpander.js我传附件把 。 把他替换原来的RowExpander.js 这个文件。
然后,这是我写的代码,在RowExpander 中添加了一个FormPanel 。
var expander = new Ext.ux.grid.RowPanelExpander({
createExpandingRowPanelItems: function(record, rowIndex){
var panelItems = [
new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
width: 650,
defaults: {width: 330},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
})
],
bbar: [{
text: 'Save',
id: 'kashdk' ,
handler:function(){
alert(record.get('company'));
}
},{
text: 'Cancel',
id: 'aopsduah'
}]
})
];
return panelItems;
}
});
相关推荐
7. **插件支持**:EXT JS Grid有多种插件,如CellEditing用于单元格编辑,RowExpander用于行展开显示更多信息,RowBody用于在行内显示额外内容。 8. **响应式设计**:EXT JS的Grid支持响应式布局,自动适应不同屏幕...
在EXTJS框架中,`Ext.grid.plugin.RowExpander`是一个非常有用的插件,它允许在网格行中展开和折叠额外的信息区域。然而,在EXTJS 4.2版本中,遇到了一个问题,即`RowExpander`插件无法正确触发`collapsebody`和`...
6.3.4 在form中使用Ext.Direct加载数据 185 6.3.5 在form中使用Ext.Direct提交数据 187 6.3.6 使用polling方式进行轮询 189 6.4 本章小结 191 第7章 Store 192 7.1 Store的结构 192 7.2 Ext.data.Field 197 7.3 Ext....
6. **行编辑**:ExtGrid 支持行内编辑,通过`editable`和`editors`配置,可以在选定行的单元格内直接编辑数据。同时,可以监听`edit`事件来处理数据的保存操作。 7. **工具栏**:可以自定义网格顶部或底部的工具栏...
例如,在一个Ext.grid.Panel的配置中,可以添加一个plugins属性,其值为一个RowExpander的实例。 其次,要实现特定行的默认展开,需要在GridPanel加载完成后,通过监听加载完成事件或直接在回调函数中进行操作。在...
- **Ext.onReady 事件**:了解如何使用此事件来确保页面加载完毕后再执行脚本。 - **动态效果**:通过使用 Ext.Fx 类和 Ext.Element 类中的动画函数,可以为界面添加各种动态效果。 #### 六、元素操作与模板 - **...
- **Ext.onReady 事件**:确保文档加载完成后才执行脚本。 - **Ext.Fx 类**:提供了动画效果的支持,如淡入淡出、滑动等。 - **Ext.Element 类中的动画函数**:可以直接对 DOM 元素应用动画效果。 #### 六、元素...
- 通过`Ext.form.FieldSet`组件可以将表单分割成多个部分。 - 每个部分可以有自己的标题和布局方式。 - **表单初始化** - 初始化表单通常涉及设置初始值、绑定事件处理器等。 - 可以在`Ext.form.FormPanel`的`...
- **示例**: `new Ext.grid.RowExpander({ bodyTpl: new Ext.XTemplate('<div>{extraInfo}</div>') })`。 **19.4 分组 GridPanel** - **功能**: 按照特定字段对表格数据进行分组。 - **示例**: `grouping: true`。...
- **数据处理**: 使用`Ext.data`包下的类进行数据加载、解析和存储。 - **ComboBox**: 下拉列表组件,常用于提供选项列表供用户选择。 #### 11. Ajax与ComboBox - **Ajax**: 异步通信技术,用于在不重新加载整个...
- **Ext.onReady事件**:解释了如何使用`Ext.onReady()`确保页面加载完成后再执行脚本。 - **来自Extjs的问候**:通过一个简单的示例演示了如何在页面上显示动态文本。 - **让界面动起来**:介绍了一些基本的动画...
- Ext.DatePicker组件允许用户选择日期。 #### 十、数据与ComboBox 1. **数据处理概念** - 数据是ExtJs应用程序的核心。 2. **数据代理(DataProxy)** - 用于从服务器获取数据的对象。 3. **数据读取器...
讲解了RowExpander组件的使用,它允许在GridPanel中展开行以显示额外的详细信息。 #### 四、分组GridPanel 介绍了如何使用分组功能,按指定字段对数据进行分类和汇总显示。 ### 结语 《ExtJS 轻松搞定》这本书全面...
首先,GridPanel是用于显示表格数据的组件,它可以与Ext.data.Store配合使用,Store负责加载和管理数据。GridPanel提供了丰富的功能,如排序、分页、筛选、编辑等。用户可以通过单击列头进行排序,通过工具栏实现...