是否可以使用Ext.panel.Grid
属性创建除store
以外的其他元素?
例如。可以说我有一个小组:
Ext.create('Ext.panel.Panel', {
layout: 'vbox',
scrollable: true,
items: [
myItemsFunction()
]
}));
然后从后端我得到这个响应:
{
"rows": [
{
"CreateDateTime": "2015-02-09 14:05:46",
"Name": "de.txt",
"id": "1"
},
{
"CreateDateTime": "2015-02-09 14:05:46",
"Name": "en.txt",
"id": "2"
},
{
"CreateDateTime": "2015-02-09 14:05:46",
"Name": "it.txt",
"id": "3"
}]
}
我在商店中加载的:
var store_documents = Ext.create('Ext.data.Store', {
remoteSort: true,
remoteFilter: true,
proxy: {
type: 'ajax',
api: {
read: baseURL + '&SubFunc=Documents&Action=view',
},
reader: { type: 'json', rootProperty: 'rows', totalProperty: 'total' }
},
autoLoad: true
});
现在,假设我要为这三个文件(de.txt,en.txt,it.txt)具有下载按钮。如何根据商店商品动态创建它们?我想将其放在此myItemsFunction()
中并显示在面板项目中(代码示例的第一块)?
还是商店只能与Grid绑定?
答案 0 :(得分:1)
您可以使用ExtJs存储而不将其绑定到网格,因为Ext.data.Store有一个代理,当您调用store.load()时它充当ajax请求。
因此您可以找到这个有效的示例ExtJs Fiddle 基本思想是定义一个新的面板类,并使用initComponent()函数来允许您基于从请求中检索到的数据来创建动态项目。
app.js
Ext.application({
name: 'Fiddle',
launch: function () {
var storeData = {};
let store = Ext.create('Ext.data.Store', {
storeId: 'myStoreId',
fields: ['id', 'name'],
proxy: {
type: 'ajax',
url: 'app/data.json',
reader: {
type: 'json',
rootProperty: 'rows'
}
}
});
store.load(function(){
storeData = this.getData().items;
Ext.create('Fiddle.MyPanel',{panelData:storeData});
});
}
});
app / MyPanel.js
Ext.define('Fiddle.MyPanel', {
extend: 'Ext.panel.Panel',
renderTo: Ext.getBody(),
title: 'Dynamic button creation',
width: 600,
height: 300,
initComponent: function () {
let panelItems = [];
//Creating items dynamicly
for (btn in this.panelData) {
let me = this;
panelItems.push(
Ext.create('Ext.button.Button', {
text:me.panelData[btn].data.Name
})
);
}
this.items = panelItems;
//must call this.callParent()
this.callParent();
}
})
app / data.json
{
"rows": [
{
"CreateDateTime": "2015-02-09 14:05:46",
"Name": "de.txt",
"id": "1"
},
{
"CreateDateTime": "2015-02-09 14:05:46",
"Name": "en.txt",
"id": "2"
},
{
"CreateDateTime": "2015-02-09 14:05:46",
"Name": "it.txt",
"id": "3"
}]
}
答案 1 :(得分:1)
为您的面板定义一个控制器;
创建一个供事后渲染的事件函数;
在里面,加载您的商店;
将回调参数传递到商店的加载函数,在其中迭代遍历加载的数据以创建按钮组件;
调用this.getView().add(button)
将按钮添加到面板的items
属性