在数据管理过程中，展示数据是很重要的一部分。对于数据展示的管理，columnmodel是一种非常有用的工具。

columnmodel通过管理表格的列，提高了数据显示的灵活性和效率。使用这种工具可以让用户自由选择显示的数据，对于简单和复杂的应用程序都非常实用。

本文将介绍如何使用columnmodel管理和展示数据。

1. 理解columnmodel

一个 columnmodel 包含多个列的定义。它们的顺序将决定在表格中呈现数据的顺序。每个列都有一个标题、宽度、对齐方式等属性，以及一个数据源属性。

在columnmodel中，每个列的数据可以是静态的，也可以是动态的。如果是动态数据，它们可以来自一个数组、一个模型或者一个store。

例如，下面是一个简单的 columnmodel：

```

var columnModel = new Ext.grid.ColumnModel({

columns:

[

{ header: '序号', sortable: false, align: 'center', dataIndex: 'order_id', width: 60 },

{ header: '客户姓名', sortable: false, align: 'center', dataIndex: 'customer_name', width: 140 },

{ header: '金额', sortable: false, align: 'center', dataIndex: 'amount', width: 100 },

{ header: '状态', sortable: false, align: 'center', dataIndex: 'status', width: 60 }

]

});

```

以上代码展示了一个包含四列的 columnmodel。其中，每列都定义了header（表头）、dataIndex（数据源）、width（列宽度）等属性。这个columnmodel可以用于创建一个简单的grid。

2. 使用columnmodel。

要使用columnmodel，你需要创建一个grid，并把columnmodel作为参数传入。grid会通过columnmodel来展示数据。

首先，我们定义一个数据集合（我们将使用该数据集合来填充grid）：

```

var store = new Ext.data.Store({

fields: ['order_id', 'customer_name', 'amount', 'status'],

data: [

{ 'order_id': '1', 'customer_name': '张三', 'amount': 200, 'status': '已完成'},

{ 'order_id': '2', 'customer_name': '李四', 'amount': 300, 'status': '已取消'},

{ 'order_id': '3', 'customer_name': '王五', 'amount': 400, 'status': '待处理'}

]

});

```

接下来，我们可以创建一个grid，并将columnmodel和store传递给它：

```

var grid = new Ext.grid.GridPanel({

renderTo: Ext.getBody(),

store: store,

cm: columnModel,

title: '订单列表',

autoHeight:true,

autoWidth:true,

frame:true

});

```

以上代码展示了一个简单的grid，并使用columnmodel来展示数据。

3. columnmodel相关用法

有一些有用的用法可以与columnmodel一起使用：

3.1 列渲染器。

列渲染器可以自定义每一列数据的显示形式。可以通过一个函数实现，函数的参数包括 value（当前单元格的值）、metadata（元数据，可以控制样式、提示等显示方式）和record（当前行数据）。

```

var columnModel = new Ext.grid.ColumnModel({

columns:

[

{ header: '序号', sortable: false, align: 'center', dataIndex: 'order_id', width: 50 },

{ header: '客户姓名', sortable: false, align: 'center', dataIndex: 'customer_name', width: 100 },

{ header: '金额', sortable: false, align: 'center', dataIndex: 'amount', width: 100, renderer: function(val, metadata, record){

return (val/100)+'元';

}},

{ header: '状态', sortable: false, align: 'center', dataIndex: 'status', width: 60 }

]

});

```

以上代码展示了一个列渲染器的例子，它将金额列的数据除以100，并在后面加上“元”字。

3.2 列排序。

在columnmodel中，可以设置每一列的sortable属性来决定该列是否可以排序。

```

var columnModel = new Ext.grid.ColumnModel({

columns:

[

{ header: '序号', sortable: true, align: 'center', dataIndex: 'order_id', width: 50 },

{ header: '客户姓名', sortable: true, align: 'center', dataIndex: 'customer_name', width: 100 },

{ header: '金额', sortable: true, align: 'center', dataIndex: 'amount', width: 100, renderer: function(val, metadata, record){

return (val/100)+'元';

}},

{ header: '状态', sortable: false, align: 'center', dataIndex: 'status', width: 60 }

]

});

```

以上代码展示了如何在columnmodel中设置可以排序的列。

3.3 列表头。

使用columnmodel，可以设置列表头的样式和点击事件。

```

var columnModel = new Ext.grid.ColumnModel({

columns:

[

{ header: '序号', sortable: true, align: 'center', dataIndex: 'order_id', width: 50 },

{ header: '客户姓名', sortable: true, align: 'center', dataIndex: 'customer_name', width: 100 },

{ header: '金额', sortable: true, align: 'center', dataIndex: 'amount', width: 100, renderer: function(val, metadata, record){

return (val/100)+'元';

}},

{ header: '状态', sortable: false, align: 'center', dataIndex: 'status', width: 60 }

],

listeners: {

headerclick: function(columnModel, columnIndex, e){

var header = columnModel.getColumnHeader(columnIndex);

alert('你点击了'+ header.innerHTML);

}

}

});

```

以上代码展示了如何在columnmodel中设置列的点击事件。

4. 总结

本文介绍了如何使用columnmodel管理和展示数据，包括理解columnmodel、使用columnmodel、列渲染器、列排序和列表头等相关用法。使用了这些用法后可以使数据的展示更加灵活和高效。