extjs - ExtJS 中基于 store 的卡片列表
问题描述
在我的 ExtJS 项目中,我有一个绑定到商店的网格,但我想取消网格的布局并改用卡片,类似于这个 angular sample。
Sencha 是否有任何容器组件可以存储并将所有记录呈现到自定义模板中?(基于排序/过滤)
从网格派生有点太多的工作,覆盖原始模板会破坏各种事情。
解决方案
您可以使用 extjs 中的 dataview 执行此操作,这里是Demo
Ext.application({
name: 'Fiddle',
launch: function () {
var items = Ext.create('Ext.data.Store', {
autoLoad: true,
storeId: 'item-store',
fields: ['name'],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
rootProperty: ''
}
}
});
Ext.create('Ext.panel.Panel', {
title: 'DataView',
height: 620,
bodyPadding: 10,
viewModel: [{
stores: {
itemStore: {
type: 'item-store'
}
},
data: {
name: '',
desc: ''
}
}],
items: [{
xtype: 'dataview',
tpl: [
'<tpl for=".">',
'<div class="dataview-item">',
'<p>{desc}</p>',
'</div>',
'</tpl>'
],
itemSelector: 'div.dataview-item',
store: items
}],
renderTo: Ext.getBody()
});
}
});
推荐阅读
- amazon-web-services - AWS V3 教程 - 创建和使用 Lambda 函数
- python - 在 python 中使用 Twitter 的 API 的 HTTP 错误 405
- dictionary - 关于修改 PyDictKeyEntry
- c# - 如何将小数除以固定位数,四舍五入?
- python - 试图查看一列是否等于另一列
- yaml - 如何将环境变量值添加到 YAML 文件?
- c# - 如何使用 c# 提取 .img 文件
- javascript - 有谁知道为什么我的
离上面的线那么远吗?
- c# - 在 Global.asax Application_EndRequest 函数中获取响应内容长度?
- facebook - 我可以在 Facebook Instant Games 中使用 ThreeJS 制作 3D 游戏吗?