文档章节

在ExtJS里遍历显示图片

你我青春时
 你我青春时
发布于 2014/06/04 14:58
字数 326
阅读 4626
收藏 3

代码采用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: '没有可用的图片'
}
}
}


© 著作权归作者所有

你我青春时
粉丝 1
博文 20
码字总数 2690
作品 0
武汉
后端工程师
私信 提问
ExtJs4.1目录结构介绍和使用说明

一、在做ExtJs开发之前首先要到网站上下载ExtJs的开发包,我用的最新版本是4.1.1。此版本相对于之前的版本目录结构发生了一些变化,没有了adapter目录, 目录结构如下 文件/文件夹名的作用:...

Junn
2013/01/17
6.3K
1
ExtJs自学教程(1):一切从API开始

该系列文章不侧重全方位的去介绍ExtJs的使用,只是侧重于解决ExtJs问题的思考方法。写的人不用长篇大论,学的人则能够自立更生。l 学习的人只要有一些CSS的javascript的基础知识并且对于英文...

77970290
2013/05/07
276
0
ExtJS开发环境的搭建,spket工具安装详解

集成:ExtJS,MyEcplise和Spket。 前提:安装好的myecplise(我用的是MyEcplise10) 步骤: 先安装Spket 1 下载Spket的jar文件,spket-1.6.18.jar 2 将jar文件解压到MyEcplise的dropins文件夹...

day戴
2014/09/04
4.7K
0
Extjs GridPanel用法详解

创建GridPanel 要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来定义Model: //1.定义ModelExt.define("MyApp.model.User", { }); 然后创建Store: //...

鱼煎
2017/11/02
101
0
Extjs Window用法详解

创建Extjs Window 创建Extjs Window的代码如下: //创建windowvar win = Ext.create("Ext.window.Window", { }); 代码中的Form可以参考《Extjs Form用法详解》。显示效果如下: 显示Extjs W......

鱼煎
2017/11/02
89
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot Actuator监控应用

微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的处理和传递,出现异常如何快速定位便成...

zw965
17分钟前
4
0
高性能最终一致性框架Ray之基本概念原理

一、Actor介绍 Actor是一种并发模型,是共享内存并发模型的替代方案。 共享内存模型的缺点: 共享内存模型使用各种各样的锁来解决状态竞争问题,性能低下且让编码变得复杂和容易出错。 共享内...

程序员修BUG
17分钟前
4
0
如何去掉子集合功能中的按钮?

解决方案: 1、找到子集合字段 2、打开字段详细信息,在辅助配置里面进行配置 加入JEPaaS技术交流群,了解更多

JEPaaS云平台
18分钟前
5
0
创龙TI KeyStone C66x多核定点/浮点DSP TMS320C665x + Xilinx Artix-7 FPGA处理器;

广州创龙结合TI KeyStone系列多核架构TMS320C665x及Xilinx Artix-7系列FPGA设计的TL665xF-EasyEVM开发板是一款DSP+FPGA高速大数据采集处理平台,其底板采用沉金无铅工艺的6层板设计,适用于高...

Tronlong创龙
21分钟前
4
0
hbuilder打包常用android权限配置

常用android权限配置 - 开启相机权限 - 允许程序通过WiFi或移动基站的方式获取用户错略的经纬度信息 - 允许程序通过GPS芯片接收卫星的定位信息 - 允许程序获取模拟定位信息,一般用于帮助开发...

小草先森
21分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部