Javascript ExtJS基于存储项动态创建元素
是否可以使用Javascript ExtJS基于存储项动态创建元素,javascript,extjs,Javascript,Extjs,是否可以使用store属性创建除Ext.panel.Grid之外的其他元素 比如说。假设我有一个面板: Ext.create('Ext.panel.Panel', { layout: 'vbox', scrollable: true, items: [ myItemsFunction() ] })); 从后端我得到了以下响应: { "rows": [ { "CreateDateTime": "2015-02-09 14:05:46",
store
属性创建除Ext.panel.Grid
之外的其他元素
比如说。假设我有一个面板:
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()
中,并在面板项中显示它(代码示例的第一块)
或者存储只能绑定到网格?您可以使用ExtJs存储,而不将其绑定到网格,因为Ext.data.store有一个代理,在调用store.load()时充当ajax请求 所以你可以找到这个有效的例子 基本思想是定义一个新的panel类,并使用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"
}]
}
为您的面板定义一个控制器 为afterrender创建事件函数 在它里面,装载你的商店 将回调参数传递给商店的load函数,在该函数中迭代加载的数据以创建按钮组件 调用
this.getView().add(button)
将按钮添加到面板项
属性