Extjs6.2关于下拉树效果实现


createJudge: function () {

    var me = this;
    // 判断条件存储对象
    me.condition = Ext.clone(Cmp.judge)
    me.activeObject.condition.push(me.condition)
    var page = Map.get(Const.PAGE_OBJECT);

    //拿到树结构
    var store = Ext.create('Ext.data.TreeStore', {
        root: {
            // text: 'Root',
            expanded: true,
            rootVisible: false,                 // 隐藏根节点,默认显示根节点下的子节点
            lines: true,                       // 去掉节点之间的连接线
            children: [
                {
                    text: '自定义参数',
                    expanded: true,
                    children: [
                        {
                            text: 'Grandchild',
                            leaf: true,
                        }
                    ]
                },
                {
                    text: '元件引用',
                    expanded: true,
                    children: [
                        {
                            text: 'Grandchild',
                            leaf: true
                        }
                    ]
                },
                {
                    text: '系统变量',
                    // iconCls:'ApplicationViewColumns',
                    expanded: true,
                    children: [
                        {
                            text: 'Grandchild',
                            leaf: true
                        }
                    ]
                }
            ]
        }
    });
    //自定义参数数据
    for (var i = 0; i < page.params.length; i++) {
        store.getRootNode().firstChild.appendChild({
            leaf: true,
            expanded: false,
            text: (page.params[i][1])
        })
    }
    ;
    //元件引用参数
    for (var i in page.items) {
        store.getRootNode().firstChild.nextSibling.appendChild({
            id: page.items[i].id,
            leaf: true,
            expanded: false,
            text: (page.items[i].marking)
        })
    }
    //与或非
    var switchJudge = [
        {
            xtype: 'radiogroup',
            style: "margin-left:6px;",
            items: [
                {
                    style: 'margin-left:10px;margin-right:10px;',
                    boxLabel: 'or',
                    name: me.num,
                    checked: true,
                    listeners: {
                        change: function (node, newVal) {
                            var index = this.ownerCt.ownerCt.ownerCt.items.indexOf(this.ownerCt.ownerCt)
                            if (newVal) {
                                me.activeObject.condition[index].andOr = "||"
                            } else {
                                me.activeObject.condition[index].andOr = "&&"
                            }

                            Ext.getCmp("described").setHtml(me.joinDescription())
                        }
                    }
                },
                {
                    boxLabel: 'and',
                    name: me.num,
                    checked: false
                },
            ],
        }
    ];
    var itemComponent = [
        {
            xtype: 'treepicker',
            displayField: 'text',
            value: '111111',
            editable: true,
            style: "margin-right:5px;margin-left:15px",
            columnWidth: .35,
            border: false,
            bodyBorder: false,
            rootVisible: false,     //隐藏根节点
            useArrows: true,        //树节点使用箭头
            containerScroll: true,
            collapsible: false,
            minPickerHeight: 300,
            maxPickerHeight: 300,
            autoScroll: false,
            lines: false,
            tbar: [
                {
                    xtype: 'textfield',
                    width: "100%",
                    emptyText: "查找"
                    // text: 'Button 1'
                }
            ],

            store: store,
            listeners: {
                select: function (node) {
                    //获取点击的是那一个子组件
                    var index = this.ownerCt.ownerCt.ownerCt.items.indexOf(this.ownerCt.ownerCt)
                    me.activeObject.condition[index].judgeValue.key = node.rawValue
                    Ext.getCmp("described").setHtml(me.joinDescription())
                },
                keyup:function(){
                    console.log(1312321)
                }
            }
        },
        {
            xtype: "combo",
            columnWidth: .2,
            queryMode: 'local',
            displayField: 'value',
            valueField: 'name',
            // readOnly: true,
            style: "margin-left:5px;margin-right:5px",
            value: "0",
            store: Ext.create('Ext.data.Store', {
                fields: ['name', 'value'],
                data: [
                    {"name": "0", "value": "="},
                    {"name": "1", "value": "!="},
                    {"name": "2", "value": ">"},
                    {"name": "3", "value": ">="},
                    {"name": "4", "value": "<"},
                    {"name": "5", "value": "<="},
                    {"name": "6", "value": "介于"},
                    {"name": "7", "value": "不介于"},
                    {"name": "8", "value": "是"},
                    {"name": "9", "value": "不是"},
                    //...
                ]
            }),
            listeners: {
                select: function (node) {
                    //获取点击的是那一个子组件
                    var index = this.ownerCt.ownerCt.ownerCt.items.indexOf(this.ownerCt.ownerCt)
                    me.activeObject.condition[index].judgeValue.than = node.rawValue
                    Ext.getCmp("described").setHtml(me.joinDescription())
                },
            }
        },
        {
            xtype: 'treepicker',
            displayField: 'text',
            minPickerHeight: 300,
            maxPickerHeight: 300,
            value: '',
            border: false,
            bodyBorder: false,
            editable: true,
            columnWidth: .35,
            style: "margin-left:5px",
            tbar: [
                {
                    xtype: 'textfield',
                    width: "100%",
                    emptyText: "查找"
                }
            ],
            store: store,
            listeners: {
                select: function (node) {
                    //获取点击的是那一个子组件
                    var index = this.ownerCt.ownerCt.ownerCt.items.indexOf(this.ownerCt.ownerCt)
                    me.activeObject.condition[index].judgeValue.value = node.rawValue
                    Ext.getCmp("described").setHtml(me.joinDescription())
                },
            }
        },
        {
            xtype: "button",
            columnWidth: .05,
            cls: "conditionAdd",
            style: "background-repeat:no-repeat;height:22px;margin-left:5px;background-position:center",
            handler: function () {
                // 添加动态name值
                ++me.num;
                for (var i = 0; i < switchJudge[0].items.length; i++) {
                    switchJudge[0].items[i].name = me.num
                }
                Ext.getCmp("setCondition").add(lastChildItem);
                //切换当前对象
                me.condition = Ext.clone(Cmp.judge)
                me.activeObject.condition.push(me.condition)
                Ext.getCmp("described").setHtml(me.joinDescription())
            },
        },
        {
            xtype: "button",
            columnWidth: .05,
            cls: "Cross",
            style: "background-repeat:no-repeat;height:22px;margin-right:5px;background-position:center",
            handler: function () {
                //获取点击的是那一个子组件
                var index = this.ownerCt.ownerCt.ownerCt.items.indexOf(this.ownerCt.ownerCt)
                me.activeObject.condition.splice(index, 1)
                //判断有两个或以上的时候不允许删除第一个
                if (this.ownerCt.ownerCt.ownerCt.items.first() == this.ownerCt.ownerCt) {
                    if (this.ownerCt.ownerCt.items.first() == this.ownerCt.ownerCt.items.last()) {
                        this.ownerCt.destroy()
                    }
                    ;
                } else {
                    this.ownerCt.ownerCt.destroy()
                }
                Ext.getCmp("described").setHtml(me.joinDescription())

            },
            listeners: {},
        },
    ];

    // 第一行结构
    var firstChildItem = {
        xtype: "panel",
        layout: "column",
        style: "width:100%;height:100%;margin-top:5px;margin-bottom:5px;",
        border: false,
        bodyBorder: false,
        items: itemComponent
    };
    //其他行结构
    var lastChildItem = {
        xtype: "panel",
        layout: "auto",
        style: "width:100%;height:100%;margin-top:5px;margin-bottom:5px;",
        border: false,
        bodyBorder: false,
        items: switchJudge.concat(
            [
                {
                    xtype: "panel",
                    layout: "column",
                    border: false,
                    items: itemComponent
                }
            ]
        )
    };

    // 显示条件页面
    var condition = new Ext.Window({
        title: "<span style='color:white'>定义条件</span>",
        width: 700,
        id: "conditionId",
        height: 500,
        layout: 'border',
        autoScroll: true,
        bodyStyle: "padding:5px;",
        items: [
            {
                xtype: "panel",
                title: "<span style='color:#fff'>条件设置</span>",
                region: "north",
                height: "50%",
                autoScroll: true,
                id: "setCondition",
                bodyStyle: "color:white;",
                listeners: {
                    "render": function () {
                        //判断第一次进来还是需要回显
                        if (me.activeObject.condition == "") {
                            Ext.getCmp("setCondition").add(firstChildItem);
                        } else {
                            var itemJudge = me.activeObject.condition
                            for (var i = 0; i < itemJudge.length; i++) {
                                if (i == 0) {
                                    firstChildItem.items[0].value= itemJudge[i].judgeValue.key
                                    firstChildItem.items[1].value= itemJudge[i].judgeValue.than
                                    firstChildItem.items[2].value= itemJudge[i].judgeValue.value;
                                    Ext.getCmp("setCondition").add(firstChildItem);

                                }
                            }
                        }
                    }
                },
                tools: [
                    {
                        id: "toolButton",
                        xtype: "button",
                        style: "background:none",
                        text: '<span style="color:#fff">清除</span>',
                        handler: function () {
                            if (Ext.getCmp("setCondition").items.keys == 0) {
                                Ext.getCmp("setCondition").add(firstChildItem)
                                Ext.getCmp("toolButton").setText('<span style="color:#fff!important">清除</span>')
                                //切换当前对象
                                me.condition = Ext.clone(Cmp.judge)
                                me.activeObject.condition.push(me.condition)
                            } else {
                                Ext.getCmp("setCondition").removeAll()
                                Ext.getCmp("toolButton").setText('<span style="color:#0fff!important">添加</span>')
                            }

                        },
                    },
                ],
            },
            {
                xtype: "panel",
                title: "<span style='color:#fff'>条件描述</span>",
                id: "described",
                region: "south",
                height: "49%",
                bodyStyle: "color:white;padding:10px;",
                style: "margin-top:5px;",
                html: "<span style='color:orange'> if ( )</span>"
            }
        ],
        //确定 取消
        resizable: false,
        modal: true,
        buttons: [
            {
                text: '<span style="color:#000">确定</span>',
                iconCls: 'Tick',
                listeners: {
                    'click': function () {
                        console.log(me.activeObject.condition)
                        page.items[page.activeCmp.id].property.events.condition = me.activeObject.condition;
                        // 销毁当前window
                        Ext.getCmp("conditionId").destroy()
                    },
                }
            },
            {
                text: '<span style="color:#000">取消</span>',
                iconCls: 'Cancel',
                listeners: {
                    'click': function () {
                        Ext.getCmp("conditionId").destroy()
                    }
                }
            }]
    });
    condition.show();
},***


====



发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>