Ext 展示图片列表（笔记1）

最新推荐文章于 2022-09-12 17:17:58 发布

Adonis_D_Gogh

最新推荐文章于 2022-09-12 17:17:58 发布

阅读量1.4k

点赞数 2

分类专栏：前端前端_EXT

本文链接：https://blog.csdn.net/Adonis_D_Gogh/article/details/78964271

版权

前端同时被 2 个专栏收录

13 篇文章 2 订阅

订阅专栏

前端_EXT

4 篇文章 1 订阅

订阅专栏

Ext 展示图片列表

1、效果图：

2、js代码

			Ext.require([
				'Ext.view.View'
			]);

			Ext.onReady(function() {
				
				Ext.define('img_view', {
                    extend: 'Ext.data.Model',
                    fields: ['name', 'url', 'id']
                });
                store = Ext.create('Ext.data.Store', {
                    model: 'img_view'
                });

				Ext.create('Ext.Panel', {
					id: 'images-view',
		        	width: '100%',
		        	renderTo: 'dataview-example',
			        items: Ext.create('Ext.view.View', {
		            store: store,
		            tpl: [
		                '<tpl for=".">',
		                    '<div class="thumb-wrap" id="{id}">',
		                        '<div class="thumb"><img src={url} οnerrοr="this.src=\'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: 'No images to display',
		            plugins: [
		                Ext.create('Ext.ux.DataView.DragSelector', {}),
		                Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
		            ],
			        })
		    	});
                        vm.load();//调用自定义的load方法，为store传值
			});

3、css

#images-view .x-panel-body{
    background: white;
    font: 11px Arial, Helvetica, sans-serif;
}
#images-view .thumb{
    background: #dddddd;
    padding: 3px;
    padding-bottom: 3px;
}

.x-quirks #images-view .thumb {
    padding-bottom: 3px;
}

#images-view .thumb img{
    height: 100px;
    width: 100px;
}
#images-view .thumb-wrap{
    float: left;
    margin: 4px;
    margin-right: 0;
    padding: 5px;
}
#images-view .thumb-wrap span {
    
    display: block;
    overflow: hidden;
    text-align: center;
    width: 86px; /* for ie to ensure that the text is centered */
}

#images-view .x-item-over{
    border:1px solid #dddddd;
    background: #efefef url(over.gif) repeat-x left top;
    padding: 4px;
}

#images-view .x-item-selected{
    background: #eff5fb url(selected.gif) no-repeat right bottom;
    border:1px solid #99bbe8;
    padding: 4px;
}
#images-view .x-item-selected .thumb{
    background:transparent;
}

#images-view .loading-indicator {
    font-size:11px;
    background-image:url('../../resources/themes/images/default/grid/loading.gif');
    background-repeat: no-repeat;
    background-position: left;
    padding-left:20px;
    margin:10px;
}

.x-view-selector {
    position:absolute;
    left:0;
    top:0;
    width:0;
    border:1px dotted;
    opacity: .5;
    -moz-opacity: .5;
    filter:alpha(opacity=50);
    zoom:1;
    background-color:#c3daf9;
    border-color:#3399bb;
}
.ext-strict .ext-ie .x-tree .x-panel-bwrap{
    position:relative;
    overflow:hidden;
}
.x-editable {
    color: #000;
}