ext js 的 InitColumns 如何添加自定义的列,举例:["数据来源1","1","2","3"]["数据来源2,"11",22","33"]["数据来源3",“01”,"02"],将每个数据来源作为一列组成一个表格
时间: 2023-09-02 20:14:05 浏览: 38
你可以在 `InitColumns` 方法中添加一个自定义的列。这个自定义列需要包含你想要的数据来源,并且需要指定该列的数据类型和渲染方式。
以下是一个示例代码,展示如何将三个数据来源作为三列添加到表格中:
```javascript
Ext.define('MyApp.view.MyGrid', {
extend: 'Ext.grid.Panel',
columns: [],
initComponent: function() {
var me = this;
me.columns = [
{ text: '数据来源1', dataIndex: 'source1', flex: 1 },
{ text: '数据来源2', dataIndex: 'source2', flex: 1 },
{ text: '数据来源3', dataIndex: 'source3', flex: 1 }
];
me.callParent();
},
listeners: {
beforerender: function(grid) {
var data = [
['1', '2', '3'],
['11', '22', '33'],
['01', '02', '']
];
var records = [];
Ext.each(data, function(row) {
records.push({
source1: row[0],
source2: row[1],
source3: row[2]
});
});
grid.store.loadData(records);
}
}
});
```
在这个示例中,我们定义了三个列,分别是“数据来源1”、“数据来源2”和“数据来源3”。在 `beforerender` 事件中,我们将数据加载到表格中。每个数据来源对应一列,我们将每行数据的每个元素分别赋值给对应的列。最后,我们将这些行记录添加到表格的数据源中。
这样,就可以将三个数据来源作为三列组成一个表格了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)