Extjs4 TreePanel的CheckBox列选中有关问题
Extjs4 TreePanel的CheckBox列选中问题
效果图：
实现效果：选中后面操作权限中任意一个CheckBox，树前面的CheckBox要被选中，取消后面所有的CheckBox，树前面的CheckBox才被取消。
遇到问题：调试中发现，树的Checked属性赋值了，但是显示出来跟赋值不一样。赋值是在以下代码renderer方法中。
代码展示：
求助大侠们！
------解决思路----------------------
我是刚开始写前台的，顺便查了一下 xtype: checkcolumn
我在想是不是你调用的方法错了，按你的需求不应该是调用checkchange吗？
------解决思路----------------------
event
checkchange( this, rowIndex, checked, eOpts )
效果图：
实现效果：选中后面操作权限中任意一个CheckBox，树前面的CheckBox要被选中，取消后面所有的CheckBox，树前面的CheckBox才被取消。
遇到问题：调试中发现，树的Checked属性赋值了，但是显示出来跟赋值不一样。赋值是在以下代码renderer方法中。
代码展示：
Ext.onReady(function () {
Ext.define("SmartPermission", {
extend: "App.BaseModel",
fields: [
{ name: "PermissionName", type: "string" },
{ name: "ParentIdx", type: "int" },
{ name: "Description", type: "string" },
{ name: "AddAction", type: "boolean" },
{ name: "EditAction", type: "boolean" },
{ name: "DelAction", type: "boolean" }
]
});
var treeStore = Ext.create("Ext.data.TreeStore", {
proxy: {
type: 'ajax',
url: "/Demo/TreePanelDemo/GetPermissionData"
},
sorters: [
{ property: 'SortOrder', direction: 'ASC' }
],
model: "SmartPermission"
});
var viewport = Ext.create("Ext.container.Viewport", {
layout: "fit",
items: [
{
xtype: "treepanel",
itemId: "userInRoleTree",
rootVisible: false,
store: treeStore,
columns: [
{
xtype: "treecolumn",
text: "权限名称",
dataIndex: "PermissionName",
flex: 4
},
{
text: "角色操作权限",
align: 'center',
columns: [
{
xtype: "checkcolumn",
text: "添加",
align: 'center',
dataIndex: 'AddAction',
renderer: function (val, m, rec) {
if (!rec.get('leaf')) {
return '';
}
else {
return (new Ext.grid.column.CheckColumn).renderer(val);
}
},
flex: 1
},
{
xtype: 'checkcolumn',
text: "编辑",
align: 'center',
dataIndex: 'EditAction',
renderer: function (val, m, rec) {
if (!rec.get('leaf')) {
return '';
}
else {
return (new Ext.grid.column.CheckColumn).renderer(val);
}
},
flex: 1
},
{
xtype: "checkcolumn",
text: "删除",
align: 'center',
dataIndex: 'DelAction',//数据源中的状态列
renderer: function (val, m, rec) {
if (!rec.get('AddAction') && !rec.get('EditAction') && !rec.get('DelAction')) {
rec.data.checked = false;
}
else {
rec.data.checked = true;
}
if (!rec.get('leaf')) {
return '';
}
else {
return (new Ext.grid.column.CheckColumn).renderer(val);
}
},
flex: 1
}
],
flex: 3
}
],
tbar: [
{ xtype: "button", text: "保存", iconCls: "qicon-select", handler: fnAddEdit },
{ xtype: "button", text: "移除", iconCls: "qicon-remove" }
]
}
]
});
function fnAddEdit(btn, event) {
var selectNode = viewport.down("treepanel").getChecked();
alert(selectNode );
}
});
求助大侠们！
------解决思路----------------------
我是刚开始写前台的，顺便查了一下 xtype: checkcolumn
我在想是不是你调用的方法错了，按你的需求不应该是调用checkchange吗？
------解决思路----------------------
event
checkchange( this, rowIndex, checked, eOpts )