EXTJS 化繁为简 减少冗余代码

Question

extjs组件

Answer 1

把公共部分提取出来，然后组合items项目function createRadioGroup(childOption, fileHtml) {
        var 审计方式 = {
            xtype: "component",
            html: "<div style='margin-left:4px;'><font color='#0B6F9E'>审计方式: </font><span class='b'>"
                    + childOption.auditType + "</span></div>",
            cls: "a"
        }, 审计要点 = {
            xtype: "component",
            html: "<div style='margin-left:4px;'><font color='#0B6F9E'>审计要点: </font><span class='b'>"
                    + childOption.auditPoint + "<span></div>" + fileHtml,
            cls: "a"
        }, 审计评语 = {
            xtype: "textfield", name: "comment" + childOption.checkoptionId, fieldLabel: "审计评语"
        }, vbox = {
            xtype: "container", layout: "vbox", padding: "",
            items: [
                        { xtype: "textfield", fieldLabel: "自助值机数量", labelWidth: 100, maxWidth: 400,
                            name: "selfCheckInCount" + childOption.checkoptionId, flex: 1
                        },
                        { xtype: "textfield", fieldLabel: "自助值机率", labelWidth: 100, maxWidth: 400,
                            name: "selfCheckInProportion" + childOption.checkoptionId, flex: 1
                        }
                    ]
        }
               , radiogroup = {
                   xtype: "radiogroup", cls: "",
                   items: [
                        { boxLabel: "全开放柜台 ", name: "desk" + childOption.checkoptionId, inputValue: "publicDesk" },
                        { boxLabel: "专用柜台", name: "desk" + childOption.checkoptionId, inputValue: "privateDest" }
                    ]
               }
               , 审计评语 = { xtype: "radiogroup", fieldLabel: "审计结论", cls: "",
                   items: [
                        { boxLabel: "符合  compliance", name: "choose" + childOption.checkoptionId, inputValue: "A" },
                        { boxLabel: "不符合  noncompliance", name: "choose" + childOption.checkoptionId, inputValue: "B" },
                        { boxLabel: "观察项  reserved item", name: "choose" + childOption.checkoptionId, inputValue: "C" },
                        { boxLabel: "不适合  not applicable", name: "choose" + childOption.checkoptionId, inputValue: "D" }
                    ]
               }
               , vbox1 = {
                   xtype: "container", layout: "vbox", padding: "",
                   items: [
                            { xtype: "textfield", fieldLabel: "座位数", labelWidth: 100, maxWidth: 400,
                                name: "seatCount" + childOption.checkoptionId, flex: 1
                            },
                            { xtype: "textfield", fieldLabel: "人均面积", labelWidth: 100, maxWidth: 400,
                                name: "areaPerCapita" + childOption.checkoptionId, flex: 1
                            }
                        ]
               };
        var radioGroup = radioGroup = {
            xtype: "fieldset",
            title: childOption.checkoptionName,
            layout: "form",
            collapsible: true,
            items: [],
            listeners: { render: function (t) { t.collapse(); } }
        };
        if (childOption.isconclusion == "1") {
            radioGroup.items = radioGroup.items.concat([审计方式, 审计要点, 审计评语, vbox]);        } else if (childOption.isdesk == "1") {
            radioGroup.items = radioGroup.items.concat([radiogroup, 审计方式, 审计要点, 审计评语, 审计结论]);        } else if (childOption.isarea == "1") {
            radioGroup.items = radioGroup.items.concat([审计方式, 审计要点, 审计评语, vbox1, 审计结论]);
        } else if (childOption.isequip == "1") {
            radioGroup.items = radioGroup.items.concat([审计方式, 审计要点, 审计评语, 审计结论]);        } else {
            radioGroup.items = radioGroup.items.concat([审计方式, 审计要点, 审计评语, 审计结论]);
        }
        return radioGroup;
    }