关于在ExtJs4.0使用DataView中遇到的问题及解决方法

最近在做一个小项目，有个需求是批量上传图片。

ExtJs没有提供现成的批量上传控件，于是自己就在网上搜了一下，发现有人结合swfupload扩展了一下。

于是自己也打造了一个符合需求的控件。

先看一下效果图，现在比较简陋

编写过程中遇到的问题

1、刚开始在处理上传后自动将上传的图片添加到窗体里时，遇到如下情况

第一反应是没有收到返回的数据，然后console.log()打出接收的数据，发现数据也正常，如下图

我还在怀疑是不是dataview不能使用.getStore().add(model)这种方式添加。最后发现接收的是字符串，而不是object。应该使用Ext.JSON.decode()将字符串转成json对象：如图

这里大意了，至此第一个问题解决。

2、在当前窗口已存在图片的情况下再向其中插入图片会存在如下图的情况

即不满一行的情况下，若本次上传超过一行的数据，则会出现原来最后一个item与本次上传的项整体换行，通过开发者工具可以看到

第一条数据在一个class为x-dataview-item的div里，后来上传的图片都被添加到上一次最后一个div里了，奇怪的是我的tpl模版里根本没有这个div，

然后我又在api文档中查看了一下html代码，同样没有这个div。这个不可能凭空出来的啊，只能去找找ext的源码了。搜索dataview-item可以找到

itemCls: Ext.baseCSSPrefix + 'dataview-item',再往下走点就能找到itemTpl = Ext.String.format('<tpl for="."><div class="{0}">{1}</div></tpl>', me.itemCls, itemTpl);就是这里加上的。于是果断把这里改成itemTpl = Ext.String.format('<tpl for=".">{0}</tpl>',  itemTpl);至此第二个问题也解决了。

不过还有些疑问，为什么api文档中就没有这种情况。

以下是整个代码

Ext.define('frame.PicturesUpload', {
    extend: 'Ext.window.Window',

    height: 447,
    width: 531,
    layout: {
        type: 'border'
    },
    title: '',

    initComponent: function () {
        var me = this;

        var dataView = Ext.create('Ext.view.View', {
            store: me.dvStore,
            overflowY: 'auto',
            itemTpl: [
                '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                '<div class="thumb"><img src="{url}" title="{name}"></div>',
                '<span class="x-editable">{shortName}</span></div>',
                '</tpl>'
            ],
            multiSelect: true,
            height: 310,
            trackOver: true,
            overItemCls: 'x-item-over',
            itemSelector: 'div.thumb-wrap',
            emptyText: '这里还没有图片',
            prepareData: function (data) {
                Ext.apply(data, {
                    shortName: Ext.util.Format.ellipsis(data.name, 15)
                });
                return data;
            },
            listeners: {
                selectionchange: function (dv, nodes) {
                    var l = nodes.length,
                        s = l !== 1 ? 's' : '';
                    me.setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
                }
            }
        });
        this.DataView = dataView;
        me.items = [{
            xtype: 'panel',
            region: 'center',
            layout: 'fit',
            border: false,
            items: dataView
        }];

        var progressbar = Ext.create('Ext.ProgressBar', {
            flex: 4,
            value: 0
        });
        this.Progressbar = progressbar;

        var statusLabel = Ext.create('Ext.form.Label', {
            flex: 1,
            text: '已选择0个文件'
        });
        this.StatusLabel = statusLabel;
        me.dockedItems = [{
            xtype: 'toolbar',
            dock: 'top',
            items: [{
                id: 'swfuploadbutton',
                width: 85,
                xtype: 'panel',
                border: false,
                bodyStyle: 'background-color:transparent;'
            }, {
                text: '删除',
                tooltip: '删除选中图片'
            }]
        },
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [
                    statusLabel,
                        progressbar
                    ]
                }
            ];

        me.callParent(arguments);
    },
    listeners: {
        afterrender: function (t) {
            t.SWFUpload = new SWFUpload({
                // Backend Settings
                upload_url: "/Default/UploadPics",
                post_params: {
                    hid: t.hid
                },

                // File Upload Settings
                file_types: "*.jpg;*.bmp;*.png;*.gif",
                file_upload_limit: "0",    // Zero means unlimited

                // Event Handler Settings - these functions as defined in Handlers.js
                //  The handlers are not part of SWFUpload but are part of my website and control how
                //  my website reacts to the SWFUpload events.
                file_queue_error_handler: fileQueueError,
                file_dialog_complete_handler: function (numFilesSelected, numFilesQueued) {
                    try {
                        if (numFilesQueued > 0) {
                            t.StatusLabel.setText("已选择" + numFilesSelected + "个文件");
                            this.startUpload();
                        }
                    } catch (ex) {
                        this.debug(ex);
                    }
                },
                upload_progress_handler: function (file, bytesLoaded) {

                    try {

                        var percent = Math.ceil((bytesLoaded / file.size) * 100);
                        t.Progressbar.setPosition(percent);
                        if (percent === 100) {
                            t.StatusLabel.setText("已完成");
                        } else {
                            t.StatusLabel.setText("正在上传");
                        }
                    } catch (ex) {
                        this.debug(ex);
                    }
                },
                upload_error_handler: uploadError,
                upload_success_handler: function (file, serverData) {
                    try {
                        var data = Ext.JSON.decode(serverData);
                        console.log(data);
                        t.DataView.getStore().add(data);
                        t.ProgressBar.setPosition(0);
                    } catch (ex) {
                        this.debug(ex);
                    }
                },
                upload_complete_handler: function (file) {
                    try {

                        /*  I want the next upload to continue automatically so I'll call startUpload here */
                        if (this.getStats().files_queued > 0) {
                            this.startUpload();
                        } else {
                            //t.DataView.getStore().load();
                            t.StatusLabel.setText("已全部完成");
                        }
                    } catch (ex) {
                        this.debug(ex);
                    }
                },

                // Button settings
                button_image_url: VirtualPath + "/content/images/uploadbutton.png",
                button_placeholder_id: "swfuploadbutton",
                button_width: 80,
                button_height: 22,
                button_text: '<span class="swfbutton">上传图片</span>',
                button_text_style: '.swfbutton { font-family: Helvetica, Arial, sans-serif; font-size: 12pt;text-align:center; }',
                // Flash Settings
                flash_url: VirtualPath + "/content/js/swfupload/swfupload.swf", // Relative to this file

                // Debug Settings
                debug: false
            });
        }
    }

});

留此文以备以后查看。