view_assets 0.0.12 → 1.0.0

data/test/dummy/public/lib/javascripts/msg-min.js

@@ -0,0 +1 @@
+Ext.ns("Wando.msg");Wando.msg={msgCt:undefined,showInfo:function(d,c){if(!this.msgCt){this.msgCt=Ext.DomHelper.insertFirst(document.body,{id:"msg-div"},true)}var b=Ext.String.format.apply(String,Array.prototype.slice.call(arguments,1));var a=Ext.DomHelper.append(this.msgCt,this.createBox(d,b),true);a.hide();a.slideIn("t").ghost("t",{delay:1000,remove:true})},createBox:function createBox(a,b){return'<div class="msg"><h3>'+a+"</h3><p align=center>"+b+"</p></div>"},info:function(b,a){this.showInfo(b,a)},warning:function(d,c,b,a){this.alertMsg("warning",d,c,b,a)},error:function(d,c,b,a){this.alertMsg("error",d,c,b,a)},question:function(d,c,b,a){this.alertMsg("question",d,c,b,a)},confirm:function(d,c,b,a){this.alertMsg("confirm",d,c,b,a)},alertMsg:function(c,e,d,b,a){Ext.MessageBox.show({title:!e?this[c+"Title"]():e,msg:d,buttons:this.getButtons(c),icon:this[c+"Icon"](),fn:b,scope:a?a:window})},getButtons:function(a){return a==="confirm"?Ext.MessageBox.OKCANCEL:Ext.MessageBox.OK},confirmIcon:function(){return Ext.MessageBox.QUESTION},confirmTitle:function(){return"确认"},warningIcon:function(){return Ext.MessageBox.WARNING},warningTitle:function(){return"警告"},questionIcon:function(){return Ext.MessageBox.QUESTION},questionTitle:function(){return"确定"},errorIcon:function(){return Ext.MessageBox.ERROR},errorTitle:function(){return"错误"}};

data/test/dummy/public/lib/javascripts/msg.js

@@ -0,0 +1,179 @@
+/**
+ * @class Wando.msg
+ * @example
+ *       Wando.msg.info("提示","操作成功") 自定义title,自定义msg
+ *       Wando.msg.warning("警告","必须选中例子") 自定义title,自定义msg
+ *       Wando.msg.confirm(null,"是否确定",function(btn){ 
+ *          if(btn !== "ok") handler
+ *          else handler
+ *       })
+ *       Wando.msg.error("错误","提交错误，请检查！") 自定义title,自定义msg
+ *       Wando.msg.question("确定","确定要删除？") 自定义title,自定义msg
+ *
+ * @description
+ * 自定义Msg，类型有: "warning"、"error"、"question"、"info"、"confirm"
+ * 1.info类型只有2个参数title和msg,title为标题，一般都是"提示"，msg为提示的内容
+ * 2.其它类型有四个参数
+ * 3.第一个参数为标题,不填写时，必须以""传入,默认为type的标题,如warning = 警告
+ * 3.第二个参数为msg主要内容
+ * 4.第三个参数为回调函数
+ * 5.第四个参数为该范围内的作用域,默认为window
+ * 6.对于可以选择是否的提示框，统一使用confirm，info只供提示作用
+ */
+
+Ext.ns("Wando.msg")
+
+Wando.msg = {
+    /**
+     * @protected
+     */
+    msgCt:undefined,
+
+    /**
+     * @protected
+     * 信息提示
+     */
+    showInfo: function(title,msg){
+        if(!this.msgCt){
+            this.msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
+        }
+        var s = Ext.String.format.apply(String, Array.prototype.slice.call(arguments, 1));
+        var m = Ext.DomHelper.append(this.msgCt, this.createBox(title, s), true);
+        m.hide();
+        m.slideIn('t').ghost("t", { delay: 1000, remove: true});
+    },
+    
+    /**
+     * @protected
+     * 创建消息框，使info的信息居中
+     */
+    createBox: function createBox(t, s){
+        return '<div class="msg"><h3>' + t + '</h3><p align=center>' + s + '</p></div>';
+    },
+    
+    /**
+     * @method info
+     * 信息提示
+     */
+    info: function(title, msg){ 
+        this.showInfo(title, msg);
+    },
+
+    /**
+     * @method warning
+     * 警告提示
+     */
+    warning: function(title, msg, fn, scope){ 
+        this.alertMsg("warning", title, msg, fn, scope);
+    },
+
+    /**
+     * @method error
+     * 错误提示
+     */
+    error: function(title, msg, fn, scope){ 
+        this.alertMsg("error", title, msg, fn, scope);
+    },
+
+    /**
+     * @method question
+     *问题提示
+     */
+    question: function(title, msg, fn, scope){ 
+        this.alertMsg("question", title, msg, fn, scope);
+    },
+
+    /**
+     * @method confirm
+     * 确认提示
+     */
+    confirm: function(title, msg, fn, scope){ 
+        this.alertMsg("confirm", title, msg, fn, scope);
+    },
+
+    /**
+     * @protected
+     */
+    alertMsg: function(type, title, msg, fn, scope) {
+        Ext.MessageBox.show({ 
+            title: !title ? this[type + "Title"]() : title,
+            msg: msg,
+            buttons: this.getButtons(type),
+            icon: this[type + "Icon"](),
+            fn: fn,
+            scope: scope ? scope : window
+        });
+    },
+
+    /**
+     * @protected
+     *获取buttons,type ==="confirm",返回确定和取消,否则返回ok
+     */
+    getButtons: function(type) {
+        return type === "confirm" ? Ext.MessageBox.OKCANCEL : Ext.MessageBox.OK;
+    },
+    
+    /**
+     * @protected
+     * @return { confirmIcon }
+     */
+    confirmIcon: function(){ 
+        return Ext.MessageBox.QUESTION;
+    },
+
+    /**
+     * @protected
+     * @return { confirmTitle }
+     */
+    confirmTitle: function(){ 
+        return "确认";
+    },
+
+    /**
+     * @protected
+     * @return { warningIcon }
+     */
+    warningIcon: function() {
+        return Ext.MessageBox.WARNING;
+    },
+
+   /**
+    * @protected
+    * @return { warningTitle }
+    */
+    warningTitle: function() {
+        return "警告";
+    },
+
+    /**
+     * @protected
+     * @return { questionIcon }
+     */
+    questionIcon: function() {
+        return Ext.MessageBox.QUESTION;
+    },
+
+    /**
+     * @protected
+     * @return { questionTitle }
+     */
+    questionTitle: function() {
+        return "确定";
+    },
+
+    /**
+     * @protected
+     * @return { errorIcon }
+     */
+    errorIcon: function() {
+        return Ext.MessageBox.ERROR;
+    },
+
+    /**
+     * @protected
+     * @return { errorTitle }
+     */
+    errorTitle: function() {
+        return "错误";
+    }
+};

data/test/dummy/public/lib/javascripts/renderer-min.js

@@ -0,0 +1 @@
+Ext.ns("Wando.renderer");Wando.renderer={disable:function(b,a){a.attr="style='background-color: #e1e2e4'";return b},necessary:function(a){if(!a){return"<div style='color:RGB(255,0,0)'>*</div>"}else{return a}},displayComboValue:function(a){var b=Ext.getCmp(a);return function(d){var c=b.findRecord(b.valueField,d);return c?c.get(b.displayField):b.valueNotFoundText}},dateFormat:"Y-m-d",displayDate:function(a){return Ext.util.Format.date(a,Wando.renderer.dateFormat)},getDateFormat:function(){return Wando.renderer.dateFormat},showTipsForEaseLooking:function(d,c,b){if(Ext.isArray(d)&&d.length){var a="ext:qtip = '";d.forEach(function(e){a+=(e+", ")});a=a.slice(0,a.length-2);a+="'";c.attr=a}return d},empty:function(c,b,a){return Ext.isEmpty(c)?" -- ":c},rowSpanning:function(k,m,b,e,j,n){var g=n.fields.keys[b.json.indexOf(k)];var d=!e||k!==n.getAt(e-1).get(g),h=e>=n.getCount()-1||k!==n.getAt(e+1).get(g);m.css+="row-span"+(d?" row-span-first":"")+(h?" row-span-last":"");if(d){var c=e+1;while(c<n.getCount()&&k===n.getAt(c).get(g)){c++}var a=20,f=6,l=(a*(c-e)-f)+"px";m.attr='style="height:'+l+";line-height:"+l+';"'}return d?k:""}};

data/test/dummy/public/lib/javascripts/renderer.js

@@ -0,0 +1,115 @@
+/**
+ * @class  Wando.renderer 
+ * @description
+ *     用于自定义某些渲染的效果<br>
+ * 
+ * @example
+ *     <b>Grid的使用</b><br>
+ *         created_at: { renderer: Wando.renderer.disable },<br>
+ *         created_at: { renderer: Wando.renderer.displayDate },<br>
+ *     <b>其他使用方法一样</b><br>
+ **/
+Ext.ns("Wando.renderer")
+
+Wando.renderer = {
+    /**
+     * @description
+     *    渲染背景色为灰黑色，一般在不可编辑元素使用<br>
+     *    参数一般不用写
+     * @return   value 
+     */
+    disable: function(value, metaData) {
+        metaData.attr = "style='background-color: #e1e2e4'";
+        return value;
+    },
+
+    /**
+    * @description
+    *     渲染为红色，一般在某些重要元素使用,例如不能为空<br>
+    *     参数一般不用写
+    * @return   value 
+    */
+    necessary: function(value) {
+        if(!value) 
+            return "<div style='color:RGB(255,0,0)'>*</div>";
+        else 
+            return value;
+    },
+
+    /**
+     * @param string(combobox id, require)
+     * @return void
+     * @description
+     *     这个函数是用于解决combobox在grid中的渲染问题的,在renderer中传入
+     *     这个函数可避免这个问题
+     */
+    displayComboValue: function(comboId) { 
+        var combo = Ext.getCmp(comboId);
+        return function(value) {
+            var record = combo.findRecord(combo.valueField, value);
+            return record ? record.get(combo.displayField) : combo.valueNotFoundText;
+        };
+    },
+
+    dateFormat: "Y-m-d",
+    /**
+     * @description
+     *    date renderer configes
+     *    这里不能使用 format 函数，因为 value 可能是字符串
+     * @return   date 
+     */
+    displayDate: function(value) { 
+        return Ext.util.Format.date(value, Wando.renderer.dateFormat);
+    },
+    
+    getDateFormat: function() { 
+        return Wando.renderer.dateFormat;
+    },
+    
+    /**
+    * @description
+    *   For showing tips to display the value of a column
+    * @return    data
+    */
+    showTipsForEaseLooking: function(data, metadata, record) {
+        if(Ext.isArray(data) && data.length) {
+            var tips = "ext:qtip = '";
+            data.forEach(function(item) {
+                tips += (item + ", ");
+            });
+            tips = tips.slice(0, tips.length - 2);
+            tips += "'";
+            metadata.attr = tips;
+        }
+        return data;
+    },
+    
+    empty: function(data, metadata, record) {
+        return Ext.isEmpty(data) ? " -- " : data;
+    },
+    
+    /**
+    * @description
+    *   Span rows that have the same value in a specified column
+    * @return data || ''
+    */
+    rowSpanning: function (v, meta, r, rowIndex, colIndex, s) {
+        // Get dataindex 
+        var dataIndex = s.fields.keys[r.json.indexOf(v)];
+        
+        // renderer row spanning effect
+        var first = !rowIndex || v !== s.getAt(rowIndex - 1).get(dataIndex),
+            last = rowIndex >= s.getCount() - 1 || v !== s.getAt(rowIndex + 1).get(dataIndex);
+        meta.css += 'row-span' + (first ? ' row-span-first' : '') +  (last ? ' row-span-last' : '');
+        if (first) {
+            var i = rowIndex + 1;
+            while (i < s.getCount() && v === s.getAt(i).get(dataIndex)) {
+                i++;
+            }
+            var rowHeight = 20, padding = 6,
+                height = (rowHeight * (i - rowIndex) - padding) + 'px';
+            meta.attr = 'style="height:' + height + ';line-height:' + height + ';"';
+        }
+        return first ? v : '';
+    }
+};

data/test/dummy/public/lib/javascripts/row_spanning-min.js

@@ -0,0 +1 @@
+Ext.define("Wando.RowSpanning",{extend:"Ext.grid.feature.Feature",alias:"feature.rowspanning",init:function(){if(this.independences&&this.independences.length){this.independences.forEach(function(a){this.dependences[a]=null},this)}this.grid.addCls("grid-row-span");this.grid.columns.forEach(function(a){if(this.dependences[a.dataIndex]||this.independences.indexOf(a.dataIndex)!=-1){a.renderer=this.genRenderer(a.renderer)}},this)},genRenderer:function(a){var b=this;return function(k,m,c,f,j,n){var g=n.model.getFields()[j].name,i=b.isStart(g,f),e=b.isEnd(g,f);m.tdCls+="row-span"+(i?" row-span-first":"")+(e?" row-span-last":"");var l="",d="";if(i){l="<div style='position: absolute; margin-top: "+b.getSpanningHeight(g,f)+"px;'>";d="</div>"}if(i){var h=a?a.apply(this,arguments):k;return l+h+d}else{return""}}},isStart:function(f,g){if(!g){return true}var a=this.grid.store.getAt(g),d=this.dependences[f];if(d&&this.isStart(d,g)){return true}var e=this.grid.store.getAt(g-1),b=(!d||a.get(d)!==e.get(d)),c=(a.get(f)!==e.get(f));return !d?c:(b||c)},isEnd:function(g,h){var b=this.grid.store;if(h>=b.getCount()-1){return true}var a=b.getAt(h),e=this.dependences[g];if(e&&this.isEnd(e,h)){return true}var f=b.getAt(h+1),c=(!e||a.get(e)!==f.get(e)),d=(a.get(g)!==f.get(g));return !e?d:(c||d)},getSpanningHeight:function(f,g){var c=g+1,a=this.grid.store,b=this.dependences[f];if(!this.isEnd(f,g)){while(!this.isEnd(f,c)){c++}c++}var d=20,e=10;return(d*(c-g)/2-e)}});

data/test/dummy/public/lib/javascripts/row_spanning.js

@@ -0,0 +1,206 @@
+/**
+ * This is grid feature for enabling row spanning effect in a common grid panel. It is done with adding some renderers and twist the original grid css.
+ * 
+ * Usage
+ * 
+ * In your js manifest file:
+ * 
+ * 	//= require_lib row_spanning
+ * 	
+ * In your css manifest file:
+ * 
+ * 	/*= require_lib row_spanning *／
+ * 	
+ * How to configure:
+ * 
+ * 	Ext.create('Ext.grid.Panel', {
+ * 		id: 'myGridWithRowSpanning',
+ * 		store: Ext.create('Ext.data.Store', {
+ * 			fields: ["id", "customer", "number"]
+ * 		}),
+ * 		features: [Ext.create('Wando.RowSpanning', {
+ * 			independences: ['customer'],
+ * 			dependences: {
+ * 				number: 'customer'
+ * 			}
+ * 		})]
+ * 	});
+ * 	
+ * Explanation:
+ * 
+ * * `independences`: 是一个数组，用于配置独立的 rowSpanning。所谓独立的单元格就是指只要上下相邻的两个单元格只要数值相等，就会合并。该数组的每个元素是其对应单元格的 dataIndex 字符串。
+ * * `dependences`: 是一个 hash，用于配置依赖的 rowSpanning。依赖指的是单元格在上下合并时需要考虑其依赖的单元格是否相同。如果上下值相等的两个单元格，但是其依赖的单元格值不同，他们也不会合并起来。配置的格式是 {需要合并的 dataIndex：依赖的 dataIndex}（可配置多个）。
+ * 
+ * 下面是一个例子：
+ * 
+ *     @example
+ *     var fields = ["id", "customer", "number", "cloth_number"];
+ *        
+ *     Ext.define('Order', {
+ *         extend: 'Ext.data.Model',
+ *         fields: fields
+ *     });
+ *        
+ *     var myStore = Ext.create('Ext.data.Store', {
+ *         model: 'Order',
+ *         data: [
+ *             ["093A-1", "爱普苹果", "CY2016", "CT12SSZ392"],
+ *             ["002B", "杰欧里顿", "CY2018", "CT12SSH442"],
+ *             ["002B", "杰欧里顿", "CY2018", "CT12SSH442"],
+ *             ["002B", "杰欧里顿", "CY2019", "CT12SSH368"],
+ *             ["002B", "杰欧里顿", "CY2020", "CT12SSH4102"],
+ *             ["002B", "杰欧里顿", "CY2020", "CT12SSH4103"],
+ *             ["002B", "杰欧里顿", "CY2020", "CT12SSH4103"],
+ *             ["002B", "杰欧里顿2", "CY2020", "CT12SSH4103"],
+ *             ["002B", "杰欧里顿2", "CY2020", "CT12SSH4103"],
+ *             ["002B", "杰欧里顿2", "CY2020", "CT12SSH4103"],
+ *             ["002B2", "杰欧里顿2", "CY2018", "CT12SSH442"],
+ *             ["002B2", "杰欧里顿2", "CY2018", "CT12SSH442"],
+ *             ["101A", "景晖", "CY2011", "8012010122-01"]
+ *         ]
+ *     });
+ *                
+ *     Ext.create('Ext.grid.Panel', {
+ *         store: myStore,
+ *         id: "grid",
+ *         title: '详情',
+ *         features: [Ext.create('Wando.RowSpanning', {
+ *             spanningId: 'id',
+ *             independences: ['id'],
+ *             dependences: {
+ *                 customer: 'id',
+ *                 number: 'customer',
+ *                 cloth_number: 'customer'
+ *             }
+ *         })],
+ *         renderTo: Ext.getBody(),
+ *         columnLines: true,
+ *         columns: [{
+ *             header: "序号",
+ *             dataIndex: "id"
+ *         }, {
+ *             header: "客户",
+ *             dataIndex: "customer"
+ *         }, {
+ *             header: "制单号",
+ *             dataIndex: "number"
+ *         }, {
+ *             header: "我司款号",
+ *             dataIndex: "cloth_number"
+ *         }, {
+ *             header: "工艺",
+ *             dataIndex: "craft",
+ *             width: 250
+ *         }]
+ *     });
+ */
+Ext.define('Wando.RowSpanning', {
+    extend: 'Ext.grid.feature.Feature',
+    alias: 'feature.rowspanning',
+
+    init: function() {
+        // TODO: add a listener for sorting data with spanningId on store
+        // if (this.spanningId) { this.grid.store.sort(this.spanningId); }
+        // if (this.spanningId && this.independences.indexOf(this.spanningId) != -1) { this.independences.push(this.spanningId); }
+        
+        /**
+         * @cfg {Array} independences
+         *
+         * 用于配置独立的 rowSpanning。所谓独立的单元格就是指只要上下相邻的两个单元格只要数值相等，就会合并。该数组的每个元素是其对应单元格的 dataIndex 字符串。
+         */
+        /**
+         * @cfg {Object} dependences
+         *
+         * 用于配置依赖的 rowSpanning。依赖指的是单元格在上下合并时需要考虑其依赖的单元格是否相同。如果上下值相等的两个单元格，但是其依赖的单元格值不同，他们也不会合并起来。配置的格式是 {需要合并的 dataIndex：依赖的 dataIndex}（可配置多个）。
+         */
+        if (this.independences && this.independences.length) { 
+            this.independences.forEach(function(field) {
+                this.dependences[field] = null;
+            }, this);
+        }
+        
+        // add extra stylesheet
+        this.grid.addCls('grid-row-span');
+        
+        // equip each targeted column with renderer
+        this.grid.columns.forEach(function(col) {
+            if (this.dependences[col.dataIndex] || this.independences.indexOf(col.dataIndex) != -1) {
+                col.renderer = this.genRenderer(col.renderer);
+            };
+        }, this);
+    },
+    
+    genRenderer: function(oldRenderer) {
+        var spanner = this;
+        
+        return function (v, meta, r, rowIndex, colIndex, s) {
+            var dataIndex = s.model.getFields()[colIndex].name,
+                startf = spanner.isStart(dataIndex, rowIndex),
+                endf = spanner.isEnd(dataIndex, rowIndex);
+            
+            meta.tdCls += 'row-span' + (startf ? ' row-span-first' : '') +  (endf ? ' row-span-last' : '');
+            
+            var spanningPrefix = '',
+                spanningPostfix = '';
+            if (startf) {
+                spanningPrefix = "<div style='position: absolute; margin-top: " + spanner.getSpanningHeight(dataIndex, rowIndex) + "px;'>";
+                spanningPostfix = "</div>";
+            }
+            
+            // handle return with old renderer
+            if (startf) {
+                var value = oldRenderer ? oldRenderer.apply(this, arguments) : v;
+                
+                return spanningPrefix + value + spanningPostfix;
+            } else {
+                return '';
+            }
+        };
+    },
+    
+    isStart: function(field, rowIndex) {
+        // the first row in the grid
+        if (!rowIndex) { return true; }
+        
+        // depended field coordination
+        var record = this.grid.store.getAt(rowIndex),
+            dependedField = this.dependences[field];
+        
+        if (dependedField && this.isStart(dependedField, rowIndex)) { return true; }
+        
+        var previousRecord = this.grid.store.getAt(rowIndex - 1),
+            hasSameParent = (!dependedField || record.get(dependedField) !== previousRecord.get(dependedField)),
+            hasSameValue = (record.get(field) !== previousRecord.get(field));
+        
+        return !dependedField ? hasSameValue : (hasSameParent || hasSameValue);
+    },
+    
+    isEnd: function(field, rowIndex) {
+        var store = this.grid.store;
+        if (rowIndex >= store.getCount() - 1) { return true; }
+        
+        var record = store.getAt(rowIndex),
+            dependedField = this.dependences[field];
+        
+        if (dependedField && this.isEnd(dependedField, rowIndex)) { return true; }
+        
+        var nextRecord = store.getAt(rowIndex + 1),
+            hasSameParent = (!dependedField || record.get(dependedField) !== nextRecord.get(dependedField)),
+            hasSameValue = (record.get(field) !== nextRecord.get(field));
+        
+        return !dependedField ? hasSameValue : (hasSameParent || hasSameValue);
+    },
+    
+    getSpanningHeight: function(field, rowIndex) {
+        var nextRow = rowIndex + 1,
+            store = this.grid.store,
+            dependedField = this.dependences[field];
+        if (!this.isEnd(field, rowIndex)) { 
+            while (!this.isEnd(field, nextRow)) { nextRow++; }
+            nextRow++;
+        }
+                
+        var rowHeight = 20, padding = 10;
+        return (rowHeight * (nextRow - rowIndex) / 2  - padding);
+    }
+});