页面信息:
grid = new Ext.grid.EditorGridPanel({
autoScroll:true,
store: store,
sm : new Ext.grid.RowSelectionModel(),
cm: cm,
renderTo: 'editor-grid',
width: '100%',
height: 600,
autoWidth:true,
autoExpandColumn: 'code', // column with this id will be expanded
title: '客户对账清单',
frame: true,//是否有边框 默认是没有的
viewConfig:{
autoFill:true,
sortAscText:'升序',
sortDescText:'降序',
columnsText:'显示列'
},
clicksToEdit: 1,
tbar:[{
text: '请输入订单号:'
},{
xtype: 'textfield',
id: 'filter',
selectOnFocus: true,
width: 100,
validationDelay:100,
validator:function(){
store.load({
params:{
sorderId:this.getValue()//取得搜索表单文本域的值,发送到服务端
}
});
},scope:this
}
]
});
要加载的columnModel:
var cm = new Ext.grid.ColumnModel({
defaults: {
sortable: true // columns are not sortable by default
},
columns: [
{
id: 'code',
header: '物料编号',
dataIndex: 'code',
width: 100
}, {
header: '物料简称',
dataIndex: 'shortName',
width: 100
}, {
header: '客户简称',
dataIndex: 'ComSName',
width: 100
}, {
header: '型号',
dataIndex: 'style',
width: 100
}, {
header: '单位',
dataIndex: 'unitName',
width: 40
},{
header: '用料数量',
dataIndex: 'useCount',
width: 100
},{
header: '入库数量',
dataIndex: 'GCount',
width: 100
},{
header: '客户库存',
dataIndex: 'GPrice',
width: 100
},{
header: 'sorderId',
dataIndex: 'sorderId',
width: 100
hidden:true,
//只是在页面上隐藏,但是在页面上可以调整成显示的。
hideable:false
//这两句让该列彻底隐藏
}
]
});
要加载的store:
var zlUrl=getRootPath()+'XXXServlet?change=stasksDetail';
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: zlUrl
}),
reader: new Ext.data.JsonReader({
totalProperty: 'results',
root: 'rows',
fields: [
{name: 'code', mapping: 'code'},
{name: 'shortName'},
{name:'ComSName'},
{name: 'style'},
{name: 'unitName'},
{name:'useCount'},
{name: 'GCount'},
{name: 'GPrice'},
{name:'sorderId'}
]
})
});
参数的传递发法:
params:{
sorderId:this.getValue()//取得搜索表单文本域的值,发送到服务端
}
window.onresize = function(){ //自适应窗体
grid.setWidth(0);
grid.setHeight(0);
grid.setWidth(Ext.get("content").getWidth());
grid.setHeight(Ext.get("content").getHeight());
};
分享到:
相关推荐
2. 定义列模型:配置每列的字段名、宽度、是否可编辑等属性,并为需要编辑的列设置编辑器。 3. 创建EditorGridPanel:传入Store和列模型,设置其他必要配置,如标题、高度等。 4. 添加事件监听:根据业务需求,添加...
接下来,我们来看看`Ext.grid.Column`的一些关键配置项: 1. **id** - **描述**:为列分配一个唯一标识符。 2. **header** - **描述**:设置列的表头文本。 3. **dataIndex** - **描述**:定义列与数据集中...
1. **固定单元格宽度**:在配置EditorGridPanel时,为每一列设置固定的宽度,防止编辑时宽度变化。 2. **禁用滚动条自动调整**:可以监听编辑事件,当开始编辑时,临时禁用grid的滚动条自动调整功能,结束编辑后恢复...
NULL 博文链接:https://zxf-noimp.iteye.com/blog/629629
以下是一些关于Ext TreePanel和EditorGridPanel的关键知识点: 1. **TreePanel组件**:用于展示层级结构数据的组件,支持节点的展开、折叠和拖放操作。 2. **Ext.data.TreeStore**:存储树形数据的模型,与...
因为项目的需求,实现一个可以编辑的tree,在网上找了一个牛人写的控件.Ext.ux.maximgb.tg.EditorGridPanel 把源码下载下来以后 不能运行,自己根据给出的列子,另写了一个小程序.不过并没有与数据库交互.
9. **ViewPort** 用于渲染整个body,能根据浏览器窗口大小自适应调整。使用`border`布局时,组件的位置由`region`属性决定。 10. **Border布局实例** `border`布局允许将组件分配到north, south, west, east四个...
这个问题的原因在于,EditorGridPanel默认使用dataIndex属性来获取要显示的数据,而ComboBox需要的是其store中的displayField来显示文本。为了解决这个问题,我们需要在ColumnModel中对包含ComboBox的列使用`...
EditorGridPanel使用ColumnModel定义列,并且可以通过配置editor属性使某一列变为可编辑。编辑完成后,数据会自动更新到Store中。 3. XML数据支持: EXT JS通过XMLReader实现了对XML数据的读取和解析。XMLReader...
// 其他配置项... }); ``` 或者在ExtJS的XML布局中使用: ```xml ``` #### vtype详解 虽然题目中提及了`vtype`,但在提供的内容中并未详细展开。`vtype`在ExtJS中主要用于表单验证,它定义了一组预设的验证...
##### 6.1.1 关于 FormPanel 配置属性 `Ext.form.FormPanel` 提供了许多配置选项,包括但不限于: - **title**: 表单的标题。 - **frame**: 是否使用边框。 - **bodyPadding**: 内容区域的内边距。 - **labelWidth...
在ExtJS框架中,`xtype`是一种用于标识特定组件类型的简短字符串,便于在配置对象中快速定义组件。本文将深入探讨ExtJS中的各种`xtype`类型,帮助开发者更好地理解并运用这些组件。 #### 基本组件 1. **`button`:*...
1.界面修改(css style): Extjs中界面风格与我们产品本身的风格有很大不同,从边框、选中行的颜色到鼠标移动到的... GroupingView, EditorGridPanel): Extjs的grid功能强大,如排序、隐藏列或移动列等,这些都有一些属
- **用途**: 作为主布局容器,确保页面内容在不同屏幕尺寸上自适应。 **Ext.BoxComponent** - **描述**: 盒子组件,类似于HTML中的`<div>`标签,用于布局。 - **用途**: 创建可自定义大小和样式的布局区域。 **Ext...
EXT2.0 GRID 示例是一个基于EXT JavaScript库的高级数据展示和操作组件的实例。EXT是一个强大的前端开发框架,尤其在创建交互式Web应用程序方面表现出色。EXT2.0是EXT库的一个早期版本,它提供了丰富的用户界面组件...
在本文中,我们将深入探讨如何在ExtJS中扩展PropertyGrid以实现分组功能,这个问题源自于原生ExtJS PropertyGrid控件不支持属性分组。首先,我们要理解PropertyGrid的基本结构,它主要由以下几个核心部分组成: 1. ...
12. **`propertygrid`** - `Ext.grid.PropertyGrid`,属性表格组件,用于展示对象的属性。 13. **`editor`** - `Ext.Editor`,编辑器组件,用于创建可编辑的字段或区域。 14. **`dataview`** - `Ext.DataView`,...
因为前段时间有两个专案要用到extjs技术,所以自己学了一段时间,在专案才发现extjs的强大,无论对于开发者还是使用者他都是一场视觉盛宴,这里有我从学习开始做的一些笔记和例子也有自己收集的学习资料,里面包括...
1. `box` - `Ext.BoxComponent`:基本的可配置组件,常用于包含其他元素或作为占位符。 2. `button` - `Ext.Button`:按钮组件,可以设置文本、图标、事件等。 3. `colorpalette` - `Ext.ColorPalette`:颜色选择...