用extjs6写一个表格,要求要有单选按钮
时间: 2024-06-10 12:10:19 浏览: 10
以下是一个简单的示例,演示如何使用ExtJS 6创建一个包含单选按钮的表格:
```
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.data.Store', {
storeId: 'myStore',
fields: ['id', 'name', 'age'],
data: [
{id: 1, name: 'John Doe', age: 30},
{id: 2, name: 'Jane Smith', age: 25},
{id: 3, name: 'Bob Johnson', age: 40}
]
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
title: 'My Grid',
store: Ext.data.StoreManager.lookup('myStore'),
columns: [
{text: 'ID', dataIndex: 'id'},
{text: 'Name', dataIndex: 'name'},
{text: 'Age', dataIndex: 'age'},
{
text: 'Select',
xtype: 'checkcolumn',
dataIndex: 'selected'
}
],
selModel: {
selType: 'checkboxmodel',
mode: 'SINGLE'
},
height: 200,
width: 400
});
}
});
```
在这个例子中,我们首先创建了一个数据存储,其中包含了一些示例数据。然后,我们创建了一个网格面板,并指定了数据存储和列定义。在最后一列中,我们使用了`checkcolumn`类型,这是一个内置的列类型,可以提供单选按钮的功能。我们还使用了`checkboxmodel`选择模型来启用单选按钮。最后,我们将网格面板渲染到页面上。
需要注意的是,这个示例中使用的是单选按钮,而不是复选框。如果你需要使用复选框,只需要将`checkcolumn`替换为`checkcolumn`即可。
相关推荐
![](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)
![](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)