在ExtJS里遍历显示图片

2019独角兽企业重金招聘Python工程师标准>>>

代码采用MVC模式，关键代码如下：

controller层

if (panelsArray.length == 0) {
            var editPropertyData = Ext.widget('ContractFind').show();
            var form = editPropertyData.down('form');
            form.getForm()
                    .loadRecord(grid.getSelectionModel().getSelection()[0]);
            
                    
            var conid = select.get('conid');
            var conthistoryreason = select.get('conthistoryreason');
            
            var flag = document.getElementById('div333');
                                        if(flag==null){
                                            //创建一个div
                                            var div = document.createElement('div');
                                            //设置div的属性
                                            div.innerHTML = conthistoryreason; //设置显示的数据，可以是标签．
//                                            div.style.background = "blue";//设置css样式,s设置背景颜色\
                                            div.style.overflow = "auto";//设置css样式,overflow:auto\
                                            div.id='div333';
                                            var bo = document.body;//获取body对象.
                                            //动态插入到body中
                                            bo.insertBefore(div,bo.lastChild);
                                            
                                        }
            
            //获取图片数据源,传参并加载
            var StoreTP = Ext.getCmp('pattstoidfj').getStore();
            params = " and o.archiveid="+conid+" and o.pattachmenttype=2";
            params = escape(params);
            StoreTP.on("beforeload", function(store, options) {
                    Ext.apply(store.proxy.extraParams, {
                                params : params
                            });
                });
            StoreTP.load();        
                    
                    
//            editPropertyData.show();
}

view层

function showimg(o){
    
            var editPropertyData = Ext.widget('ImgFind');
            
            Ext.getCmp("imglooks")
                    .setSrc(o.src);
            editPropertyData.show();
        
}

//图片宫格主要用了ExtJs的DataView，这段代码写在view层的最上面，作用是展示从后台取到的图片。可以用html标签展示。
//“var imageTpl”是给下面的一个引用
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
       '<div style="margin-bottom: 10px; margin:18px;float:left" class="thumb-wrap">',
          '<img width="150" onclick="showimg(this)" height="180" src="'+getRootPath()+'/images/property/'+'{pattachmentimgpath}">',
          '<br/><span align="center">{pattachmentname}</span>',
        '</div>',
           '</tpl>'
);

Ext.define('hwxx.view.find.PropertyFind', {

。。。。。

xtype: 'tabpanel',
                    activeTab: 0,
                    items: [
                    {
                      xtype: 'panel',
                            title: '宣传图列表',
                            items: [
                                {
                                    xtype: 'dataview',
                                    height: 217,
                                    store:'PattachmentStoDBTP',
                                    id:'pattstoidtp',
                                    name:'dbimgstp',
                                    autoScroll: true,
//                                    title : '图片列表',
                                    tpl: imageTpl,
                                    itemSelector: 'div.thumb-wrap',
                                    emptyText: '没有可用的图片'
}
}
}

转载于:https://my.oschina.net/u/1765449/blog/272339