`

Ext的部分Grid属性设置

阅读更多

forceFit:是否强制列调整宽度使得不出现水平滚动条,默认是false。
enableRowBody:为true的时候允许每行增加一个tr元素用来扩展数据行。
showPreview:自定义的bool类型的属性,用来在代码中控制是否显示预览。
getRowClass:这是一个方法,用来改写行的css样式,它有四个参数,第一个是代表该行数据的Record对象,第二个是行的索引,第三个就是enableRowBody设置true时传递进来的
参数,可以通过该参数的body属性扩展行数据。该方法应当返回一个css类名。我们的例子中,根据showPreview的值来动态显示文章的摘要信息。

border: false, //grid的边界
autoHeight: true, //grid的高度是否要用指定的高度
enableColumnMove: false, //grid的列是否可以移动
enableHdMenu: false, //在列的header是否要有下拉菜单
trackMouseOver: true, //当鼠标移过行时,行是否要highlight
stripeRows: true, //让grid相邻两行背景色不同

 

创建简单的Grid  demo

//数据信息
 var data=[["dddfdsfsd","80","80","80"],
           ["ddd","80","80","80"]];
 this.store=new Ext.data.SimpleStore({data:data,fields:["vehicleKindString","guodao","shendao","putong"]});
 //数据显示
 var dataGrid=new Ext.grid.GridPanel({
  tbar: ['<b style="color:#15428B">「限速设定」</b>', '->'],
  border:false,
  store:this.store,
  cm: new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer(),  //自动行号
            {header: '汽车名称', dataIndex: 'vehicleKindString',width: 90},
            {header:'速度1', dataIndex: 'guodao',width: 90},
            {header: '速度2', dataIndex: 'shendao',width:90},
            {header: '速度3', dataIndex: 'putong',width: 90}
  ])
 });

 

分享到:
评论

相关推荐

    EXT2.0 GRID 示例

    EXT2.0 GRID组件是EXT库中的核心部分,它允许开发者以表格形式显示数据,并提供了一系列功能,如排序、分页、筛选、编辑等。GRID不仅外观美观,而且性能高效,能够处理大量数据并提供流畅的用户体验。 在EXT2.0 ...

    Ext Grid 导出Excel

    Ext Grid是Sencha Ext JS框架的一部分,它允许开发者创建可配置的表格视图,可以显示从服务器获取的数据。这些数据通常通过Ajax请求加载,然后由Grid的Store进行管理。Store可以与各种数据源(如JSON、XML)配合,...

    Ext自定义Grid Cell插件

    2. **配置编辑器**:在Grid的`columns`配置中,为需要自定义编辑的列设置`editor`属性。编辑器可以是任何Ext JS支持的组件,如`Ext.form.field.Text`、`Ext.form.field.ComboBox`等。对于更复杂的控件,你可能需要...

    Ext grid 简单实例

    首先,让我们了解基本的Ext Grid组成部分: 1. **Store**: Store是数据存储的地方,它可以连接到不同的数据源,如JSON、XML或Web服务。在这个实例中,Store将与Web服务接口通信以获取数据。 2. **Model**: Model...

    在Ext的grid里实现带radio单选功能的gridlist

    对于单选功能,我们需要使用`Ext.selection.RowModel`类型,并设置`mode`属性为`SINGLE`。这样,每次用户点击行时,只有一个行会被选中,且之前的选中状态会被清除。 ```javascript Ext.create('Ext.grid.Panel', ...

    用ext propertyGrid做的小例子

    标题中的“用ext propertyGrid做的小例子”表明这个压缩包包含了一个使用EXTJS库的Property Grid组件的示例。EXTJS是一个流行的JavaScript框架,用于构建富客户端Web应用程序,而Property Grid是一个数据展示组件,...

    Ext grid合并单元格

    具体来说,是重写 GridView 的 `renderHeaders` 方法,该方法用于渲染 Grid 的表头部分。 ### 三、代码分析 #### 1. 自定义 GridView 类 首先,创建了一个名为 `MyGridView` 的类,该类继承自 `Ext.grid.GridView...

    ext的grid简易例子

    总的来说,EXT Grid是EXT JS中不可或缺的一部分,它提供了丰富的功能和高度的可定制性,能够满足各种Web应用的数据展示和操作需求。通过深入学习EXT Grid,你可以构建出功能强大且用户体验优秀的数据驱动应用。

    ext超酷的grid中放图片(ext3.2.1)

    EXT JS 3.2.1虽然已经是较旧的版本,但其核心概念和方法在后续版本中仍然适用,因此学习这部分内容对于理解EXT JS的Grid组件依然有价值。 1. **EXT JS Grid组件基础** - Grid组件是EXT JS中的一个核心组件,用于...

    ext2.0 grid 分页实例(php)

    - 配置Store的`paging`属性为`true`,并设置每页记录数`pageSize`。 2. **后端PHP处理**: - PHP需要接收前端发送的请求参数,如当前页数(currentPage)、每页记录数(limit)等。 - 使用SQL查询语句配合LIMIT...

    从Ext grid导出Excel的代码和方法

    Ext Grid是Sencha Ext JS框架的一部分,它提供了丰富的功能来展示和操作数据。 首先,我们需要了解`Ext.grid`。这是一个用于创建可配置、可滚动、可排序的数据表格的组件。它可以动态加载数据,并提供了各种交互式...

    Ext3.2源码、API、及Demo(grid例子)

    在实际开发中,EXT3.2的Ajax支持和数据模型(Model)也是不可忽视的部分。它提供了便捷的异步数据通信方式,使得与服务器端的数据交换变得简单。EXT3.2的DataProxy和DataReader/Writer则负责数据的序列化和反序列化...

    ext grid 动态扩展

    在EXT JS中,`Ext Grid` 是一个强大的数据展示组件,它可以用来显示和操作大量数据。动态扩展功能允许我们根据需求在运行时增加或减少列,增强了应用的灵活性。本篇将详细介绍如何实现 `Ext Grid` 的列动态添加。 1...

    jsp 实现的 EXT Grid 导出excel 例子

    接下来,EXT Grid的配置部分,你需要定义数据源(Store),列模型(ColumnModel),以及Grid本身。Store通常与后台服务通过Ajax进行数据交互,获取JSON格式的数据。列模型定义了Grid显示的字段及其属性,如字段名、...

    EXT grid 表头 三层 插件

    例如,通过`column.config`配置项来设置各层的标题、宽度、是否可折叠等属性,或者通过监听`headercollapse`、`headerexpand`等事件来响应用户操作。 博客链接可能提供了关于EXT Grid表头三层插件的具体实现方法和...

    ext--grid--demo

    3. **Store配置**:在创建Grid时,我们需要定义一个Store,并设置其URL属性指向JSON数据的来源。Store还包含字段定义,用于解析JSON响应中的数据。 4. **Column Configuration**:Grid的列是通过ColumnModel配置的...

    jq-extgrid表格插件

    总的来说,jq-extgrid表格插件以其强大的功能和灵活的配置,为Web开发中的数据展示和操作提供了便利,是jQuery生态中的一个重要组成部分。通过深入了解和实践,开发者能够充分利用其特性,提升项目的数据管理效率和...

    EXT中文手册 Grid Form

    Grid组件是EXT中非常重要的一个组成部分,主要用于展示表格数据。它支持数据的排序、筛选、分页等功能,并且可以通过Ajax技术动态加载数据。 **Grid组件的简易分页** Grid支持内置分页功能,通过配置`store`属性,...

    Ext.net怎么设置快捷键

    在JavaScript部分,我们看到`&lt;script type="text/javascript"&gt;`标签内的函数`deleteRows(grid)`,这是个处理删除行操作的例子。这个函数使用EXT.NET的`Ext.Msg.confirm`弹出确认对话框,询问用户是否确定要删除。...

    ExtJS下grid的一些属性说明

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

Global site tag (gtag.js) - Google Analytics