SenchaExt中的DataView实现table布局效果

最新推荐文章于 2016-11-23 16:30:35 发布
最新推荐文章于 2016-11-23 16:30:35 发布
阅读量690 收藏
点赞数
分类专栏： SenchaExtJs 文章标签： 界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rqs849469198/article/details/50440733
版权

在SenchaExt中，默认的DataView的样式是竖向排列，如何实现像table布局那样的表格排列呢？

其实实现起来也很简单，只需要修改item的默认样式即可，如下：

.mydataview .x-dataview-item{

    display:inline-block !important;

width: 250px;

height:100px;

}

将item的display属性修改为 inline-block，同时设置高度和宽度，即可实现

小太阳-双仔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
fast-dataview:JavaScript中的快速DataView实现
05-18
使用javascript的快速DataView实现，可以与Node.js Buffers一起使用。 为什么FastDataView速度快 它直接使用字节访问缓冲区。 例子 // buffer is an instance of ArrayBuffer or NodeJS Buffer. var dataview = ...
extjs表格(Ext4 Grid)文本启用选择复制功能
时光匆匆，留下足迹
12-05 2690
extjs提供了方便的表格组件grid供使用，但是默认情况下表格中的文本是不能被选中的，自然也是无法复制的。 而选择复制文本的需要也是很平常的，于是我们就需要自己动手来解决这个问题，实现extjs的grid文本选择复制功能。 说明一点，文中所列出的代码片断都是在当前ext 4.0.2a版本下的，其它版本未做测试，请自行斟酌。 首先自定义一下样式，来覆盖默认的css样式：
刷新grid的不显示loading效果
tang745163962的专栏
05-06 3032
viewConfig:{           loadMask:false        }, 解释： view : Ext.view.Table The Ext.view.Table used by the grid. ...   Ext.panel.Table view source viewConfig : Object A
使用ExtJS5 GridPanel实现表格嵌套SubGrid（基于ExtJS MVC模式）
Banboll 斑驳
11-23 3057
使用ExtJS-5.10 的 GridPanel组件实现表格嵌套,主要依赖于GridPanel自带的RowExpander插件，具体用法以及配置参数请参照API 这里有一个简单的表格嵌套Demo和大家分享，此Demo采用的是ExtJS MVC模式，要求对ExtJS 具有一定的了解。入口文件配置 SGEntry.js Ext.application({ name:'SubGrid',
将Ext.DataView组件发挥到极致
tanguoshuai的博客
04-28 366
前些日子在项目中使用到Ext.DataView组件，发现Ext.DataView组件非常的强大，基本上能满足各种html上呈现的需求。Ext.DataView组件必须和Ext.XTemplate结合起来使用，通过Ext.data.JsonStore动态取数据，达到动态生成DataView图形呈现的目的，下面附两幅图说明一下Ext.DataView的强大。 图一（文件夹管理）： ...
[转载]ExtJs4 笔记（11） Ext.ListView、Ext.view.View 数据视图
diankong6347的博客
05-17 111
本篇介绍两个用来展示数据的容器控件，分别是Ext.ListView和Ext.view.View。Ext.ListView就是大名鼎鼎的 Ext GridPanel的前身，不过现在的Ext4已经将它整合到GridPanel一起了，做一些简单的表格数据展示还是可以用到的。而 Ext.view.View则提供了通过模板自定义展示数据的方式，数据的展示形式不限于表格，可表现为灵活的方式，同时Ex...
Obsdian dataview中使用csv文件
06-01
Obsdian dataview中使用csv文件中的 csv文件
Exitjs获取DataView中图片文件名
10-29
Exitjs DataView 中图片文件名获取实现 Exitjs DataView 中图片文件名获取是指在 Exitjs 应用程序中，从 DataView 控件中获取图片文件名的实现过程。下面将详细介绍该实现过程中的关键步骤和相关知识点。 1. 前台...
C#中DataView的应用
04-23
在C#编程环境中，`DataView`是一个非常重要的数据处理组件，主要用来处理和展示`DataTable`中的数据。...在实际项目中，结合`DataSet`和`DataTable`，`DataView`常常用于实现复杂的业务逻辑和数据操作。
DataView或Repeater中的ASP.NET CheckBox命令
04-11
通过以上步骤，我们可以在`DataView`或`Repeater`中实现`CheckBox`的命令功能，使其不仅能作为用户界面元素，还能触发特定的业务逻辑。这样的设计使得在大量数据处理场景下，用户可以更方便地选择和操作数据。
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' });
Extjs 页面布局以及dataview的使用
weixin_34080571的博客
03-25 797
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...
Extjs DataView实例
oyzl68的专栏
04-20 6469
var tpl = new Ext.XTemplate(     ''     ,''     ,'{device_name}'     ,''     ,"设备型号{device_type_name}版本号{version_name} 连接状态 在线 用户数 [90/1000] CPU使用率 <span style='width:18%;display:inline-block
ExtJs4 笔记（11） Ext.ListView、Ext.view.View 数据视图
weixin_30662011的博客
12-22 92
《回到系列目录 本篇介绍两个用来展示数据的容器控件，分别是Ext.ListView和Ext.view.View。Ext.ListView就是大名鼎鼎的Ext GridPanel的前身，不过现在的Ext4已经将它整合到GridPanel一起了，做一些简单的表格数据展示还是可以用到的。而Ext.view.View则提供了通过模板自定义展示数据的方式，数据的展示形式不限于表格，可表现为灵活的方式，...
extjs 布局 layout---Table布局
u011123176的专栏
02-21 4236
Table 布局由类Ext.layout.TableLayout 定义.称为table,该布局负责把容器中的子元素按照类似普通html标签 (除了上述讲的这几种布局以外,还有fit 布局,form布局,accordion布局,card布局) var panel4 = new Ext.Panel({ renderTo:Ext.getBody(), title:'容器组件', heigh
Ext JS4学习教程+笔记（六）DataView面板
yanqlv的专栏
06-11 3169
Ext JS的DataView控件面板， 可以将一个列表中的数据以统一格式输出在页面上，其类名是Ext.view.View。 测试代码如下： function viewTest(){        var store = Ext.create('Ext.data.Store' ,{             fields: ['name', 'thumb' ],
DataView.Table
最新发布
06-13
在实际使用中，我们可以通过`DataView.Table`属性来获取DataView所关联的数据表，然后对数据表进行操作。例如： ```javascript var table = dataView.Table; var rowCount = table.Rows.Count; ``` 这样就可以获取...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值