图片上传预览ImgField

app.json

@@ -237,6 +237,12 @@
             "theme": "theme-crisp"
         }
     },
+
+    "server": {
+        "nodeServer": {
+            "basePath": "http://127.0.0.1:24002"
+        }
+    },
     
     /**
      * List of all CSS assets in the right inclusion order.

app/store/Products.js

@@ -5,12 +5,11 @@ Ext.define('uas.store.Products', {
     model: 'uas.model.Product',
     proxy: {
         type: 'ajax',
-        url: 'data/grid-filter.json',
+        url: '/api/products',
         reader: {
             type: 'json',
-            rootProperty: 'data',
-            idProperty: 'id',
-            totalProperty: 'total'
+            rootProperty: 'data.list',
+            totalProperty: 'data.total'
         }
     },
     remoteSort: false,
@@ -18,5 +17,6 @@ Ext.define('uas.store.Products', {
         property: 'company',
         direction: 'ASC'
     }],
-    pageSize: 50
+    pageSize: 50,
+    autoLoad: false
 });

app/view/form/imgfield/Panel.js

@@ -0,0 +1,14 @@
+Ext.define('uas.view.form.imgfield.Panel', {
+    extend: 'Ext.form.Panel',
+    xtype: 'form-imgfield',
+    requires:[
+        'Ext.ux.form.field.ImgField'
+    ],
+
+    bodyPadding: 12,
+
+    items: [{
+        xtype: 'imgfield',
+        value: 'jztnl975x6tqwjxnra;'
+    }]
+});

app/view/grid/exporter/Panel.js

@@ -17,12 +17,7 @@ Ext.define('uas.view.grid.Exporter', {
 
     store: {
         type: 'products',
-        url: 'data/grid/grid-filter.json',
         autoLoad: true,
-        autoDestroy: true,
-        grouper: {
-            property: 'size'
-        }
     },
 
     features: [{

package.json

@@ -0,0 +1,8 @@
+{
+    "name": "uas2.0",
+    "version": "0.1.1-dev",
+    "scripts": {
+        "start": "node server/server.js --port 24002 | sencha app watch",
+        "build": "sencha app build"
+    }
+}

resources/json/navigation.json

@@ -16,6 +16,11 @@
             "target": "form-mfilefield",
             "leaf": true,
             "iconCls": "x-fa fa-smile-o"
+        }, {
+            "text": "图片上传预览",
+            "target": "form-imgfield",
+            "leaf": true,
+            "iconCls": "x-fa fa-smile-o"
         }]
     },
     {

server/action/index.js

@@ -7,6 +7,7 @@ var download = require('./file-download');
 var fileInfo = require('./file-info');
 var formGridList = require('./formGridList');
 var productList = require('./productList');
+var products = require('./products');
 
 module.exports = {
     '/bigData': bigData,
@@ -17,5 +18,6 @@ module.exports = {
     '/file/download': download,
     '/file/info': fileInfo,
     '/formGridList': formGridList,
-    '/productList':productList
+    '/productList':productList,
+    '/products': products
 }

server/action/products.js

@@ -0,0 +1,236 @@
+var data = [
+    {
+       "id":"1",
+       "price":"71.72",
+       "company":"3m Co",
+       "date":"2007-09-01",
+       "size":"large",
+       "visible":"1"
+    },
+    {
+       "id":"2",
+       "price":"31.61",
+       "company":"AT&T Inc.",
+       "date":"2008-02-01",
+       "size":"extra large",
+       "visible":"0"
+    },
+    {
+       "id":"3",
+       "price":"29.01",
+       "company":"Aloca Inc",
+       "date":"2007-08-01",
+       "size":"medium",
+       "visible":"0"
+    },
+    {
+       "id":"4",
+       "price":"83.81",
+       "company":"Altria Group Inc",
+       "date":"2007-08-03",
+       "size":"large",
+       "visible":"0"
+    },
+    {
+       "id":"5",
+       "price":"52.55",
+       "company":"American Express Company",
+       "date":"2008-01-04",
+       "size":"extra large",
+       "visible":"1"
+    },
+    {
+       "id":"6",
+       "price":"64.13",
+       "company":"American International Group Inc.",
+       "date":"2008-03-04",
+       "size":"small",
+       "visible":"1"
+    },
+    {
+       "id":"7",
+       "price":"75.43",
+       "company":"Boeing Co.",
+       "date":"2008-01-01",
+       "size":"large",
+       "visible":"1"
+    },
+    {
+       "id":"8",
+       "price":"67.27",
+       "company":"Caterpillar Inc.",
+       "date":"2007-12-03",
+       "size":"medium",
+       "visible":"1"
+    },
+    {
+       "id":"9",
+       "price":"49.37",
+       "company":"Citigroup, Inc.",
+       "date":"2007-11-24",
+       "size":"large",
+       "visible":"1"
+    },
+    {
+       "id":"10",
+       "price":"40.48",
+       "company":"E.I. du Pont de Nemours and Company",
+       "date":"2007-05-09",
+       "size":"extra large",
+       "visible":"0"
+    },
+    {
+       "id":"11",
+       "price":"68.1",
+       "company":"Exxon Mobile Corp",
+       "date":"2007-12-12",
+       "size":"large",
+       "visible":"1"
+    },
+    {
+       "id":"12",
+       "price":"34.14",
+       "company":"General Electric Company",
+       "date":"2008-06-16",
+       "size":"extra large",
+       "visible":"1"
+    },
+    {
+       "id":"13",
+       "price":"30.27",
+       "company":"General Motors Corporation",
+       "date":"2006-12-07",
+       "size":"medium",
+       "visible":"1"
+    },
+    {
+       "id":"14",
+       "price":"36.53",
+       "company":"Hewlett-Packard Co.",
+       "date":"2007-05-13",
+       "size":"large",
+       "visible":"1"
+    },
+    {
+       "id":"15",
+       "price":"38.77",
+       "company":"Honweywell Intl Inc",
+       "date":"2006-11-07",
+       "size":"medium",
+       "visible":"0"
+    },
+    {
+       "id":"16",
+       "price":"19.88",
+       "company":"Intel Corporation",
+       "date":"2007-01-09",
+       "size":"small",
+       "visible":"1"
+    },
+    {
+       "id":"17",
+       "price":"81.41",
+       "company":"International Business Machines",
+       "date":"2005-01-21",
+       "size":"extra large",
+       "visible":"1"
+    },
+    {
+       "id":"18",
+       "price":"64.72",
+       "company":"Johnson & Johnson",
+       "date":"2008-01-10",
+       "size":"extra large",
+       "visible":"1"
+    },
+    {
+       "id":"19",
+       "price":"45.73",
+       "company":"JP Morgan & Chase & Co",
+       "date":"2008-02-20",
+       "size":"large",
+       "visible":"0"
+    },
+    {
+       "id":"20",
+       "price":"36.76",
+       "company":"McDonald's Corporation",
+       "date":"2007-06-12",
+       "size":"large",
+       "visible":"1"
+    },
+    {
+       "id":"21",
+       "price":"27.96",
+       "company":"Pfizer Inc",
+       "date":"2007-12-30",
+       "size":"small",
+       "visible":"0"
+    },
+    {
+       "id":"22",
+       "price":"45.07",
+       "company":"The Coca-Cola Company",
+       "date":"2007-01-30",
+       "size":"medium",
+       "visible":"0"
+    },
+    {
+       "id":"23",
+       "price":"34.64",
+       "company":"The Home Depot, Inc",
+       "date":"2006-12-31",
+       "size":"small",
+       "visible":"1"
+    },
+    {
+       "id":"24",
+       "price":"61.91",
+       "company":"The Procter & Gamble Company",
+       "date":"2007-04-08",
+       "size":"extra large",
+       "visible":"1"
+    },
+    {
+       "id":"25",
+       "price":"63.26",
+       "company":"United Technologies Corporation",
+       "date":"2006-06-04",
+       "size":"medium",
+       "visible":"1"
+    },
+    {
+       "id":"26",
+       "price":"35.57",
+       "company":"Verizon Communications",
+       "date":"2005-07-09",
+       "size":"small",
+       "visible":"0"
+    },
+    {
+       "id":"27",
+       "price":"45.45",
+       "company":"Wal-Mart Stores, Inc",
+       "date":"2006-09-09",
+       "size":"large",
+       "visible":"1"
+    }
+ ];
+
+module.exports = function(request, response){
+    var query = request.query;
+    var page = query.page || 1;
+    var start = query.start || 0;
+    var limit = query.limit || 0;
+    var result = {
+        total: data.length
+    };
+
+    if(limit > 0) {
+        result.list = data.slice(start, start + limit);
+    }else {
+        result.list = data;
+    }
+
+    return result;
+}

ux/form/field/FileTag.js

@@ -5,17 +5,27 @@
 Ext.define('Ext.ux.form.field.FileTag', {
 	extend : 'Ext.form.field.Trigger',
 	alias : 'widget.filetag',
-	trigger1Cls: 'font-uas u-download',
-    trigger2Cls: 'font-uas u-delete',
     style:'margin:5px 5px 0 0',
-    autoShow: true,
-	initComponent : function() {
-		this.callParent(arguments);
+	autoShow: true,
+	triggers: {
+		download: {
+			cls: 'font-uas u-download',
+			handler: 'onDownload',
+			scope: 'this',
+			focusOnMousedown: true
+		},
+		delete: {
+			cls: 'font-uas u-delete',
+			handler: 'onDelete',
+			scope: 'this',
+		}
 	},
-	onTrigger1Click: function(e){
-        this.download();
+	initComponent : function() {
+		var me = this;
+
+		me.callParent(arguments);
 	},
-	onTrigger2Click: function(){
+	onDelete: function(){
 
 		if(typeof this.up('mfilefield').remove === 'function') {
 			this.up('mfilefield').remove(this.getFileInfo());
@@ -32,10 +42,11 @@ Ext.define('Ext.ux.form.field.FileTag', {
 		}
 	},
 
-	download : function() {
+	onDownload : function() {
         var me = this;
-		var serverOptions = Ext.manifest.server;
-		window.open((serverOptions.basePath.https?serverOptions.basePath.https:serverOptions.basePath) + '/file/download?filename='+me.fileName+'&path='+me.filePath+'&size='+me.fileSize);
+		// var serverOptions = Ext.manifest.server;
+		// window.open((serverOptions.basePath.https?serverOptions.basePath.https:serverOptions.basePath) + '/file/download?filename='+me.fileName+'&path='+me.filePath+'&size='+me.fileSize);
+		window.open(Ext.manifest.server.nodeServer.basePath + '/file/download?filename='+me.fileName+'&path='+me.filePath+'&size='+me.fileSize);
 	},
 
 	

ux/form/field/ImgField.js

@@ -0,0 +1,213 @@
+Ext.define('Ext.ux.form.field.ImgField', {
+    extend: 'Ext.form.FieldContainer',
+    alias: 'widget.imgfield',
+
+    layout: "hbox",
+    defaults: {
+        hideLabel: true
+    },
+    isFormField: true,
+    defaultBindProperty: 'value',
+    cls: 'remoteimg-field',
+
+    initComponent: function () {
+        var me = this;
+
+        Ext.apply(me, {
+            items: [{
+                xtype: 'hidden',
+                name: 'imgPath'
+            }, {
+                xtype: 'image',
+                height: 170,
+                width: 135,
+                hidden: true,
+                src: '',
+                style: {
+                    'background-color': '#e6dede'
+                }
+            }, {
+                xtype: 'filefield',
+                name: 'file',
+                cls: 'upload-bth',
+                height: 170,
+                width: 135,
+                buttonText: '上传头像',
+                buttonOnly: true,
+                hideLabel: true,
+                // hidden: true,
+                buttonConfig: {
+                    cls: 'x-filefield-button'
+                },
+                listeners: {
+                    change: function (field) {
+                        if (!!field.value) {
+                            me.upload(field);
+                        }
+                    }
+                }
+            }, {
+                xtype: 'component',
+                cls: 'tool-bar',
+                hidden: true,
+                html: '<div class="tools"><span title="放大" class="tool enlarge x-fa fa-expand"></span><span title="删除" class="tool delete font-uas u-delete"></span></div>',
+                listeners: {
+                    boxready: function(component) {
+                        component.el.dom.onclick = function() {
+                            if(event.target.classList.contains('enlarge')) {
+                                me.enlargeImg();
+                            }else if(event.target.classList.contains('delete')) {
+                                me.deleteImg();
+                            }
+                        };
+                    }
+                }
+            }]
+        });
+
+        me.callParent(arguments);
+    },
+
+    listeners: {
+        boxready: function(container, width, height, e) {
+            container.el.dom.onmouseenter = function() {
+                if(container.items.items[1].isVisible()) {
+                    container.items.items[3].setHidden(false);
+                }
+            };
+            container.el.dom.onmouseleave = function() {
+                if(container.items.items[1].isVisible()) {
+                    container.items.items[3].setHidden(true);
+                }
+            }
+        }
+    },
+
+    setValue: function(v) {
+        var me = this,
+        items = me.items.items,
+        imgPath = items[0],
+        img = items[1],
+        fileField = items[2];
+
+        if(!!v) {
+            imgPath.setValue(v);
+            img.setSrc(v);
+            img.setHidden(false);
+            fileField.setHidden(true);
+        }
+
+        me.publishState('value', v);
+    },
+
+    getValue: function() {
+        return this.items.items[0].value;
+    },
+
+    getValueField: function () {
+        return this.items.items[0];
+    },
+
+    isValid: function () {
+        return this.getValueField().isValid();
+    },
+
+    isDirty: function () {
+        return this.getValueField().isDirty();
+    },
+
+    setReadOnly: function (val) {
+        var me = this,
+        items = me.items.items,
+        imgPath = items[0],
+        fileField = items[2];
+
+        imgPath.setReadOnly(val);
+        fileField.button.setDisabled(val);
+    },
+
+    resetOriginalValue: function() {
+		this.getValueField().resetOriginalValue();
+	},
+
+    /**
+     * 上传附件
+     */
+    upload: function (field) {
+        var me = this;
+        var fd = new FormData();
+        fd.append('file', field.fileInputEl.dom.files[0]);
+        fd.append('folderId', 0);
+        me.setLoading(true);
+        Ext.Ajax.request({
+            // url: 'http://10.1.80.101:9520/api/file/upload', //这里是填写需要跨域访问的URL
+            url: '/api/file/upload',//这里是填写需要跨域访问的URL
+            cors: true,
+			useDefaultXhrHeader: false,
+			method: 'post',
+			rawData: fd,
+			headers: {
+				// 'Access-Control-Allow-Origin': '*',
+				// 'Authorization':  uas.util.State.get('session').token,
+				//"Content-Type": 'multipart/form-data'  //文件上传的格式， 
+				"Content-Type":null
+			},
+            success: function (response, opts) {
+                me.setLoading(false);
+                var res = Ext.decode(response.responseText);
+                if (res.success) {
+                    var data = res.data,
+                    accessPath = Ext.manifest.server.nodeServer.basePath + 
+                        '/file/download?filename='+data.name+'&path='+data.path+'&size='+data.size;
+
+                    me.setValue(accessPath);
+                } else {
+                    console.error('failure', res);
+                }
+            },
+            failure: function (response, opts) {
+                me.setLoading(false);
+                console.error('failure', res);
+            }
+        });
+    },
+
+    enlargeImg: function() {
+        var me = this;
+        var win = Ext.getCmp('enlarge-win');
+        if(!win) {
+            win = Ext.create('Ext.window.Window', {
+                width: 350,
+                height: 400,
+                layout: 'fit',
+                items: [{
+                    xtype: 'image',
+                    src: me.getValue()
+                }]
+            });
+        }
+        win.show();
+    },
+
+    deleteImg: function() {
+        var me = this,
+        items = me.items.items,
+        imgPath = items[0],
+        img = items[1],
+        fileField = items[2];
+        console.log("delete");
+        // Ext.showConfirm('确认删除', '是否确认删除该头像？')
+        // .then(function(yes) {
+        //     if(yes == 'yes') {
+        //         imgPath.setValue(null);
+        //         img.setSrc(null);
+        //         fileField.reset();
+        //         fileField.setHidden(false);
+        //         img.setHidden(true);
+        
+        //         me.publishState('value', null);
+        //     }
+        // });
+    }
+
+});

ux/form/field/ImgField.scss

@@ -0,0 +1,37 @@
+.remoteimg-field {
+    img, .upload-bth {
+        left: 50% !important;
+        margin-left: -67.5px !important;
+    }
+
+    .x-filefield-button {
+        margin-top: 50% !important;
+    }
+
+    .tool-bar {
+        width: 100% !important;
+        height: 24px !important;
+        top: 146px !important;
+        left: 0 !important;
+        .tools {
+            width: 135px;
+            height: 24px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: flex-end;
+            background: white;
+            opacity: 0.7;
+
+            .tool {
+                width: 24px;
+                line-height: 24px;
+                text-align: center;
+                cursor: pointer;
+
+                &:hover {
+                    font-size: 16px;
+                }
+            }
+        }
+    }  
+}