extjs dataview 显示图片 横向

最新推荐文章于 2017-07-25 14:13:48 发布
最新推荐文章于 2017-07-25 14:13:48 发布
阅读量596 收藏
点赞数
文章标签： 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhao103804/article/details/84440786
版权

extjs 根据dataview控件来显示图片，该例子遇到的问题则是：

1、图片不在tomcat下，需要在指定的地址找到图片并显示，由于Jsp中的显示图片用绝对地址图片显示不了。所以需要用虚拟目录来得到指定的路径。

如果你不知道怎么配置虚拟路面，该链接中教你配置：

http://zhao103804.iteye.com/admin/blogs/1884343

2、图片加载出来是竖向的，查找资料原来，默认的排列方式是竖向的，需要横向的话，需要用data-view.css,该css在extjs资料中可以得到

 

效果如下：



 

主要的四个文件在附件中，分别为

data-view.css   data-view.js     data-view.jsp    data-view-plugins.js

 

πR平方
关注
ExtJS dataview全选方法
笔心
01-09 7175
ExtJS版本：4.1.0 在api中发先并未提供全选的直接调用方法，只提供了一个select， 当然按照select的参数说明，传入一个数组也可以达到全选的效果。 要想全选需要注意的一点是必须设置 multiSelect:true 另外就是通过Ext.selection.Model中的selectAll来实现。具体可以看下方的代码。 var bankStore=Ext.
extjs年份控件（只显示年，无月日时分秒）
03-06
Extjs DateField控件 - 只选择年份（找了很久发现网上只有选择年月的控件，于是基于extjs年月控件设计了只选择年份的控件）
Ext.DataView 图片列表显示
07-16
//得到后台的数据 var proxy = new Ext.data.HttpProxy({ url:showUrl, timeout:3600000 }); //分页参数 findParams ={start:0,limit:limit}; // reader 如何解析数据 var reader = new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},record); store = new Ext.data.Store({ proxy:proxy, reader:reader }); //尾 分页 var pagebar = new Ext.PagingToolbar({ store:store, pageSize:limit, displayInfo:true, displayMsg:'本页显示第{0}条到第{1}条的记录，一共{2}条。', emptyMsg:'没有记录' }); //有参数的分页 Ext.PagingToolbar.prototype.doLoad=function(start){ findParams.start = start; this.store.reload(); }; var dataview = new Ext.DataView({ store: store, tpl : tpl, id: 'phones', itemSelector: 'li.phone', overClass : 'phone-hover', singleSelect: true, multiSelect : false, autoScroll : true }); new Ext.Panel({ layout: 'fit', items : dataview, height: document.body.clientHeight, width: document.body.clientWidth, title: myTitle, bbar:pagebar, tbar : myTbar, renderTo: 'imageList' });
Ext4使用总结(七) Ext4使用view做图片的横向显示
思考
06-30 189
[code="javascript"] Ext.define('MyChart.view.FlowChart', { extend: 'Ext.view.View', alias: 'widget.myChart', itemId: 'myChart', autoScroll: true, loadMask: true, itemSel...
Extjs 表格横向自动扩展
tansitongba
09-21 220
extjs中的grid组件横向自动扩展，只要在grid的配置项中添加配置viewConfig var grid = new Ext.grid.EditorGridPanel( { title : "需审核记录列表", autoHeight : true, cm : cm, sm : csm, store : listStore, collapsible : true,...
extjs中横向滚动条的设置之一
小蜗牛的博客
07-25 4419
情况说明：用于显示的数据列数过多，必须用横向滚动条才能展示 在插入表格的div中修改如下：  <div id="griddata" style="overflow-x:scroll;width:100%;"></div>   还需要在js配置中设置宽度，width：1500px...
Extjs gridpanel 出现横向滚动条问题的解决方法
10-28
这个问题主要是由于GridPanel的宽度不足以容纳所有的列宽，因此浏览器会自动显示横向滚动条以便用户查看全部数据。本文将详细介绍如何解决这个在Extjs GridPanel中出现横向滚动条的问题。 首先，我们需要理解Extjs ...
Extjs 页面布局以及dataview的使用
weixin_34080571的博客
03-25 801
Ext.onReady(function(){ var myData = [ ['GE2', 'int.png',0,2], ['GE2', 'int.png',0,2], ['GE2', 'int.png',0,2], ['GE2', 'int.png',0,2], ['GE2', 'int.png',0,2], ['GE...
Extjs3.3 仿百度网盘 DataView 文件列表
软件维修师
12-05 8812
Extjs3.3 仿百度网盘 DataView 文件列表
Extjs图片展示组件实例
08-16
漂亮的Extjs图片展示组件实例，类似于幻灯片，可直接拿去用，非常不错的哦
Extjs显示图片
小和尚的专栏
06-08 601
Extjs并没有提供直接的组件来显示图片。网上通过设置textfield的InputType为Image然后再修改dom对象来实现，其实image的属性值并没有包含在Extjs的官方文档当中。可以通过以下的思路实现，更可以进一步扩展成自定义组件。推荐的方法如下: 1、首先做一个容器 Js代码   {       xtype: 'box', //或者xtype: 'c
EXtjs的可删除，可添加，可移动排序的图片DataView
花烛
06-21 1143
最近客户需求录入产品图片，要求界面好点，能上传图片预览，移动，删除等操作。 之前是很简单的一列6个file的input控件 由于后端系统是Extjs做的，找了很多案例都没有这样的，经典的一个Dataview是 http://extjs.org.cn/extjs/examples/view/data-view.html 可惜根本不能移动。或者官网都是一个panel移动到另
将Ext.DataView组件发挥到极致
tanguoshuai的博客
04-28 373
前些日子在项目中使用到Ext.DataView组件，发现Ext.DataView组件非常的强大，基本上能满足各种html上呈现的需求。Ext.DataView组件必须和Ext.XTemplate结合起来使用，通过Ext.data.JsonStore动态取数据，达到动态生成DataView图形呈现的目的，下面附两幅图说明一下Ext.DataView的强大。 图一（文件夹管理）： ...
Extjs 菜单树、如何单击树弹出tab、如何用DataView显示图片
ama7449的博客
10-10 173
效果图片： 树菜单的建立，这里将动态树的产生： 声明：homeTree var homeTree = new Neo.index.HomeTree({ collapsible : true, split : true, margins : '5 0 5 5', cmargins : '5 5 5 5' }); 其中这个Neo.ind...
extjs中dataview例子
superman
03-22 348
Ext.onReady(function(){         var myData = [         ['dance_fever.jpg', 'images/dance_fever.jpg',71.72,'9/1 12:00am'],         ['gangster_zack.jpg', 'images/gangster_zack.jpg',29.01,'9/1 12:00...
一个Ext.DataView / Ext.ListView扩展
czpae86x的专栏
07-06 305
在sencha论坛看到的扩展： 例子： Ext.onReady(function() { new Ext.Viewport({ layout: 'hbox', layoutConfig: { align: 'stretch' }, defaults: { f...
Extjs 多图片上传 并有图片预览功能
awe5566的专栏
10-13 8719
imagePanel = Ext.extend(Ext.Panel, { _form : null, _grid : null, _tree : null, _panel:null, constructor : function(_config) { if (_config == null) { _config = {}; } Ext.apply(this, _conf
extjs 图片上传带有预览功能
ytlizhen1的专栏
05-12 2322
xtype: 'textfield', //注意此处为textfield, inputType: 'image'      fieldLabel: '照片',      inputType: 'image',      width: 130,      height: 125,      id: 'emp_photo',      autoCreate : {       tag:'
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值