Mocoolka 代码讲解 屏幕生成器之FORM生成

支持Mocoolka,请点击这里
https://code.csdn.net/2013ossurvey#gitvote32

屏幕生成器FORM有两个作用
一个是把窗体字段拖到屏幕中进行排列，在设计时使用，最后保存成模型的一部分。
二是在设计后做为输入、输出的UI
FORM生成由MKEDITPANEL、和组件组成，组件就是每个字段使用到的控件。
生成FORM由布局和组件两部分组成。
布局现在只支持一种vbox hbox
组件有几个关键参数：位置决定组件出现在布局的哪里，宽度决定组件的宽度，条件决定一个字段生成几个组件，比如大于小于就生成两个组件
这几个因为跟屏幕密切相关就保存在模型的字段中。
屏幕显示标签、屏幕用到哪种组件保存在模型的列中，因为它们不会因屏幕发生改变而改变
下面是核心的代码类MKEDITPANEL
代码用到extjs库

/*
 *************************************************************************
 * Contact:  http://www.mocoolka.com
 * GNU General Public License Usage
 * This file may be used under the terms of the GNU General Public License version 3.0 as
 * published by the Free Software Foundation and appearing in the file LICENSE included in the
 * packaging of this file.

 * Please review the following information to ensure the GNU General Public License version 3.0
 * requirements will be met: http://www.gnu.org/copyleft/gpl.html.
 * The Original Code is Mocoolka Group. 
 * The Initial Developer of the Original Code is MoCoolKa SLU 
 * All portions are Copyright (C) 2012-2013 MoCoolKa SLU 
 * All Rights Reserved. 
 * Contributor(s):  ______________________________________.
 ************************************************************************
 */
/*
 *************************************************************************
 *FORM生成，根据模型生成标准的FORM。在模型中已经保存了屏幕布局和每个字段所使用的组件
 *在本类中就是用循环的方式取出每个组件，按照模型中定义的布局，自动排列顺序和位置
 *
 ************************************************************************
 */
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';


Ext.define('Mocoolka.component.MKEditPanel', {
    extend: 'Ext.form.Panel',
    xtype: 'mkeditpanel',

    requires: ['Mocoolka.ux.MKFieldDropZone', 'Mocoolka.model.MKCheckMenu', 'Mocoolka.component.MKTree'
    , 'Mocoolka.store.MKMenus', 'Mocoolka.component.MKToolbar', 'Mocoolka.model.MKMenu',
    'Mocoolka.component.MKSearchField', 'Mocoolka.component.MKComboBox'
    , 'Mocoolka.component.MKOrderField', 'Mocoolka.component.MKIconSelect'],

    MKEditModel: 'Edit',
    fieldDefaults: {
        msgTarget: 'side',
        //labelWidth: 75
    },
    isBorder: true,
    fieldsetMargin: "10 10 0 10",
    fieldsetPading: 5,
    fieldsetCollapsible: true,
    containerPading: 1,
    containerMargin: 0,
    fieldPading:2,
    initComponent: function () {
        var me = this;
        //提示初始化
        Ext.QuickTips.init();
        //模型对象
        var tab=this.mktab;
        //在编辑中，也就是在设计时使用
        if (me.MKEditModel == 'Edit') {
            //建立延时任务
            me.beginrefresh = new Ext.util.TaskRunner().newTask({
                run: me.newbuild1,
                interval: 1000,
                repeat: 1

            });
            me.task = new Ext.util.DelayedTask(function () {
                //重画页面
                me.newbuild1();
            });
            me.begintask = function () { me.task.delay(500); };
        }
        if (tab) {
            //查询条件
            if (me.mktabtype == 'Manager') {
                //取出查询条件下使用的字段
                me.fields = tab.getMKFieldStore("Manager");
                me.fieldsetMargin= "0 10 0 10";
                }
            else
                //取出编辑屏幕使用的字段
                me.fields = tab.getMKFieldStore("Edit");
        }


        selectcontrol = null;
       

      

        
        me.callParent();
 
        if (tab) {
            //根据模型，刷新屏幕
            me.refresh(me);
        }
        //增加4个事件
        //select 在屏幕中选中一个组件
        //update 组件值发生改变
        //positionchange 位置发生变化
        //mkfieldchange 组件值发生改变
        me.addEvents(
            "select",
            "update", "positionchange", "mkfieldchange"
              
            )
    },

    init: function (tab) {
        var me = this;
        me.tabstore = tab;
        //如果在设计中
       if (me.MKEditModel == 'Edit') {

            me.beginrefresh = new Ext.util.TaskRunner().newTask({
                run: me.newbuild1,
                interval: 1000,
                repeat: 1

            });
            me.task = new Ext.util.DelayedTask(function () {
                me.newbuild1();
            });
            me.begintask = function () { me.task.delay(500); };
            console.log("Edit");
        }
       if (me.mktabtype == 'Manager') {
           me.fields = tab.FieldList();
       }
       else
           me.fields = tab.getMKFieldStore("Edit");
        
       
        selectcontrol = null;
        me.newbuild();
        //在设计中
        if (me.MKEditModel == 'Edit') {
            //单击事件，判断是否单击到一个组件，如果是，点燃选择事件
            me.body.on('click', function (e, t) {

                var i = t.id.lastIndexOf('-');
                name = t.id.substring(0, i);

               
                var o = me.down("#" + name);

                if (o != null && o.mkfield != null) {
                  
                    me.activecontrol(o.name);

                    me.fireEvent('select', o.mkfield);

                }
            }, null, [{
                delegate: 'x-form-item'
            },
            ]);
        }


     
    },
    //containerContextMenu: function (view, e) {
    //    console.log(view);
    //},
    //初始化
    begin: function () {


        var me = this;

        me.init(me.tabstore);

    },

    //组件缺省配置
    fieldDefaults: {
        labelAlign: 'right',
       
    },
    //缺省布局，
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    border: false,

    controlitems: [],

    //设置组件名称，如果是查询条件，增加用的到查询条件
    setstandactcontrol: function (name, condition) {

        if (this.mktabtype == 'Manager') {
            setactcontrol(name + "_" + condition);
        }
        else
            setactcontrol(name);

    },
    //不激活组件，从以前激活的组件上去掉可拖动宽度组件，改变为普通边框
    unactivecontrol: function () {
        var me = this;
        if (me.selectname && me.selectcontrol != null) {
           
            me.selectcontrol.inputEl.setStyle("borderColor", me.selectcontrol.backupcolor);
          
            if (me.customResizer) {

                me.customResizer.destroy();
            }
            me.selectname = null;
            me.selectcontrol = null;
        }
    },
    //激活组件
    activecontrol: function (name) {

        var me = this;
        //如果是当前激活，不做处理
        if (me.selectname == name && me.selectcontrol != null)
            return;
        //不激活当前焦点组件
        me.unactivecontrol();
        //查找激活组件
        var o = me.down('field[name="' + name + '"]');
        //设置为当前焦点组件
        me.selectcontrol = o;
        if (me.selectcontrol) {
            me.selectname = name;
            //改变边框为激活
            me.selectcontrol.backupcolor = me.selectcontrol.inputEl.getStyle("borderColor");

            me.selectcontrol.inputEl.setStyle("borderColor", 'red');
            //组件可以拖动宽度
            me.customResizer = Ext.create('Ext.create', 'Ext.resizer.Resizer', {

                target: me.selectcontrol.id,
                pinned: false,
                minWidth: 20,
                minHeight: 10,
                widthIncrement: 5,
               

                listeners: {
                    resize: function (control, width, height, e, eOpts) {

                      
                        var con = me.down("#" + control.originalTarget.id);

                        con.mkfield.set("Width", width);
                        con.mkfield.commit();
                        var form = con.up('mkeditpanel');
                        form.fireEvent('update', con.mkfield);

                        form.newbuild();

                        
                    },
                    resizedrag: function (control, width, height, e, eOpts) {
                      
                        var con = me.down("#" + control.originalTarget.id);
                        var panel = con.up("mkeditpanel");
                        
                        panel.selectcontrol.Width = (width);
                      
                    },
                },

                dynamic: true,
                handles: 'e' // shorthand for 'n s e w ne nw se sw'
            });

        }

    },

    //刷新
    newbuild: function () {

        var me = this;
        //设计中
        if (me.MKEditModel == "Edit") {
            //暂时挂起事件响应，为了提高渲染效率
            me.suspendEvents(false);
        }
       //删除以前组件
        me.deletedata(me);
        //重新生成组件
       me.refresh(me);
       if (me.MKEditModel == "Edit") {
           me.resumeEvents();
         //  Ext.resumeLayouts(true);
       }
      
        //点燃位置改变事件
        me.fireEvent('positionchange');

    },
    //清空组件占用的内存
    beforeDestroy: function () {
        var me = this;
        me.deletedata(me);
        me.callParent();
    },
    //删除屏幕组件
    deletedata: function (me) {
        me.unactivecontrol();
        if (selectcontrol)
            selectcontrol.destroy();
        if (me.beginrefresh)
            me.beginrefresh.destroy();

        me.removeAll(true);
    },
    newbuild1: function () {
        var me = this;
        console.log(me);
        me.deletedata(me);
        me.refresh(me);

        me.fireEvent('positionchange');

    },

    fields: undefined,
    beginrefresh: undefined,
    //重画组件
    refresh: function (me) {

        //模型
        var tab = me.mktab;
        //模型中用到的字段
        var fields = me.fields;
        //按位置排序
        sortbyname(fields, "Position");
        //建立组件集合
        var item1 = me.CreateFormItems(tab, fields, "test", me.mktabtype, "box", me.MKEditModel);
        //增加到屏幕上
        me.add(item1);
    },



    //建立组件集合
    //tab:模型数据，fields:当前字段集合，defaultGroupText:缺省的分组标题，ifFind是否查询条件，layout：布局，EditModel
    CreateFormItems: function (tab, fields, defaultGroupText, ifFind, layout, EditModel) {
     
        var gridfields = "";
        var rootItems = [];

        var first = true;
        //遍历字段
        for (var i = 0; i < fields.getCount() ; i++) {
            var curr;
            var box;
            var field = fields.getAt(i);
            //不显示位置的跳过
            if (field.get("Position") <= 0 || field.get("Position") == null || field.get('IsHide') == true)  {
                continue;
            }
            //没通过校验的跳过
            if (!mkmodelutil.verfiyfield(field))
                continue;

            //列对象
            var col = field.data.Column;
            //如果是分组框，先增加分组框，把增加的分组框设置为当前分组框
            if (field.get('FieldGroup') != null && field.get('FieldGroup') != "") {

                if (layout == "box") {
                    curr = this.createboxFieldset(field.get('FieldGroup'), EditModel);

                    box = this.createboxcontainer();
                    curr.items.push(box);
                    rootItems.push(curr);
                }
                else {

                    curr = this.createFieldset(field.get('FieldGroup'), 4, EditModel);
                    rootItems.push(curr);
                }
                first = true;
            }

            if (curr == null) {

                if (layout == "box") {
                    curr = this.createboxFieldset(field.get('FieldGroup'), EditModel);
                    box = this.createboxcontainer();
                    curr.items.push(box);
                    rootItems.push(curr);
                    first = true;
                }
                else {

                    curr = this.createFieldset(field.get('FieldGroup'), 4, EditModel);
                    rootItems.push(curr);
                    first = true;
                }
            }
            //得到过滤条件，如果过滤条件为大于小于等涉及到两个条件的，增加两个组件，为查询条件FORM使用
            var filter = field.get("FilterCondition");
            var fieldControl;

            if (filter != null) {
                if (filter.length > 1) {
                    fieldControl = [];

                    var filters = filter.split(",");
                    for (var k=0;k< filters.length;k++) {
                       
                        var f = filters[k];
                        
                        var fieldControl1 = this.GenField(field, tab, ifFind, layout, EditModel);
                        fieldControl1.condition = f;
                        if (k != 0) {
                            fieldControl1.width = fieldControl1.width - fieldControl1.labelWidth + 20;
                            fieldControl1.labelWidth = 20;
                            fieldControl1.fieldLabel = "---";
                            fieldControl1.labelSeparator = "";
                        }

                        fieldControl.push(fieldControl1);
                    }
                }
                else {
                    fieldControl = this.GenField(field, tab, ifFind, layout, EditModel);
                    if (fieldControl.length > 0) {
                        for (var y in fieldControl) {
                            fieldControl[y].condition = filter;

                        }
                    }
                    else
                    fieldControl.condition = filter;
                }
               
            }
            else {
                fieldControl = this.GenField(field, tab, ifFind, layout, EditModel);
               
            }
            if (layout == "box") {
                //如果是新行，建立一个新的容器，新加组件加到新容器中
                if (field.get('IsNewLine') && first == false) {
                    box = this.createboxcontainer();
                    curr.items.push(box);
                }
                if (fieldControl.length == null) {
                    box.items.push(fieldControl)
                }
                else {
                    for (var j = 0; j < fieldControl.length; j++) {
                        box.items.push(fieldControl[j]);
                    }
                }
            }
            else {
                if (fieldControl.length == null) {
                    curr.items.push(fieldControl)
                }
                else {
                    for (var z = 0; j < fieldControl.length; j++) {
                        curr.items.push(fieldControl[z]);
                    }
                }
                
            }
            first = false;
        };

        return rootItems;
    },
    //根据字段建立组件
    GenField: function (field, tab, ifFind, layout, EditModel) {

        //列对象
        var col = field.get('Column');
        //相关列
        var relationcolumn = col.get("RelationColumn");
        //是否只读
        var IsReadOnly = col.get("IsReadOnly") == true || field.get("IsReadOnly") == true;
        var type = col.get('ReferenceID');
        if (relationcolumn != null && relationcolumn.length > 0) {
            col.set("ComboxID", "System.RelationColumn");
            type = "ComboBox";

        }
        var re = {};
        var name;
        
            name = field.get('Name');
            //如果隐藏，跳过
            if (field.get('IsHide') == true) {

            
                return ;
            }

        //下拉框
        if (type == 'ComboBox') {


            var re = {
                xtype: 'mkcombobox',
                mkfield: field,

            };
            


        }
            //下拉框选择名字
        else if (type == 'ComboBoxByName') {

            var re = {
                xtype: 'mkcombobox',
                mkfield: field,
                isName:true,
            };

        }
            //弹出框
        else if (type == 'Search') {
            var re = mkviewutil.getSelectDialog(col);
        }
            //顺序多选框
        else if (type == 'MKOrderField') {
            var re = {
                xtype: 'mkorderfield',
                mkfield: field,
              
            };
        }
            //图标框
        else if (type == 'IconSelect') {
             re = {
                xtype: 'mkiconselect',
                mkfield: field,

            };
        }
            //字体框
        else if (type == 'FontSelect') {
            re = {
                xtype: 'mkfontselect',
                mkfield: field,

            };
        }

        //密码组件
        else if (type == 'Password') {

            re = {
                xtype: 'textfield',
                inputType: 'password',
            };

        }
            //整型
        else if (type == 'Int') {
            re.xtype = 'numberfield';
            if (EditModel != "Edit") {
                if (col.get('ValueMax') != 0 && IsReadOnly == false)
                    re.maxValue = col.get('ValueMax');
                if (col.get('ValueMin') != 0 && IsReadOnly == false)
                    re.minValue = col.get('ValueMin');
            }
            re.allowDecimals = false;
        }
            //付点
        else if (type == 'Decimal') {
            if (EditModel != "Edit") {
                if (col.get('ValueMax') != 0 && IsReadOnly == false)
                    re.maxValue = col.get('ValueMax');
                if (col.get('ValueMin') != 0 && IsReadOnly == false)
                    re.minValue = col.get('ValueMin');
            }
            re.allowDecimals = true;
            re.xtype = 'numberfield';
        }
            //时间
        else if (type == 'DateTime') {
            re.xtype = 'datefield';
            var format = col.get("Vformat");
           
            if (format == null || format.length==0) {
                format = DefaultShortDateFormat;
            }
            re.submitFormat = DefaultLongDateFormat,
            re.format = format;//'Y-m-d';
        }
            //备注
        else if (type == 'Remark') {
            re.xtype = 'textareafield';

        }
            //复选
        else if (type == 'CheckBox') {

            if (ifFind == 'Manager') {

                re = mkviewutil.getCheckedCombo(col);
            }
            else {
                re.xtype = 'checkboxfield';
                re.inputValue = true;
                re.uncheckedValue = false;
            }
        }
            //单选
        else if (type == 'Radio') {
            re.xtype = 'radiofield';
        }
            //多选树
        else if (type == 'MultiTree') {

            re.xtype = 'hiddenfield';
        }
            //隐藏
        else if (type == 'Hidden') {

            re.xtype = 'hiddenfield';
        }
        //文本
        else {
            re = {
                xtype: 'textfield',
            };

        }

        re.fieldLabel = field.get('Description');
        re.labelAlign = "right";
        //值改变事件，执行模型脚本
        re.listeners = {
            change: {

                fn: function (field, newValue, oldValue, eOpts) {
                    var col = this.mkfield.get("Column");
                    var script = col.get('ValueChangeScript');
                    var form = this.up("mkeditpanel");
                   
                    form.fireEvent('mkfieldchange', form, field, newValue, oldValue, eOpts);
                    if (script != null && script.length > 0) {

                         eval(script);
                      
                    }
                }
            },


        };
        if (EditModel != "Edit") {
            if (ifFind == 'Edit') {
                //必填
                if ((col.get("IsMandatory") || field.get('IsMandatory')) && IsReadOnly == false) {
                    re.allowBlank = false;
                    re.afterLabelTextTpl = required;
                }
                if (IsReadOnly == true) {
                    re.readOnly = true;

                }
                if (col.get("FieldLength") > 0 && IsReadOnly == false) {
                    re.maxLength = col.get("FieldLength");
                }
                re.mkautoSelect = true;
            }
        }
     
        re.name = name;
   


        re.mkfield = field;
     
        if (type != 'CheckBox' || ifFind == 'Manager')
            re.labelWidth = field.get('LabelWidth');
        //柔度设置
        if (field.get('Flex') > 0) {
            re.flex = field.get('Flex');
        }

        if (layout == "box") {
         //   re.width = 100;

            //if (ifFind == '101') {
            //宽度设置
            if (field.get('Width') <= 0) {
                if (type != 'CheckBox' || ifFind == 'Manager')
                //    re.width = 100;
                //else
                    re.width = 150;
            }
            else {
                if (type != 'CheckBox' || ifFind == 'Manager')
                re.width = field.get('Width');
            }

        }
        re.padding = this.fieldPading;
        //多选树组件
        if (type == 'MultiTree') {
            var cons = [];
            var url = rooturl + '?request=System.Model.ComboBox&&requestaction=getvalues&&comboxid=' + col.get('ComboxID');


        
            var displayFields = col.get('ComboxColumnNames');
            var displayFieldarray = displayFields.split(',');
            var firstdisplayField = displayFieldarray[0];
        

            var model = buildEntityTreeModel('mk', displayFields)
            var store = MK.TreeManager.createTreeStore(url, model);
            console.log(firstdisplayField);
            var add = {
                xtype: 'mktree',
                store: store,
                height: 300,
                mktext: field.get('Description'),
                mkfield:field,
                mkdataIndex: firstdisplayField,
                width:600,//flex: 1,
                columns: [
                    { xtype: 'treecolumn', text: field.get('Description'), head: '',  flex: 1 }
                ],
                dockedItems: [],
            };
            cons.push(add);
            cons.push(re);
            return cons;

        }
            //弹出框
        else if (type == 'Search') {
            var cons = [];
            
            var hidee = { xtype: 'hiddenfield', name: re.name };
            re.name = re.name + "Name";
            cons.push(hidee);
            cons.push(re);
            console.log(cons);
            return cons;
        }
     
        return re;

    },
    //建立分组框
    createFieldset: function (mytitle, mycols, EditModel) {
        re = {
            xtype: 'fieldset',
            title: mytitle,
            defaultType: 'textfield',

            layout: {
                type: 'table',

                columns: mycols
            },

            items: [],
        }
        if (EditModel == "Edit")
            //拖动组件
            re.plugins = [Ext.create('Mocoolka.ux.MKFieldZone')];
        return re;
    },

    createboxFieldset: function (mytitle, EditModel) {

        re = {
            xtype: 'fieldset',
          
            defaultType: 'textfield',
            collapsible: this.fieldsetCollapsible,
            border: this.isBorder,
            layout: 'anchor',

            margin: this.fieldsetMargin,
            padding: this.fieldsetPading,
         
            defaults: {
                anchor: '100%'
            },

            items: [],


        };
        if (EditModel == "Edit") {
            re.plugins = [Ext.create('Mocoolka.ux.MKFieldZone')];
            re.listeners = {
                afterrender: function (form) {
                    var cfg = {
                        shadow: false,
                        completeOnEnter: true,
                        cancelOnEsc: true,
                        updateEl: true,
                        ignoreNoChange: true
                    }, height = 80;

                    var labelEditor = Ext.create('Ext.Editor', Ext.apply({
                        autoSize: {
                            width: 'field'
                        },
                        height: height,
                        offsets: [0, (Ext.isIEQuirks ? 0 : 2)],
                        alignment: 'l-l',
                        fieldset: this,
                        listeners: {

                            beforecomplete: function (ed, value) {
                          
                                if (value.charAt(value.length - 1) != ':') {
                                    ed.setValue(ed.getValue() + ':');
                                }

                         
                                var form = ed.fieldset.up("mkeditpanel");

                                if (form.selectcontrol) {
                                    form.selectcontrol.mkfield.set('Description', ed.getValue().substring(0, ed.getValue().length - 1));
                                    form.selectcontrol.mkfield.commit();
                                    form.fireEvent('update', form.selectcontrol.mkfield);
                                }

                                return true;
                            }
                        },
                        field: {
                            width: 80,
                            name: 'labelfield',
                            allowBlank: false,
                            xtype: 'textfield',
                            selectOnFocus: true,

                            maxLength: 20,
                            enforceMaxLength: true
                        }
                    }, cfg));
                    var textEditor = Ext.create('Ext.Editor', Ext.apply({
                        autoSize: {
                            width: 'field'
                        },
                        height: height,
                        offsets: [0, (Ext.isIEQuirks ? 0 : 2)],
                        alignment: 'l-l',
                        listeners: {

                            beforecomplete: function (ed, value) {

                                if (value.charAt(value.length - 1) != ':') {
                                    ed.setValue(ed.getValue() + ':');
                                }

                                var con = me.down("#" + this.Items[0].id);

                               
                                var form = con.up("mkeditpanel");

                                if (form.selectcontrol) {
                                    form.selectcontrol.mkfield.set('Description', ed.getValue());
                                    form.selectcontrol.mkfield.commit();
                                    form.fireEvent('update', form.selectcontrol.mkfield);
                                }

                                return true;
                            }
                        },
                        field: {
                            width: 80,
                            name: 'labelfield',
                            allowBlank: false,
                            xtype: 'sliderfield',
                            value: 50,
                            selectOnFocus: true,

                            maxLength: 20,
                            enforceMaxLength: true
                        }
                    }, cfg));
                    form.body.on('dblclick', function (e, t) {


                        labelEditor.startEdit(t);

                        console.log('dblclick');
                       
                        labelEditor.field.focus(50, true);

                    }, null, [{
                        delegate: 'label.x-form-item-label'
                    },
                    ]);


                }
            };
        }
        if (this.isBorder)
            re.title = mytitle;
        return re;
    },
    //建立容器
    createboxcontainer: function () {

        return {
            xtype: 'container',
            margin: this.containerMargin,

            padding: this.containerPading,
            layout: 'hbox',
            combineErrors: true,
            items: []
        }
    },
    //组件毁坏
    onDestroy: function () {
        var me = this;
        if (me.beginrefresh) {
            Ext.destroy(me.beginrefresh);
        }
    }
});