Extjs5.0 TreePanel checkbox 禁用以及 css 变灰

(2014-08-21 10:51:41)

标签：

extjs

treepanel

checkbox

disabled

分类： Extjs５.0

首先，是treepanel checkbox 的禁用，无法被勾选：

思路：按照普通form 组件样式，进行设置属性，普通form组件：

{

                    fieldLabel: '部门名称',
                    labelAlign: 'right',
                    disabled:true,
                    name: 'deptname',
                    anchor: '90%'
                },

于是尝试在treepanel 的checkbox 里面仿照设置属性：disabled:true ，能够成功，但是对于treepanel 的checkbox ，由于checkbox的出现，是由于设置了属性:checked:true，无法直接获得checkbox ：所有尝试想法发获得checkbox组件：

利用chrom的开发者工具可以得知：（新浪蛋疼，无法显示图片，算了）

页面在展示的时候，将extjs checkbox 转化成为 button，暂时不用理会！

我们继续分析，如何获得这个checkbox,这个checKbox在treepanel节点树的节点上，那么可以考虑，如何获得这个节点，我们查看api,搜索文档获取节点的方法，有一个getNode(nodeInfo):仔细看看这个方法的调用兑现以及使用方式：

通过api可知，地方放的调用对象是

Ext.view.AbstractViewView source，view对象

然后是方法参数：nodeInfo : HTMLElement/String/Number/Ext.data.Model（redord）

那么我们就想办法获得redord记录，是不是很简单？？？？点击事件就有redord

listeners: {
itemclick: function (mode, record, eOpts) {
var node = this.getView().getNode(record); // 这样就获得了节点

var input = Ext.fly(node).down('input'); // checkbox // 获取节点下的checkbox

}

但是此时，禁用的节点还没有变灰色，那么想法发变灰！！

思考以及测试：（利用chrom开发者工具）

对于,checkbox:x-item-disabled
     对于checkbox和input 的 x-item-disabled 尝试
     x-item-disabled 只能设置在外部div里面，div：包含fiedtext和输入框，不能在标签内部（fieldtext或者输入框）设置 x-item-disabled
     treepanle checkbox，封装成为一个tabel
     尝试禁用disabled table
     结论; x-item-disabled 对table 无效

     div：变灰（偷取css代码尝试）
               x-field x-form-item x-form-item-default x-form-type-text x-field-default x-item-disabled x-anchor-form-item
     测试，这组class样式可以使用在label和任何div中
     测试： button 样式可以使用

     x-form-item-default x-form-type-text x-item-disabled x-anchor-form-item ：此样式可以使用在span标签中，变灰
     修改版：x-field x-form-item x-form-item-default x-form-type-text x-field-default x-item-disabled
     同样，img的样式class中
     同样，button 的checkbox 样式的class样式中
测试，table中也可以使用

     itemclick: function (mode,record,eOpts){
                                      // var id=record.data.id;
                                        alert("dd");
                                      var node = this.getView().getNode(record);
                                       var d=Ext.fly(node);
                                        d.addCls('x-form-item-default x-form-type-text x-field-default x-item-disabled x-anchor-form-item ');

}

那么此时，treepaenl checkbox的禁用以及变灰完成,那么下面展示，改进后的代码：

listeners:{
                                    load: function(sender, nodes, records) {
                                        Ext.each(records, function(record, index) {
                                           if(record.data.disabled){    // 这是我自己后台数据的一个属性，不要被名字误导
                                               console.log(record.data.id);
                                               var node=this.getView().getNode(record);
                                               var d=Ext.fly(node);
                                               var input = Ext.fly(node).down('input');
                                               input.set({disabled: 'disable'});
                                               d.addCls('x-form-item-default x-form-type-text x-field-default x-item-disabled');
                                           }

                                        },this
                                        )

                                    }
                                    }

注：原创博客，转载请注明出处http://control.blog.sina.com.cn/admin/article/article_add.php

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：Extjs5.0 TreePicker.js 实现下拉树

后一篇：Extjs5.0 TreePanle NodeDisabled 节点禁用