GridPanel之DataView使用

灰太狼 2021-09-10 06:38 266阅读 0赞

在ext的扩展中为我们提供了实现多行多列效果DataView

var dataview = new Ext.DataView(\{

tpl:new Ext.XTemplate(

'<ul>',

'<tpl for=".">',

'<li>',

'<img width="64" height="64" src="\{\[values.spic\]\}" />',   //values 即store的record

'</li>',

'</tpl>',

'</ul>'

),

store: \[\],

plugins : \[

new Ext.ux.DataViewTransition(\{

duration   : 550,

idProperty: 'id'

\})

\],

id: 'ImgList',

itemSelector: 'li.phone',

overClass: 'phone-hover',

singleSelect: true,

multiSelect: true,

autoScroll: true

\});

var store = new Ext.data.ArrayStore(\{

proxy:new Ext.data.HttpProxy(\{

url:'/Bas/Data/Bas\_GetImgListBypItemId.ashx?itemid=<% =\_itemid %>',

method: 'GET'

\}),

fields:\['id', 'itemid', 'isremote', 'source', 'spic', 'bpic', 'mpic', 'up\_time'\],

sortInfo:\{

field: 'id',

direction: 'ASC'

\},

listeners:\{load:function(s,r,o)\{

var \_dv = Ext.getCmp("ImgList");

if(\_dv)\{

\_dv.bindStore(s);

\}

\}\}

\});

store.load();

new Ext.Panel(\{

title: '图片列表',

layout: 'fit',

items: dataview,

anchor:'100%',

height:300,

renderTo:'dvImg'

\});

最终效果 [![Ext使用：GridPanel之DataView使用][Ext_GridPanel_DataView]][Ext_GridPanel_DataView_Ext_GridPanel_DataView]

[Ext_GridPanel_DataView]: http://s3.sinaimg.cn/middle/43f0b2bbg9809bb24a732&690
[Ext_GridPanel_DataView_Ext_GridPanel_DataView]: /images/20210726/35e5b50b36f946bbae0848bc24e2b7e2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，266人围观）

还没有评论，来说两句吧...

相关阅读

相关 GridControl内使用DataView、DataTable、GridControl说明

GridControl的数据源（DataSource)在绑定数据时，到底是要用DataView还是直接用DataTable，一直较困惑。在下例中： DataSet

缺乏、安全感/ 2023年08月17日 16:01/ 0 赞/ 143 阅读

相关 DataTable、DataView、DataRowView

一、DataTable DataTable表示内存中数据的一个表，它完全是在内存中的一个独立存在，包含了这张表的全部信息DataTable可以是从通过连接从数据库

淩亂°似流年/ 2022年08月13日 13:51/ 0 赞/ 306 阅读

相关 Extjs之GridPanel用法详解

Extjs GridPanel 提供了非常强大数据表格功能，在GridPanel可以展示数据列表，可以对数据列表进行选择、编辑等。在之前的[Extjs MVC开发模式详解][E

Bertha 。/ 2022年08月10日 05:55/ 0 赞/ 432 阅读

相关 extjs之-gridpanel操作

var cm = new Ext.grid.ColumnModel(\[new Ext.grid.RowNumberer(), sm, \{

曾经终败给现在/ 2022年07月15日 07:53/ 0 赞/ 248 阅读

相关 [C#] DataView用法

在实际编程工程中，常常遇到这样的情况：DataTable并不是数据库中的，或者DataTable尚未写到数据库，或者从数据库中读出的DataTable已经在本地被改动，又没有写

偏执的太偏执、/ 2022年05月26日 05:36/ 0 赞/ 318 阅读

相关 ArrayBuffer, DataView和TypedArray

ArrayBuffer `ArrayBuffer`对象用于表示哦通用的、固定长度的原始二进制数据缓冲区。 `ArrayBuffer`对象不能直接操作，而要通过`Typ

我就是我/ 2022年02月21日 15:51/ 0 赞/ 224 阅读

相关 ExtJs gridPanel添加数据

向gridPanel添加数据数据模型： Ext.define("xx.xxModel",{ extend:"Ext.data.Model", field:[ {n

忘是亡心i/ 2021年09月14日 12:04/ 0 赞/ 451 阅读

相关 ExtJs之gridPanel实例

需求完整的extjs自定义实例（没有异步加载数据） -------------------- 效果图 ![这里写图片描述][SouthEast] -----

男娘i/ 2021年09月14日 10:16/ 0 赞/ 421 阅读

相关 ExtJs之gridPanel

需求 Extjs GridPanel 提供了非常强大数据表格功能，在GridPanel可以展示数据列表，可以对数据列表进行展示、选择、编辑等 -------------

比眉伴天荒/ 2021年09月14日 10:16/ 0 赞/ 534 阅读

相关 GridPanel之DataView使用

在ext的扩展中为我们提供了实现多行多列效果DataView var dataview = new Ext.DataView(\{

灰太狼/ 2021年09月10日 06:38/ 0 赞/ 267 阅读