代码采用MVC模式,关键代码以下:css
controller层html
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层app
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: '没有可用的图片' } } }