我有一个fieldset包含一个有3个checkcolumns的网格:Leader,Member和Viewer。如果用户点击领导者检查列中的复选框,则应禁用成员和查看者检查列中的相应复选框(即,用户不应该能够点击这些复选框)。如果用户点击成员或查看器checkcolumns中的复选框,也是如此;其他复选框不应该是可点击的。任何想法如何去做这件事?checkcolumn ext js
0
A
回答
1
RadioGroup不可行,因为应用程序需要允许用户检查多个复选框(在checkcolumn中)。我已经部分解决了这个问题:现在,如果我点击领导者checkcolumn中的任何复选框,然后单击Viewer或Member checkcolumns中的复选框,领导者checkcolumn中的勾号消失。唯一的问题是,如果用户点击成员或查看器检查列中的ANY复选框,那么领导者检查列中的任何选中的复选框将被取消选中。但是,我只想要取消选中相应复选框(即同一行中的那个复选框)。这里是checkcolumns的代码,包含checkcolumns和商店的网格:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext/js/ux/css/CheckHeader.css" />
<script type="text/javascript" src="ext/js/bootstrap.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.Loader.setConfig({enabled: true, paths:{'Ext.ux': 'ext/js/ux'}});
//Ext.Loader.setPath('Ext.ux', 'ext/js/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.HeaderToolTip',
'Ext.ux.CheckColumn'
]);
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var teststore = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'UserID', type: 'asUCString'},
{name: 'Name', type: 'asUCString'},
{name: 'Role', type: 'asUCString'},
{name: 'Leader', type: 'bool'},
{name: 'Member', type: 'bool'},
{name: 'Viewer', type: 'bool'}
],
data: [
['1', 'Hans Hansel', 'Customer/Freelancer', false, false, false],
['2', 'Doreen Duck', 'Consultant', false, false, false],
['3', 'Gerald Goose', 'Client', false, false, false],
['4', 'Frederic Fitzgerald', 'Super User IT', false, false, false],
['5', 'Aimee Anselm', 'Administrator', false, false, false]
]
});
var grid = Ext.create('Ext.grid.Panel', {
id: 'setPermissionsGrid',
title: '',
store: teststore,
plugins: ['headertooltip'],
columns: [
{ text: 'Name', dataIndex: 'Name', width: 120},
{ text: 'Role', dataIndex: 'Role', width: 125},
{ text: 'Leader', dataIndex: 'Leader', xtype: 'checkcolumn', listeners: {'checkchange' : function() {for (var i in teststore.data.items) {teststore.data.items[i].set('Member', false); teststore.data.items[i].set('Viewer', false);}} },width: 68, tooltip: 'Leader'},
{ text: 'Member', dataIndex: 'Member', xtype: 'checkcolumn', listeners: {'checkchange' : function() {for (var i in teststore.data.items) {teststore.data.items[i].set('Leader', false); teststore.data.items[i].set('Viewer', false);}} },width: 68, tooltip: 'Member'},
{ text: 'Viewer', dataIndex: 'Viewer', xtype: 'checkcolumn', listeners: {'checkchange' : function() {for (var i in teststore.data.items) {teststore.data.items[i].set('Leader', false); teststore.data.items[i].set('Member', false);}} },width: 68, tooltip: 'Viewer'}
],
height: 219,
width: 450,
renderTo: Ext.getBody()
});
1
我能用record.set解决这个问题。我的代码如下:
Ext.Loader.setConfig({enabled: true, paths:{'Ext.ux': 'ext/js/ux'}});
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.HeaderToolTip',
'Ext.ux.CheckColumn'
]);
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var teststore = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'UserID', type: 'asUCString'},
{name: 'Name', type: 'asUCString'},
{name: 'Role', type: 'asUCString'},
{name: 'Leader', type: 'bool'},
{name: 'Member', type: 'bool'},
{name: 'Viewer', type: 'bool'}
],
data: [
['1', 'Hans Hansel', 'Customer/Freelancer', false, false, false],
['2', 'Doreen Duck', 'Consultant', false, false, false],
['3', 'Gerald Goose', 'Client', false, false, false],
['4', 'Frederic Fitzgerald', 'Super User IT', false, false, false],
['5', 'Aimee Anselm', 'Administrator', false, false, false]
]
});
var grid = Ext.create('Ext.grid.Panel', {
id: 'setPermissionsGrid',
title: '',
store: teststore, //Ext.data.StoreManager.lookup('simpsonsStore'),
plugins: ['headertooltip'],
//selType: 'checkboxmodel',
columns: [
{ text: 'Name', dataIndex: 'Name', width: 120},
{ text: 'Role', dataIndex: 'Role', width: 125},
{ text: 'Leader', dataIndex: 'Leader', xtype: 'checkcolumn', listeners: {'checkchange' : function(column, recordIndex, checked) {var record = teststore.getAt(recordIndex); record.set('Member', false); record.set('Viewer', false); }},width: 68, tooltip: '<b>Team Leader Rights:</b> '},
{ text: 'Member', dataIndex: 'Member', xtype: 'checkcolumn', listeners: {'checkchange' : function(column, recordIndex, checked) {var record = teststore.getAt(recordIndex); record.set('Leader', false); record.set('Viewer', false); }},width: 68, tooltip: '<b>Team Member Rights:</b> '},
{ text: 'Viewer', dataIndex: 'Viewer', xtype: 'checkcolumn', listeners: {'checkchange' : function(column, recordIndex, checked) {var record = teststore.getAt(recordIndex); record.set('Leader', false); record.set('Member', false); }},width: 68, tooltip: '<b>Team Viewer Rights:</b> '}
],
height: 219,
width: 450,
renderTo: Ext.getBody()
相关问题
- 1. 提交电网的Ext JS
- 2. 从Ext JS 2迁移到Ext JS 4
- 3. 从EXT js 3.4移植到EXT js 5.0
- 4. Ext JS 6从Ext JS 4.1.3迁移到
- 5. 如何防止在ext treepanel中更改checkcolumn
- 6. Window.open()in ext Js
- 7. Ext JS的beforeedit
- 8. Ext JS UX - RowPanelExpander
- 9. Ext JS - A start
- 10. Ext js许可
- 11. Ext js grid seethrough
- 12. Ext Js和zeroclipboard
- 13. 插入Ext-js
- 14. 缺点ext js
- 15. HTML ext js fieldsets
- 16. Ext JS Cascading Combobox
- 17. Extjs checkColumn
- 18. checkcolumn validation
- 19. Ext JS 4 MVC Combobox
- 20. 如何在ext js
- 21. Ext JS Dependent combo box
- 22. Ext JS 4.2引擎
- 23. Multi Series Ext Chart JS
- 24. Ext Js网格列
- 25. Ext JS with C#Backend
- 26. Ext JS加载店
- 27. ext js手风琴
- 28. Ext JS等价物
- 29. Ext JS - Store vs. JsonStore
- 30. EXT JS布局XHTML
您是否尝试过使用RadioGroup? http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.RadioGroup – Patton