Ext 图片批量删除（笔记2）

最新推荐文章于 2020-06-22 21:38:08 发布

原创最新推荐文章于 2020-06-22 21:38:08 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

13 篇文章

订阅专栏

前端_EXT

4 篇文章

订阅专栏

1、增加Ext按钮

    var butExt = new Ext.Button({
					text: "删除",
					renderTo: 'dataview-example',
					width: 100,
					id: "mybutton"
				});

2、在panel中的listeners增加图片选中的监听

var imgEXt = Ext.create('Ext.Panel', {
	id: 'images-view',
	title: '已选中 ( 0 )张图片',
	width: '100%',
	renderTo: 'dataview-example',

	items: Ext.create('Ext.view.View', {
		store: store,

		tpl: [
			'<tpl for=".">',
			'<div class="thumb-wrap"  id="{attachmentId}" >',
			'<div class="thumb" ><img src="' + temp + '{path}" onerror="this.src=\'lib/img/imgDef.png\'; "></div>',
			'</div>',
			'</tpl>',
			'<div class="x-clear"></div>'
		],

		selectionModel: {
			mode: 'MULTI'
		},
		trackOver: true,
		overItemCls: 'x-item-over',
		itemSelector: 'div.thumb-wrap',
		emptyText: '没有附件图片！',
		prepareData: function(data) {
			Ext.apply(data, {});
			return data;
		},
		listeners: {
			selectionchange: function(dv, nodes) {
				vm.imgAttachmentId = [];

                      if(nodes !== null && nodes.length > 0) {
					for(var i = 0; i < nodes.length; i++) {
						vm.imgAttachmentId.push(nodes[i].data.attachmentId);
					}
				}

                      var l = nodes.length;this.up('panel').setTitle('已选中 (' + ' ' + l + ' ' + ')张图片');
                     }
               }
        })
});

3、点击按钮，调用vm.delete（）删除方法

butExt.getEl("mybutton").on("click", function(e, node) {
		if(vm.imgAttachmentId !== null && vm.imgAttachmentId.length > 0) {
			vm.delete(vm.imgAttachmentId)
		}else{
		       vm.$message({
			type: 'warning',
			message: '未选择图片！'
		});
	}
});

4、效果图