`

Ext.Tree扩展CheckBox方法

 
阅读更多

/////引入这个JS:    Ext.ux.tree.TreeCheckNodeUI.js

//////////////////////////////////////////////////

//业务品类(类别TYPE)
            layout : 'tableform',
            border : false,
            items : [{
                xtype : 'textfield',
                fieldLabel : '业务品类',
                readOnly : (customFields_id != null && customFields_id != "") ? true : false,
                name : 'TYPE',
                id : 'customfields_type_id',
                readOnly : true,
                width : 350
            }, {
                xtype : 'button',
                text : '选择',
                style : 'margin-left:10px;',
                disabled : (customFields_id != null && customFields_id != "") ? true : false,
                id : 'btnSelect',
                handler : customfields_build_SelectBusinessCategory
            }]

////////////////////////////////////////////

 

 

  //↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓选择业务品类 region↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

    /**
     * 新建自定义自段 选择业务品类
     */
    function customfields_build_SelectBusinessCategory() {
        var departmentIDArr = new Array();
        Array.prototype.contains = function(element) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] == element) {
                    return true;
                }
            }
            return false;
        }

        var checkIDS = setting_customfieldsbuild_form.getForm().findField('category_id').getValue();
        if (checkIDS != "" && checkIDS != null) {
            departmentIDArr = checkIDS.split(',');
        }

        function workflow_build_checkEachChildNode(treeNode) {
            var childLength = treeNode.childNodes.length;
            for (var i = 0; i < treeNode.childNodes.length; i++) {
                if (departmentIDArr.contains(treeNode.childNodes[i].id)) {
                    treeNode.childNodes[i].attributes.checked = true;//.select();//.checked=true;//toggleCheck(true);
                    if (!treeNode.childNodes[i].leaf) {
                        workflow_build_checkEachChildNode(treeNode.childNodes[i]);
                    }
                }
            }
        }
        Ext.getCmp('btnSelect').disable();
        var setting_customfield_BusinessCategory_treePanel = new Ext.tree.TreePanel({
            lines : true,
            containerScroll : true,
            autoScroll : true,
            //checkModel : 'single',
            checkModel : 'cascade',// 对树的级联多选  
            onlyLeafCheckable : false,//对树所有结点都可选  
            loader : new Ext.tree.TreeLoader({
                dataUrl : 'BLL/ModuleSystem/Setting/BusinessCategory/Operation.aspx?cmd=businessCategoryTree&rand=' + Math.round(Math.random() * (10000 - 1)).toString(),
                baseAttrs : {
                    uiProvider : Ext.tree.TreeCheckNodeUI
                }
            }),
            root : new Ext.tree.AsyncTreeNode({
                id : "root2",
                text : "选择业务品类",
                expanded : true
            })
        });
        if (checkIDS != "" && checkIDS != null) {
            setting_customfield_BusinessCategory_treePanel.expandAll();
        }
        setting_customfield_BusinessCategory_treePanel.on('load', workflow_build_checkEachChildNode);
        var setting_customfield_BusinessCategory_Form = new Ext.form.FormPanel({
            layout : 'form',
            labelAlign : 'top',
            layout : 'fit',
            bodyStyle : 'padding:20px',
            width : 400,
            labelWidth : 70,
            labelAlign : "right",
            autoScroll : true,
            items : [setting_customfield_BusinessCategory_treePanel],
            buttons : [{
                text : "选择",
                handler : function() {
                    var checkedNodes = setting_customfield_BusinessCategory_treePanel.getChecked();
                    var checkText = new Array;
                    var checkId = new Array;// 存放选中id的数组
                    for (var i = 0; i < checkedNodes.length; i++) {
                        checkText.push(checkedNodes[i].text);// 添加id到数组
                        checkId.push(checkedNodes[i].id);
                    }
                    var value = checkText.toString().replace(/\,/g, ';');
                    setting_customfieldsbuild_form.getForm().findField('TYPE').setValue(value);
                    setting_customfieldsbuild_form.getForm().findField('category_id').setValue(checkId.toString());
//                    Ext.getCmp('customfields_type_id').setValue(value);
//                    Ext.getCmp('businesscategory_id_hidden').setValue(checkId.toString());
                    Ext.getCmp('btnSelect').enable();
                    customfields_build_BusinessCategoryWin.close();
                }
            }, {
                text : "取消",
                handler : function() {
                    Ext.getCmp('btnSelect').enable();
                    customfields_build_BusinessCategoryWin.close();
                }
            }]
        });
        var customfields_build_BusinessCategoryWin = new Ext.Window({
            title : "选择业务品类",
            layout : 'fit',
            width : 400,
            height : 300,
            closeAction : 'destroy',
            autoScroll : true,
            plain : true,
            resizable : false,
            constrainHeader : true,
            items : setting_customfield_BusinessCategory_Form,
            listeners : {
                'beforedestroy' : function(p) {
                    Ext.getCmp('btnSelect').enable();
                }
            }
        });
        customfields_build_BusinessCategoryWin.show();
    }
    //↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑选择业务品类 endregion↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

 

 

  • 大小: 43.2 KB
分享到:
评论

相关推荐

    EXT TREE 扩展CHECKBOX JS

    EXT TREE扩展CHECKBOX JS是一种在EXT JS框架下对树形组件(Tree Panel)进行增强,实现复选框功能的技术。EXT JS是一个强大的JavaScript GUI库,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。在EXT JS中,...

    Ext组件描述,各个组件含义

    **2.12 Tree Panel (Ext.tree.TreePanel)** - **xtype**: `treepanel` - **功能描述**:Tree Panel 是一个树形结构的组件,可以用来展示层次结构的数据。 - **主要用途**:适用于展示目录结构或组织架构图。 **...

    checkbox tree extjs2

    在ExtJS 2中,Checkbox Tree是基于TreePanel组件的扩展,它提供了一种可视化的方式,让用户可以多选树结构中的节点。这个组件特别适用于需要对分类数据进行选择或过滤的场景,如文件系统导航、权限管理等。 要创建...

    ext复选框的ColumnTree扩展包

    "ext复选框的ColumnTree扩展包"是EXT框架的一个扩展,它为ColumnTree添加了复选框功能。这使得用户可以在树形结构中进行多选操作,极大地提高了交互性和数据处理效率。这个扩展包包括了所有必要的JavaScript和CSS...

    解决 extjs2.2 给tree-panel 添加 checkbox 的add-on

    2. **TreeCheckbox.css**:另一个CSS文件,可能包含更具体的样式规则,比如复选框的边框、颜色、大小等,或者是对Tree Panel的节点进行调整,确保复选框能够正确地与节点内容对齐。 3. **example.html**:这是一个...

    EXT核心API详解.doc

    33. **Ext.data.Tree类**:树形数据结构,用于表示层级关系的数据。 34. **Ext.data.Node类**:树结构中的节点,包含了节点的基本属性和操作。 35. **Ext.Action类**:动作类,用于组合UI组件和事件处理。 36. **...

    ExtJSWeb应用程序开发指南(第2版)

    4.1.7 Ext.form.field.Checkbox复选框和Ext.form.field.Radio单选框 4.1.8 Ext.form.CheckboxGroup和Ext.form.RadioGroup 4.1.9 Ext.form.field.Trigger触发字段 4.1.10 Ext.form.field.Spinner微调字段 4.1.11 ...

    ExtJs_xtype一览

    - `splitbutton`:`Ext.SplitButton`,扩展了按钮,增加了下拉菜单的功能。 - `cycle`:`Ext.CycleButton`,一种特殊按钮,允许用户在预定义的选项之间循环切换。 - `buttongroup`:`Ext.ButtonGroup`,用于将多...

    EXT tree 使用 实例 最新

    8. **扩展和插件**:EXT Tree有丰富的扩展和插件,如`checkbox`(复选框节点)、`contextmenu`(右键菜单)等,可以进一步增强功能。 在文档`extjs的tree的使用.doc`中,你将找到关于如何设置这些配置、创建树实例...

    EXT from培训教材

    EXT库不仅包含表单组件,还有其他许多功能强大的组件,如面板(Panel)、树形视图(Tree)、网格(Grid)等,它们共同构成了EXT JS这个强大的前端开发框架。通过熟练掌握EXT,开发者可以构建出界面美观、功能丰富的...

    EXTJS___API详解

    2. **Array 类**:EXTJS扩展了JavaScript的数组对象,添加了一些实用的方法,如Ext.Array.each()用于遍历数组,Ext.Array.indexOf()查找元素的索引。 3. **Number 类**:增强了JavaScript的数字处理,提供了如Ext....

    ExtJs xtype一览

    - **`checkbox` (Ext.form.Checkbox)**: 多选框组件,用于实现多选功能。 - **`combo` (Ext.form.ComboBox)**: 下拉框组件,提供了一个下拉列表供用户选择。 - **`datefield` (Ext.form.DateField)**: 日期选择项...

    ExtJS3总结内容

    - `treepanel`: `Ext.tree.TreePanel` - `viewport`: `Ext.ViewPort` - `window`: `Ext.Window` - `toolbarcomponents`: `paging`, `toolbar`, `tbbutton`, `tbfill`, `tbitem`, `tbseparator`, `tbspacer`, `...

    extjs控件列表

    **Ext.tree.TreePanel** - **描述**: 树型面板,用于展示层次结构的数据。 - **用途**: 文件系统、目录结构的可视化表示。 **Ext.FlashComponent** - **描述**: 用于显示Flash内容的组件(尽管现在已很少使用)。 -...

    Extjs xtype集合

    - **`Class`**: `Ext.tree.TreePanel` - **描述**: 树形结构的面板,用于展示层级关系的数据。 9. **`flash`:** - **`xtype`**: `flash` - **`Class`**: `Ext.FlashComponent` - **描述**: 用于嵌入Flash内容...

    EXT_JS实例,官方实例

    6. **表单组件**:EXT JS提供了一系列表单组件,如文本框(TextField)、下拉列表(ComboBox)、复选框(Checkbox)、单选按钮(RadioButton)等。这些组件可以轻松创建复杂的表单并实现数据验证。 7. **Ajax通信**...

    extjs4 入门基础,form、grid、tree

    在ExtJS中,使用`Ext.tree.Panel`创建树。`rootVisible`属性控制是否显示根节点,`store`配置项与网格类似,用于绑定数据。树节点可以通过`children`属性定义子节点,或者通过异步加载数据。树视图还支持节点的展开/...

    ExtJs.MultiTreeField

    在技术层面上,MultiTreeField基于Ext.tree.Panel,它扩展了树形视图的展示方式,同时添加了多选功能。它包含以下关键组件和属性: 1. **Tree Store**:存储树结构数据,包括节点ID、父节点ID、文本、图标等信息。...

    EXT教程EXT用大量的实例演示Ext实例

    例如,TreeField和CheckBoxTree等控件都是扩展自标准组件的功能。此外,Ext JS还可以与其他技术(如dwr、localXHR等)整合,增加更多的功能和灵活性。 #### 9. 常见问题解答 在Ext使用过程中,可能遇到各种问题,...

Global site tag (gtag.js) - Google Analytics