extjs后自己写了一些见不得人的脚本

<html>
<head>
    <title>
        配置管理器
    </title>
    <style type="text/css">
        html, body {
            font-family: Arial;
            font-size: 14px;
        }

        .fieldlabel {
            float: left;
        }

        .fieldtext {
            float: left;
        }

        .combobox {
            float: left;
        }

            .combobox.picker {
                position: relative;
                width: 100%;
                height: 0px;
            }

                .combobox.picker .option {
                    height: 24px;
                    border: 1px solid #ddd;
                    line-height: 24px;
                    text-indent: 10px;
                    text-align: left;
                    width: 100%;
                    cursor: pointer;
                    background-color: #efd;
                }

                    .combobox.picker .option:hover {
                        background-color: #ff0;
                    }

                    .combobox.picker .option.select {
                        background-color: #ff0;
                    }

        .combotext {
            float: left;
        }

        .grid {
            width: 100%;
            float: left;
        }

            .grid table {
                width: 100%;
            }

            .grid thead tr {
                background-color: #3fc;
                color: #fff;
                font-weight: bold;
            }

            .grid tbody tr {
                cursor: pointer;
            }

                .grid tbody tr:hover {
                    background-color: #ff0;
                }

                .grid tbody tr.select {
                    background-color: #ff0;
                }

        .container {
            position: relative;
        }

            .container .left {
                position: relative;
                left: 0px;
            }

            .container .top {
                position: relative;
                top: 0px;
            }

            .container .right {
                position: relative;
                right: 0px;
            }

            .container .bottom {
                position: relative;
                bottom: 0px;
            }

            .container .center {
                position: relative;
            }
    </style>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        var layer = null;

        var Wiu = {
            define: function (name, obj) {
                var win = window;
                var names = name.split('.');
                names.forEach(function (name, index) {
                    if (index + 1 == names.length) win = win[name] = obj || win[name] || {};
                    else win = win[name] = win[name] || {};
                })
            },
            getObj: function (name) {
                var win = window;
                name && name.split('.').forEach(function (name) {
                    win = win[name];
                });
                return win;
            },
            apply: function (obj, com) {
                for (var i in com) {
                    obj[i] = com[i];
                }
                return obj;
            },
            create: function (name, vm) {
                var obj = Wiu.getObj(name);
                Wiu.apply(obj, vm);
                var event = Wiu.getObj(obj.extend);
                return new event(obj);
            },
            Ajax: {
                request: function (obj) {
                    $.ajax({
                        url: obj.api,
                        type: obj.type || 'post',
                        dataType: 'json',
                        data: obj.params,
                        async: obj.async || true,
                        success: function (result) {
                            if (result.IsSuccess) {
                                obj.success(result);
                            }
                            else if (result.ErrCode == '1001') {
                                alert('login');
                            }
                            else {
                                alert(result.ErrMsg);
                            }
                        }
                    });
                }
            },
            Array: {
                removeAt: function (array, index) {
                    return array.slice(0, index).concat(array.slice(index + 1, array.length));
                },
                remove: function (array, item) {
                    return array.filter(function (arr) { return arr != item; });
                },
                select: function (array, fn) {
                    var result = [];
                    array.forEach(function (arr) {
                        result.push(fn(arr));
                    });
                    return result;
                },
                find: function (array, fn) {
                    for (var i = 0; i < array.length; i++)
                        if (fn(array[i]))
                            return array[i];
                }
            },
            Data: {
                _modelid: 1,
                _storeid: 1,
                _viewmodelid: 1,
                Model: function (obj) {
                    var data = obj;
                    var model = {
                        data: obj,
                        dirty: false,
                        id: 'wiu_model_' + (Wiu.Data._modelid++),
                        changeStatus: function () {
                            this.dirty = this.data != data;
                        },
                        change: function (data) {
                            this.data = data;
                            this.changeStatus();
                            this.onchange();
                        },
                        get: function (field) {
                            return this.data[field];
                        },
                        set: function (field, value) {
                            this.data[field] = value;
                            this.changeStatus();
                            this.onchange();
                        },
                        reset: function () {
                            this.change(data);
                        },
                        onchange: function () { }
                    };
                    return model;
                },
                Proxy: function (obj) {
                    return Wiu.apply({
                        page: 1,
                        size: 10,
                        outParams: {},
                        recordCount: 0
                    }, obj);
                },
                Store: function (obj) {
                    var me = this,
                        loadModel = function (item) { return new Wiu.Data.Model(item); }

                    var store = {
                        id: 'store_' + (Wiu.Data._storeid++),
                        items: [],
                        ispage: obj.ispage === true,
                        updateRecords: [],
                        add: function (item) {
                            var me = this;
                            if (item instanceof Wiu.Data.Model) {
                                me.updateRecords.push({ type: 'create', data: item });
                                me.items.push(item);
                            } else {
                                me.items.concat(item);
                                item.forEach(function (item) {
                                    me.updateRecords.push({ type: 'create', data: item });
                                });
                            }
                            me.datachange();
                        },
                        complete: function () {

                        },
                        datachange: function () {

                        },
                        proxy: obj.proxy ? Wiu.Data.Proxy(obj.proxy) : null,
                        load: function (params) {
                            var me = this;
                            if (!me.proxy) return me.complete();
                            Wiu.apply(me.proxy,
                                Wiu.apply({ params: params },
                                Wiu.apply(me.proxy.outParams,
                                me.ispage ? {} : { page: me.proxy.page, size: me.proxy.size })));
                            Wiu.Ajax.request(me.proxy);
                        },
                        loadPage: function (page, params) {
                            this.proxy.page = page;
                            this.load(params);
                        },
                        modify: function (model) {
                            var me = this;
                            for (var i in me.items) {
                                if (com.id === me.items[i].id) {
                                    com.change(item.data);
                                    me.datachange();
                                    return;
                                }
                            }
                        },
                        getdata: function () {
                            var me = this;
                            return me.items.filter(function (item) {
                                var res = true;
                                me.filters.forEach(function (filter) {
                                    res = res && filter(item);
                                })
                                return res;
                            })
                        },
                        remove: function (item) {
                            Wiu.Array.remove(this.items, item);
                            this.datachange();
                        },
                        removeAt: function (index) {
                            Wiu.Array.removeAt(this.items, index);
                            this.datachange();
                        },
                        filters: [],
                        filter: function (fn) {
                            this.filters.push(fn);
                            this.datachange();
                        },
                        clearfilter: function () {
                            this.filters = [];
                            this.datachange();
                        },
                        removeByFn: function (fn) {
                            this.items = this.items.filter(fn);
                            this.datachange();
                        },
                        status: 'init',
                        success: function (result) {
                            var me = this;
                            me.items = Wiu.Array.select(result, loadModel);
                            me.datachange();
                            me.status = 'complete';
                            me.complete();
                        }
                    };
                    if (obj.proxy) store.proxy.success = function (result) {
                        var me = this;
                        me.recordCount = result.RowCount || result.Result.length;
                        store.success(result.Result);
                    }
                    else store.items = Wiu.Array.select(obj.items, loadModel);
                    return store;
                },
                ViewModel: function (obj) {
                    var vm = {
                        id: 'wiu_viewmodel_' + (Wiu.Data._viewmodelid++),
                        change: {},
                        data: {},
                        event: {},
                        stores: {},
                        bind: function (field, value) {
                            this.data[field] = value;
                        },
                        get: function (field) {
                            return this.data[field];
                        },
                        getStore: function (name) {
                            return this.stores[name];
                        },
                        set: function (field, value) {
                            this.data[field] = value;
                            this.change[field] && this.change[field](value);
                        }
                    }
                    Wiu.apply(vm, obj);

                    return vm;
                }
            },
            ComponentManager: {
                id: 1,
                data: [],
                register: function (obj) {
                    obj.id = 'component_' + Wiu.ComponentManager.id++;
                    obj.el.attr('id', obj.id);
                    this.data.push(obj);
                },
                getCmp: function (id) {
                    return Wiu.Array.find(this.data, function (item) {
                        return item.id === id;
                    });
                }
            },
            Component: {
                event: {
                    getBind: function (field, obj) {
                        return obj.component.bind && obj.component.bind[field] ?
                            obj.viewmodel.get(obj.component.bind[field]) : obj.component[field];
                    },
                    setBind: function (obj) {
                        var me = this;
                        return;
                        if (!obj.component.bind) return;
                        for (var i in obj.component.bind) {
                            switch (i) {
                                case 'text':
                                    me.bindFieldLabel(obj.el, obj.component, obj.viewmodel);
                                    break;
                                case 'value':
                                    me.bindTextValue(obj.el, obj.component, obj.viewmodel);
                                    break;
                            }
                        }
                    },
                    bindTextValue: function (dom, obj, vm) {
                        var input = dom.find('input');
                        input.change(function () {
                            vm.set(obj.bind.value, $(this).val());
                        });
                        vm.change[obj.bind.value] = function (val) {
                            input.val(val);
                        };
                    },
                    bindFieldLabel: function (dom, obj, vm) {
                        var text = dom.find('.fieldlabel');
                        vm.change[obj.bind.text] = function (val) {
                            text.html(val + '：');
                        }
                    },
                    getStyle: function (obj) {
                        var style = '';
                        for (var i in obj.style) {
                            style += i + ':' + obj.style[i] + ';';
                        }
                        return style;
                    },
                    getStore: function (obj) {
                        return obj.store ?
                            typeof obj.store == 'string' ?
                            Wiu.create(obj.store) : obj.store :
                            (typeof obj.viewmodel == 'string' ? Wiu.create(obj.viewmodel) : obj.viewmodel).getStore(obj.bind.store)
                    },
                    getViewModel: function (obj) {
                        return typeof obj.viewmodel == 'string' ? Wiu.create(obj.viewmodel) : obj.viewmodel;
                    }
                },
                bar: function (obj) {
                    var me = this,
                        event = Wiu.Component.event,
                        vm = event.getViewModel(obj),
                        bar = $('<div class="toolbar" style="' + event.getStyle(obj) + '"></div>')

                    obj.items.forEach(function (item) {
                        item.viewmodel = vm;
                        Wiu.Component.create(item).render(bar);
                    });
                    me.component = obj;
                    me.el = bar;
                    me.render = function (obj) {
                        bar.appendTo(obj);
                    }
                    return me;
                },
                button: function (obj) {
                    var me = this,
                        event = Wiu.Component.event,
                        vm = event.getViewModel(obj),
                        button = {
                            xtype: 'button',
                            viewmodel: vm,
                            component: obj,
                            getView: function () {
                                return this.component;
                            },
                            getViewModel: function () {
                                return this.viewmodel;
                            },
                            render: function (obj) {
                                this.el.appendTo(obj);
                            }
                        },
                        temp = '<div class="button" style="' + event.getStyle(obj) + '">' + event.getBind('value', button, vm) + '</div>';

                    button.el = $(temp);
                    me.render = function (obj) {
                        me.el.appendTo(obj);
                    }
                    button.el.click(function (oEvent) {
                        var e = oEvent || window.event;
                        vm.event[obj.handler](e.srcElement, vm);
                    });
                    Wiu.ComponentManager.register(button);
                    Wiu.apply(me, button);
                    return me;
                },
                combobox: function (obj) {
                    var event = Wiu.Component.event;
                    var combobox = {
                        xtype: 'combobox',
                        text: [],
                        value: [],
                        viewmodel: event.getViewModel(obj),
                        component: obj,
                        el: null,
                        clear: function () {
                            me.value = [];
                            me.text = [];
                            input.val('');
                        },
                        status:false,
                        store: event.getStore(obj),
                        deselect: function (item) {
                            var items = item.slice ? item : [item];
                            this.el.find('.option').each(function (index, el) {
                                if (el.hasClass('select') &&
                                    Wiu.Array.find(items, function (item) { return item.id === el.attr('id'); }) != null) {
                                    el.click();
                                }
                            });
                        },
                        init: function () {
                            var me = this,
                                temp = '<div class="combobox"><div class="fieldlabel">' + event.getBind('text', combobox) + '：</div><div class="combotext"><input type="text" ><div class="combobox picker hidden"></div></div></div>';
                            me.el = $(temp);
                            me.store.complete = function () {
                                me.createPicker(this.items);
                            };
                            me.el.find('input').focus(function () {
                                if (me.status) return;
                                me.store.load();
                                layer = me.el.find('.picker');
                                layer.removeClass('hidden');
                                me.status = true;
                            });
                        },
                        select: function (item) {
                            var me = this;
                            var items = item.slice ? item : [item];
                            me.el.find('.option').each(function (index, el) {
                                if (!el.hasClass('select') &&
                                    Wiu.Array.find(items, function (item) { return item.id === el.attr('id'); }) != null) {
                                    el.click();
                                }
                            })
                        },
                        createPicker: function (items) {
                            var me = this, input = me.el.find('input'), picker = me.el.find('.picker');
                            picker.html('');
                            items.forEach(function (item) {
                                var option = $('<div id="' + item.id + '" class="combobox option" >' + item.get(obj.fieldText) + '</div>');
                                option.click(function () {
                                    var el = $(this),
                                        val = item.get(obj.fieldValue),
                                        index = me.value.indexOf(val);

                                    if (index < 0) {
                                        me.value.push(val);
                                        me.text.push(item.get(obj.fieldText));
                                        el.addClass('select');
                                    }
                                    else {
                                        me.value = Wiu.Array.removeAt(me.value, index);
                                        me.text = Wiu.Array.removeAt(me.text, index);
                                        el.removeClass('select');
                                    }
                                    input.val(me.text.join(','));
                                });
                                picker.append(option);
                            });
                        },
                        render: function (obj) {
                            this.el.appendTo(obj);
                        }
                    }
                    combobox.init();
                    event.setBind(combobox);
                    Wiu.ComponentManager.register(combobox);
                    Wiu.apply(this, combobox);
                    return this;
                },
                container: function (obj) {
                    var me = this,
                        event = Wiu.Component.event,
                        vm = event.getViewModel(obj),
                        temp = '<div class="container" style="' + event.getStyle(obj) + '"></div>';

                    var container = $(temp);
                    obj.items.forEach(function (item) {
                        item.viewmodel = vm;
                        var com = Wiu.Component.create(item);
                        com.el.addClass(item.region);
                        com.render(container);
                    });
                    event.setBind(container, obj, vm);
                    me.component = obj;
                    em.el = container;
                    return me;
                },
                create: function (obj) {
                    var me = this;
                    switch (obj.xtype) {
                        case 'label':
                            return me.label(obj);
                        case 'combobox':
                            return me.combobox(obj);
                        case 'button':
                            return me.button(obj);
                        case 'textfield':
                            return me.textfield(obj);
                        case 'grid':
                            return me.grid(obj);
                    }
                },
                form: function (obj) {
                    var me = this,
                        event = Wiu.Component.event,
                        vm = event.getViewModel(obj),
                        temp = '<div class="form" style="' + event.getStyle(obj) + '"><table><tbody></tbody></table></div>';

                    var form = $(temp),
                        tbody = form.find('tbody'),
                        row = $('<tr></tr>'),
                        i = 0, j = 0;
                    for (; i < obj.items.length; i++, j += obj.items[i].colspan || 1) {
                        var cell = $('<td colspan=' + (obj.items[i].colspan || 1) + '></td>');
                        obj.items[i].viewmodel = vm;
                        var com = Wiu.Component.create(obj.items[i]);
                        com.render(cell);
                        cell.appendTo(row);
                        if (obj.cols && j > obj.cols) {
                            j = 0;
                            tbody.append(row);
                            row = $('<tr></tr>');
                        }
                    }
                    if (j > 0) {
                        obj.cols && row.append($('<td colspan=' + (obj.cols - j) + '></td>'));
                        tbody.append(row);
                    }
                    me.component = obj;
                    if (obj.buttons) {
                        Wiu.Component.bar({ items: obj.buttons, viewmodel: vm }).render(form);
                    }
                    me.render = function (obj) {
                        form.appendTo(obj);
                    }
                    me.el = form;
                    return me;
                },
                grid: function (obj) {
                    var me = this,
                        event = Wiu.Component.event,
                        vm = event.getViewModel(obj),
                        temp = '<div class="grid" style="' + event.getStyle(obj) + '"></div>',
                        store = event.getStore(obj, vm);

                    var container = $(temp),
                        grid = $('<table><thead><tr>'
                        + Wiu.Array.select(obj.columns, function (col) { return '<th style="' + event.getStyle(col) + '">' + col.text + '</th>'; }).join('')
                        + '</tr></thead><tbody></tbody></table>');
                    if (obj.tbar) {
                        Wiu.Component.bar({ items: obj.tbar, viewmodel: vm }).render(container);
                    }
                    grid.appendTo(container);
                    me.store = store;
                    me.initData = function (items) {
                        var tbody = grid.find('tbody');
                        tbody.find('tr').remove();
                        items.forEach(function (item) {
                            var row = $('<tr>' + Wiu.Array.select(obj.columns, function (col) {
                                return '<td style="' + event.getStyle(col) + '"><div bind="' + col.bind + '" >' + item.get(col.bind) + '</div></td>';
                            }).join('') + '</tr>');
                            item.onchange = function (field, value) {
                                row.find('div[bind="' + field + '"]').html(value);
                            };
                            tbody.append(row);
                            row.click(function () {
                                var el = $(this);
                                me.select(el, item);
                            });
                        });
                    };
                    me.selection = [];
                    var bindSelect = obj.bind['selection'] || false;
                    me.select = function (el, item) {
                        if (el.hasClass('select')) {
                            me.selection = Wiu.Array.remove(me.selection, item);
                            el.removeClass('select');
                        } else {
                            me.selection.push(item);
                            el.addClass('select');
                        }
                        bindSelect && vm.set(bindSelect, me.selection);
                    }
                    event.setBind(obj);
                    store.complete = function () {
                        me.initData(store.getdata());
                    };
                    me.component = obj;
                    me.el = container;
                    me.viewmodel = vm;
                    if (obj.page) {
                        me.pagebar(me, store);
                    }
                    if (obj.bbar) {
                        Wiu.Component.bar({ items: obj.bbar, viewmodel: vm }).render(container);
                    }
                    me.render = function (obj) {
                        container.appendTo(obj);
                    }
                    store.load();
                    return me;
                },
                label: function (obj) {
                    var event = Wiu.Component.event;
                    var label = {
                        xtype: 'label',
                        component: obj,
                        viewmodel: event.getViewModel(obj),
                        el: null,
                        render: function (obj) {
                            this.el.appendTo(obj);
                        }
                    };
                    var temp = '<div class="label" style="' + event.getStyle(obj) + '">' + event.getBind('text', label) + '</div>';
                    label.el = $(temp)
                    event.setBind(label);
                    Wiu.ComponentManager.register(label);
                    Wiu.apply(this, label);
                    return this;
                },
                markstar: function (obj) {
                    var me = this,
                        remark = obj.remark || 1,
                        imgOn = '<img src="~/Images/star-on.png" />',
                        imgOff = '<img src="~/Images/star-off.png" />',
                        getStarHtml = function (remark) {
                            var html = '';
                            for (var i = 0; i < obj.changed ? 5 : remark; i++) { html += remark > i ? imgOn : imgOff; }
                            return html;
                        },
                        html = '<div style="width:100%;float:left;margin-top:5px;"><label style="float:left; font-size:13px;">' + title + ':</label><div style="float:left;">' + getStarHtml(remark)
                            + '</div></div><br/>',
                        markstar = $(html);

                    markstar.appendTo(container);
                    if (!obj.changed) return;
                    var imgs = markstar.find('img');
                    imgs.mouseover(function (obj) {
                        var mark = false;
                        imgs.each(function (index, el) {
                            el.src = mark ? imgOff : imgOn;
                            mark = mark || el == obj.target;
                        });
                    })

                    imgs.mouseout(function (obj) {
                        imgs.each(function (index, el) {
                            el.src = index < remark ? imgOn : imgOff;
                        });
                    })

                    imgs.click(function (obj) {
                        imgs.each(function (index, el) {
                            if (el == obj.target) {
                                remark = index + 1;
                                obj.fn && obj.fn(remark);
                            }
                        })
                    })
                    me.render = function (obj) {
                        markstar.appendTo(obj);
                    }
                    me.component = obj;
                    me.el = markstar;
                },
                pagebar: function (grid) {
                    var me = this,
                        store = grid.store,
                        proxy = store.proxy || { page: 1, size: 10, recordCount: 0 };

                    var plugin = {
                        sizeconfigs: [10, 20, 50, 100, 1000],
                        tpl: '<div class="pagebar"><div>每页</div><div><select>{size}</select></div><div>条</div><div class="split"></div><div class="handler" action="first">《</div><div class="handler" action="last"><</div><div class="split"></div><div>第</div><div><input type="text" action="page" value="{page}" /></div><div>页</div><div>共{pageCount}页</div><div class="split"></div><div class="handler" action="next">></div><div class="handler" action="end">》</div><div class="split"></div><div class="count"><div class="record">显示{recordStart}-{recordEnd}</div><div show="count">共{recordCount}条</div></div></div>',
                        page: proxy.page,
                        size: proxy.size,
                        pageCount: 1,
                        recordCount: 0,
                        recordStart: 0,
                        recordEnd: 0,

                        view: grid.el,

                        countPageRange: function () {
                            var me = this;
                            me.pageCount = Math.ceil(me.recordCount / me.size);
                            var recordEnd = me.page * me.size;
                            me.recordStart = recordEnd > 0 ? recordEnd - me.size + 1 : 0;
                            me.recordEnd = recordEnd < me.recordCount ? recordEnd : me.recordCount;
                        },

                        createPageBar: function () {
                            var me = this,
                                tpl = me.tpl;

                            me.countPageRange();

                            //grid.el.find('.pagebar').remove();

                            var option = '';
                            me.sizeconfigs.forEach(function (item) {
                                option += '<option ' + (me.size == item ? 'selected' : '') + ' value="' + item + '">' + item + '</option>';
                            });
                            tpl = tpl.replace('{size}', option);
                            tpl = tpl.replace('{page}', me.page);
                            tpl = tpl.replace('{pageCount}', me.pageCount);
                            tpl = tpl.replace('{recordStart}', me.recordStart);
                            tpl = tpl.replace('{recordEnd}', me.recordEnd);
                            tpl = tpl.replace('{recordCount}', me.recordCount);
                            var bar = $(tpl);
                            bar.find('.handler').click(function () {
                                var action = $(this).attr('action');
                                var nowPage = me.page;
                                if (action == 'first') {
                                    me.page = 1;
                                } else if (action == 'last') {
                                    me.page = me.page - 1 || 1;
                                } else if (action == 'next') {
                                    me.page = me.page < me.pageCount ? me.page + 1 : me.page;
                                } else {
                                    me.page = me.pageCount;
                                }
                                if (nowPage != me.page) {
                                    me.init();
                                }
                            });
                            bar.find('input').change(function () {
                                var el = $(this),
                                    value = el.val();

                                me.page = value;
                                me.init();
                            });
                            bar.find('select').change(function () {
                                var el = $(this),
                                    value = el.val();

                                me.size = value;
                                me.init();
                            });
                            var oldBar = me.view.find('.pagebar');
                            if (oldBar.length > 0) {
                                me.view[0].replaceChild(bar[0], oldBar[0]);
                            } else {
                                me.view.append(bar);
                            }
                        },

                        init: function () {
                            proxy.page = me.page;
                            proxy.size = me.size;
                            store.load();
                        }
                    };
                    Wiu.apply(plugin, proxy);
                    store.complete = function () {
                        plugin.recordCount = proxy.recordCount;
                        plugin.createPageBar();
                        if (store.proxy) {
                            grid.initData(store.items);
                        } else {
                            grid.initData(store.items.slice(plugin.recordStart, plugin.recordEnd));
                        }
                    }
                    plugin.createPageBar();
                },
                textfield: function (obj) {
                    var me = this,
                        event = Wiu.Component.event,
                        textfield = {
                            xtype: 'textfield',
                            viewmodel: event.getViewModel(obj),
                            component: obj,
                            el: null,
                            getView: function () {
                                return this.component;
                            },
                            getViewModel: function () {
                                return this.viewmodel;
                            },
                            render: function (obj) {
                                this.el.appendTo(obj);
                            }
                        };

                    var temp = '<div class="textfield" style="' + event.getStyle(textfield.component) + '"><div class="fieldlabel">' + event.getBind('text', textfield) + '：</div><div class="fieldtext"><input type="text" value="' + event.getBind('value', textfield) + '"></input></div></div>';
                    textfield.el = $(temp);
                    event.setBind(textfield);
                    if (obj.bind) {
                        if (obj.bind.value) {
                            var input = textfield.el.find('input');
                            input.change(function () {
                                textfield.viewmodel.bind(obj.bind.value, $(this).val());
                            });
                            textfield.viewmodel.change[obj.bind.value] = function (val) {
                                input.val(val);
                            };
                        }
                        if (obj.bind.text) {
                            var text = textfield.el.find('fieldlabel');
                            textfield.viewmodel.change[obj.bind.text] = function (val) {
                                text.html(val + '：');
                            };
                        }
                    }
                    Wiu.ComponentManager.register(textfield);
                    Wiu.apply(this, textfield);
                    return this;
                },
                window: function (obj) {
                    var me = this,
                        event = Wiu.Component.event,
                        vm = event.getViewModel(obj),
                        temp = '<div class="window" style="' + event.getStyle(obj) + '"><div class="window_title">'
                        + event.getBind('title', obj) + '</div></div>';

                    var container = $(temp);
                    obj.items.forEach(function (item) {
                        var com = Wiu.Component.create(item, vm);
                        com.el.addClass(item.region);
                        com.render(container);
                    });
                    event.setBind(container, obj, vm);
                    me.component = obj;
                    me.el = container;
                    me.show = function () {
                        me.el.css({ 'display': 'block' })
                    }
                    me.close = function () {
                        me.el.css({ 'display': 'none' })
                    }
                    return me;
                }
            }
        };
        Wiu.define('Web.Store.QueryList', {
            extend: 'Wiu.Data.Store',
            proxy: {
                api: '/Config/getquerylist'
            }
        });
        Wiu.define('Web.Store.Combo', {
            extend: 'Wiu.Data.Store',
            items: [
                { text: 'a', value: 1 },
                { text: 'b', value: 2 },
                { text: 'c', value: 3 },
                { text: 'd', value: 4 }
            ]
        });
        Wiu.define('Web.ViewModel.QueryList', {
            extend: 'Wiu.Data.ViewModel',
            data: {
                name: '测试',
                value: 'Hello World',
                text: '下拉框',
                selection: []
            },
            stores: {
                data: Wiu.create('Web.Store.Combo'),
                store: Wiu.create('Web.Store.QueryList')
            },
            event: {
                Add: function (el, vm) {
                    alert(vm.get('value'));
                },
                ConfigQuery: function (el) {

                },
                ConfigReport: function (el) {

                },
                ConfigOperation: function (el) {

                },
                Delete: function (el) {

                }
            }
        })
        window.onload = function () {
            $('body').click(function () {
                var e = window.event;
                if (layer && layer.find(e.target).length==0) {
                    layer.addClass('hidden');
                }
            })
            Wiu.Component.grid({
                tbar: [{
                    xtype: 'textfield',
                    bind: {
                        text: 'name',
                        value: 'value'
                    }
                }, {
                    xtype: 'combobox',
                    fieldText: 'text',
                    fieldValue: 'value',
                    bind: {
                        text: 'text',
                        store: 'data'
                    }
                }],
                columns: [
                    { text: '值', bind: 'Id' },
                    { text: '名称', bind: 'Name' },
                    { text: '位置', bind: 'Position' }
                ],
                viewmodel: 'Web.ViewModel.QueryList',
                page: true,
                bbar: [
                    { xtype: 'button', value: '新增', handler: 'Add' },
                    { xtype: 'button', value: '配置查询', handler: 'ConfigQuery' },
                    { xtype: 'button', value: '配置列表', handler: 'ConfigList' },
                    { xtype: 'button', value: '配置功能', handler: 'ConfigFunction' },
                    { xtype: 'button', value: '删除', handler: 'Delete' }
                ],
                bind: {
                    store: 'store'
                }
            }).render($('body'));
        }
    </script>

    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }

        .window {
            position: absolute;
            border: 1px solid #ccc;
            background-color: #fff;
        }

            .window .title {
                height: 30px;
                text-align: left;
                line-height: 30px;
                font-weight: bold;
                text-indent: 5px;
                background-color: #cbf;
                color: #fff;
            }

        .layer {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #edb;
            opacity: 0.4;
        }

        .hidden {
            display: none;
        }

        .close {
        }

        .frt {
            float: right;
        }
    </style>
    <link href="~/Content/page.css" rel="stylesheet" />
    <link href="~/Content/table.css" rel="stylesheet" />
    <link href="~/Content/component.css" rel="stylesheet" />
    <script src="~/layer/layer.min.js"></script>
</head>
<body>
</body>
</html>
完全没有继续下去的欲望
posted @ 2016-03-25 17:37 hezl 阅读(178) 评论(0) 收藏举报
刷新页面返回顶部
hezl

extjs后自己写了一些见不得人的脚本

公告
