Ext.grid.ColumnModel 配置

学Ext快二个多星期了,有些东西觉得还是有必要记下来,以备日后用的着的时候方便记忆。通常Ext的写法太多了,如果不能熟练的知道每种写法,就会被各种怪异的写法给搅混了,本文主要帮助自己加深对Ext的理解,首先来分析Ext.grid.ColumnModel类;

Ext.grid.ColumnModel
    该类用于定义表格的列模型,其配置项是一个由“列定义”组成的数组,还可以是JSON组成的对象。其中也定义很多操作列的
属性、方法 比如:查找某个列,隐藏某个列等等...

一, 用数组的方式配置ColumnModel

1    var colModel = new Ext.grid.ColumnModel([
2         { header:'编号', dataIndex:'id',width:200},
3         { header:'名称', dataIndex:'name',width:300}
4    ]};

  注意:上述写法ColumnModel的构造参数必须是一个数组,哪怕只有一列。

二、 用JSON对象的方式配置ColumnModel
 

 1 var colModel = new Ext.grid.ColumnModel({
 2        columns:[   --列集合的定义
 3                  { header:'编号', dataIndex:'id',width:200},
 4                  { header:'名称', dataIndex:'name',width:300}
 5         ],
 6        defaults:{  --公共属性配置
 7            sortable:true,
 8            menuDisabled:true,
 9            width:100
10         },
11        listeners:{    --监听事件
12            "widthchange":function(cm,colIndx,width){
13                saveConfig(colIndex,width);
14            }
15        }
16   });

这种写法的好处是更加的面向对象,也便于继承。

三、常用属性介绍:
   header               设置列标题
   dataIndex           设置列对应数据源的name值
   editor                 设置在编辑状态下,指定编辑器
   align                  设置列标题的对齐方式
   widht                 设置列的宽度
   css                   设置列头的CSS样式
   fixed                  表示列头的宽度是否可以改变,默认为true
   hidden               表示是否是隐藏列,默认为false
   hideable            表示是否禁止用户隐藏该列,默认为false
   menuDisabled   表示是否禁止列菜单 默认为false
   resizable           表示是否禁止列可变大小,默认为false
   sortable             表示列是否可排序,默认为false
   tooltip               表示列头部显示的提示文字
   renderer            用于加工单元格的原始数据,
   id                     列的标识,列的所有单元格包括头部都是用这个值来创建CSS的class属性
格式为:
    x-grid3-td-id     单元格样式
    x-grid3-td-hd-id  列头样式

四、常用方法介绍:
   findColumnIndex    根据dataIndex里的值,返回列的索引
   getColumnById      返回指定ID的列
   getColumnCount     返回列数
   getColumnId        返回指定index列的ID
   ....
  该类有很多方法来操作列,具体查看API

转:http://itworktor.blog.163.com/blog/static/175203029201086103845632/

时间: 2024-10-14 12:09:34

Ext.grid.ColumnModel 配置的相关文章

Ext.grid.ColumnModel如何获取其他列的值

问题描述 {header: "密码", sortable:true, dataIndex:"card_password",renderer:function(value){return "<span style='color:#000000;'>"+value+"</span>"}},{header: "创建者", sortable:true,width: 60, dataIndex

Ext Grid控件的配置与方法

  1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0 stripeRows:表格是否隔行换色,默认为false cm.colModel:表格的列模式,渲染表格时必须设置该配置项 sm.selModel:表格的选择模式,默认为Ext.grid.RowSelectionModel enableHdMen

Ext.grid.GridPanel单元格特殊设置

<html>     <head>         <title>03.grid</title>         <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />         <script type="text/javascript" src=&

EXT grid只显示一条数据;

问题描述 / 定义Proxyvar proxy = new Ext.data.HttpProxy({url : "plantsAction!getPlantsById.action"});var Order = Ext.data.Record.create([{name : "cabinetName",type : "string",mapping : "cabinetName"}, {name : "cabinet

extjs Ext.grid.GridPanel组件使用时不显示数据

问题描述 一.extjs grid 页面<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":&q

EXT Grid 相关问题,求指点,拜托

问题描述 最近项目里用Ext Grid ,现在有一段代码,其中三个参数我不清楚接收的到底是什么值,请教各位指点一下.代码如下:各位,不好意思,没有什么分,我没分了,请各位帮下忙吧,顺带熟悉熟悉或者加深印象也好对吧.谢谢Ext.onReady(function(){var path = $("input[name=path]").val();var sm = new Ext.grid.CheckboxSelectionModel({}); //问题在此处!!! javascript代码没

asp.net Ext grid 显示列表_实用技巧

前台页面:  复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="gridShowTest.aspx.cs" Inherits="ExtPra.gridShowTest" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

Ext grid 读不出xml的数据

问题描述 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Conten

ExtJs之Ext.grid.GridPanel(部分未完)

今天在家休息,年假不用就作费啊. 看了几部香港老电影,陪爸爸看了勇士占奇才, 然后,测试了一下EXTJS未完的内容, 在京东上订了七本历史普及书,近两百块..:) 搞定. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57