`
zhaolicric
  • 浏览: 146666 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

EditorGridPanel的一些属性,配置项,方法的实例.自适应窗体大小

EXT 
阅读更多

页面信息:

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()); 
    };
 
分享到:
评论

相关推荐

    可编辑表格Ext.grid.EditorGridPanel

    2. 定义列模型:配置每列的字段名、宽度、是否可编辑等属性,并为需要编辑的列设置编辑器。 3. 创建EditorGridPanel:传入Store和列模型,设置其他必要配置,如标题、高度等。 4. 添加事件监听:根据业务需求,添加...

    GridPanel属性详解

    接下来,我们来看看`Ext.grid.Column`的一些关键配置项: 1. **id** - **描述**:为列分配一个唯一标识符。 2. **header** - **描述**:设置列的表头文本。 3. **dataIndex** - **描述**:定义列与数据集中...

    解决editorgridpanel编辑时视图向右移动的问题

    1. **固定单元格宽度**:在配置EditorGridPanel时,为每一列设置固定的宽度,防止编辑时宽度变化。 2. **禁用滚动条自动调整**:可以监听编辑事件,当开始编辑时,临时禁用grid的滚动条自动调整功能,结束编辑后恢复...

    Extjs可编辑的EditorGridPanel

    NULL 博文链接:https://zxf-noimp.iteye.com/blog/629629

    Ext TreePanel

    以下是一些关于Ext TreePanel和EditorGridPanel的关键知识点: 1. **TreePanel组件**:用于展示层级结构数据的组件,支持节点的展开、折叠和拖放操作。 2. **Ext.data.TreeStore**:存储树形数据的模型,与...

    Ext可编辑的tree,EditorGridPanel

    因为项目的需求,实现一个可以编辑的tree,在网上找了一个牛人写的控件.Ext.ux.maximgb.tg.EditorGridPanel 把源码下载下来以后 不能运行,自己根据给出的列子,另写了一个小程序.不过并没有与数据库交互.

    基于EXTJS简明教程2.0的笔记

    9. **ViewPort** 用于渲染整个body,能根据浏览器窗口大小自适应调整。使用`border`布局时,组件的位置由`region`属性决定。 10. **Border布局实例** `border`布局允许将组件分配到north, south, west, east四个...

    Extjs EditorGridPanel中ComboBox列的显示问题

    这个问题的原因在于,EditorGridPanel默认使用dataIndex属性来获取要显示的数据,而ComboBox需要的是其store中的displayField来显示文本。为了解决这个问题,我们需要在ColumnModel中对包含ComboBox的列使用`...

    ext 读取xml 可编辑grid

    EditorGridPanel使用ColumnModel定义列,并且可以通过配置editor属性使某一列变为可编辑。编辑完成后,数据会自动更新到Store中。 3. XML数据支持: EXT JS通过XMLReader实现了对XML数据的读取和解析。XMLReader...

    ExtJS3总结内容

    // 其他配置项... }); ``` 或者在ExtJS的XML布局中使用: ```xml ``` #### vtype详解 虽然题目中提及了`vtype`,但在提供的内容中并未详细展开。`vtype`在ExtJS中主要用于表单验证,它定义了一组预设的验证...

    老师整理的extjs学习笔记

    ##### 6.1.1 关于 FormPanel 配置属性 `Ext.form.FormPanel` 提供了许多配置选项,包括但不限于: - **title**: 表单的标题。 - **frame**: 是否使用边框。 - **bodyPadding**: 内容区域的内边距。 - **labelWidth...

    extJs xtype 类型

    在ExtJS框架中,`xtype`是一种用于标识特定组件类型的简短字符串,便于在配置对象中快速定义组件。本文将深入探讨ExtJS中的各种`xtype`类型,帮助开发者更好地理解并运用这些组件。 #### 基本组件 1. **`button`:*...

    ExtJS下grid的一些属性说明

    1.界面修改(css style): Extjs中界面风格与我们产品本身的风格有很大不同,从边框、选中行的颜色到鼠标移动到的... GroupingView, EditorGridPanel): Extjs的grid功能强大,如排序、隐藏列或移动列等,这些都有一些属

    extjs控件列表

    - **用途**: 作为主布局容器,确保页面内容在不同屏幕尺寸上自适应。 **Ext.BoxComponent** - **描述**: 盒子组件,类似于HTML中的`<div>`标签,用于布局。 - **用途**: 创建可自定义大小和样式的布局区域。 **Ext...

    EXT2.0 GRID 示例

    EXT2.0 GRID 示例是一个基于EXT JavaScript库的高级数据展示和操作组件的实例。EXT是一个强大的前端开发框架,尤其在创建交互式Web应用程序方面表现出色。EXT2.0是EXT库的一个早期版本,它提供了丰富的用户界面组件...

    ExtJs扩展之GroupPropertyGrid代码

    在本文中,我们将深入探讨如何在ExtJS中扩展PropertyGrid以实现分组功能,这个问题源自于原生ExtJS PropertyGrid控件不支持属性分组。首先,我们要理解PropertyGrid的基本结构,它主要由以下几个核心部分组成: 1. ...

    ExtJs组件类的对应表

    12. **`propertygrid`** - `Ext.grid.PropertyGrid`,属性表格组件,用于展示对象的属性。 13. **`editor`** - `Ext.Editor`,编辑器组件,用于创建可编辑的字段或区域。 14. **`dataview`** - `Ext.DataView`,...

    extjs实例与学习资料

    因为前段时间有两个专案要用到extjs技术,所以自己学了一段时间,在专案才发现extjs的强大,无论对于开发者还是使用者他都是一场视觉盛宴,这里有我从学习开始做的一些笔记和例子也有自己收集的学习资料,里面包括...

    extjs xtype

    1. `box` - `Ext.BoxComponent`:基本的可配置组件,常用于包含其他元素或作为占位符。 2. `button` - `Ext.Button`:按钮组件,可以设置文本、图标、事件等。 3. `colorpalette` - `Ext.ColorPalette`:颜色选择...

Global site tag (gtag.js) - Google Analytics