ExtJS 如何在面板中显示商店数据
ExtJS how to display store data in a panel
我想要在面板中显示类似这样的内容:
面板标题
测试
地址:123 Land Dr, NY 12345
地址2:234 Some Dr, CA 34590
测试2
地址 3:123 Land Dr, NY 12345
地址4: 234 Some Dr, CA 34590
我已经创建了一个模型和一个商店,它们将 return 相应地处理数据。
我如何显示这些数据?我按如下方式创建了一个面板,但没有要填充的记录。使用 XTemplate 更容易吗?如果是,我该如何使用它?
商店:
Ext.define('BuildingInfoStore', {
extend: 'Ext.data.Store',
requires: ['BuildingInfoModel'],
model: 'BuildingInfoModel',
storeId: 'BuildingInfoStore',
data : [
[ 'Address3', 'Address4', 'Address5', 'Address6' ]
]
});
面板:
Ext.define('BuildingInfo', {
extend: 'Ext.panel.Panel',
autoScroll: true,
initComponent: function () {
items = [
{
xtype: 'fieldset',
title: 'TEST',
items :[
{
xtype: 'displayfield',
fieldLabel: 'Address6'
},
{
xtype: 'displayfield',
fieldLabel: 'Address5'
}
]
},
{
xtype: 'fieldset',
title: 'TEST2',
width: 700,
items :[{
xtype: 'displayfield',
fieldLabel: 'Address4'
},
{
xtype: 'displayfield',
fieldLabel: 'Address3'
}
]
}
this.items = items;
this.callParent();
}
});
如果使用模板,我正在尝试这样的事情(在 Deepak P 的帮助下从下面的答案中得到帮助)
{
title: 'Building Details',
id: 'westContainer',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 550,
split: true,
collapsible: true,
layout: 'fit',
items: [
new Ext.DataView({
store : 'ExtjsView.store.BuildingInfoStore',
tpl:new Ext.XTemplate(
'<div class="wrap">',
'<tpl for=".">', // process the data.kids node
'<p>{#}. {name}, Address1: {address1},Address2: {address2}</p>', // use current array index to autonumber
'<p>Address3: {address3},Address4: {address4}</p></br>',
'</tpl></div>'
),
renderTo: Ext.getBody(),
itemSelector: 'div.wrap',
autoHeight : true,
emptyText : 'No Data'
})
]
},
已更新
您的模特:
Ext.define('BuildingInfoModel', {
extend : 'Ext.data.Model',
fields : [
{
name : 'address',
type : 'string'
},
{
name : 'address2',
type : 'string'
},
{
name : 'address3',
type : 'string'
},
{
name : 'address4',
type : 'string'
}
]
});
您的店铺:
Ext.define('BuildingInfoStore', {
extend: 'Ext.data.Store',
requires: ['BuildingInfoModel'],
model: 'BuildingInfoModel',
storeId: 'BuildingInfoStore',
data : [
[ 'Address3', 'Address4', 'Address5', 'Address6' ]
]
});
试试这个,如果你喜欢它,请标记为已回答:
Ext.define('BuildingInfo', {
extend: 'Ext.Panel',
alias: 'widget.buildingInfo',
xtype: 'buildingInfo',
layout: 'form',
resizable: true,
border: 'fit',
items: [{
xtype: 'form',
items: [{
xtype: 'fieldset',
title: 'TEST',
items: [{
xtype: 'displayfield',
name: 'address4',
fieldLabel: 'Address4'
}, {
xtype: 'displayfield',
name: 'address3',
fieldLabel: 'Address3'
}]
}, {
xtype: 'fieldset',
title: 'TEST2',
width: 700,
items: [{
xtype: 'displayfield',
name: 'address2',
fieldLabel: 'Address2'
}, {
xtype: 'displayfield',
name: 'address',
fieldLabel: 'Address'
}]
}]
}],
listeners: {
afterrender: function(component, eOpts){
var store = Ext.getStore('BuildingInfoStore');
if(!Ext.isEmpty(store)) {
var form = component.down('form');
form.loadRecord(store.last());
}
}
}
});
您可以将其粘贴到煎茶中 fiddle 并检查。
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
title: 'Hello',
//TEST Address: 123 Land Dr, NY 12345 Address2: 234 Some Dr, CA 34590
//Test2 Address3: 123 Land Dr, NY 12345 Address4: 234 Some Dr, CA 34590
data:[{
name: 'Test',
address1: '123 Land Dr, NY 12345',
address2: '234 Some Dr, CA 34590',
address3: '123 Land Dr, NY 12345',
address4: '234 Some Dr, CA 34590',
},{
name: 'Test123',
address1: '123 Land Dr, NY 12345',
address2: '234 Some Dr, CA 34590',
address3: '123 Land Dr, NY 12345',
address4: '234 Some Dr, CA 34590',
}],
tpl:new Ext.XTemplate(
'<tpl for=".">', // process the data.kids node
'<p>{#}. {name}, Address1: {address1},Address2: {address2}</p>', // use current array index to autonumber
'<p>Address3: {address3},Address4: {address4}</p></br>',
'</tpl>'
),
renderTo: Ext.getBody()
});
}
});
我想要在面板中显示类似这样的内容:
面板标题
测试 地址:123 Land Dr, NY 12345 地址2:234 Some Dr, CA 34590
测试2 地址 3:123 Land Dr, NY 12345 地址4: 234 Some Dr, CA 34590
我已经创建了一个模型和一个商店,它们将 return 相应地处理数据。 我如何显示这些数据?我按如下方式创建了一个面板,但没有要填充的记录。使用 XTemplate 更容易吗?如果是,我该如何使用它?
商店:
Ext.define('BuildingInfoStore', {
extend: 'Ext.data.Store',
requires: ['BuildingInfoModel'],
model: 'BuildingInfoModel',
storeId: 'BuildingInfoStore',
data : [
[ 'Address3', 'Address4', 'Address5', 'Address6' ]
]
});
面板:
Ext.define('BuildingInfo', {
extend: 'Ext.panel.Panel',
autoScroll: true,
initComponent: function () {
items = [
{
xtype: 'fieldset',
title: 'TEST',
items :[
{
xtype: 'displayfield',
fieldLabel: 'Address6'
},
{
xtype: 'displayfield',
fieldLabel: 'Address5'
}
]
},
{
xtype: 'fieldset',
title: 'TEST2',
width: 700,
items :[{
xtype: 'displayfield',
fieldLabel: 'Address4'
},
{
xtype: 'displayfield',
fieldLabel: 'Address3'
}
]
}
this.items = items;
this.callParent();
}
});
如果使用模板,我正在尝试这样的事情(在 Deepak P 的帮助下从下面的答案中得到帮助)
{
title: 'Building Details',
id: 'westContainer',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 550,
split: true,
collapsible: true,
layout: 'fit',
items: [
new Ext.DataView({
store : 'ExtjsView.store.BuildingInfoStore',
tpl:new Ext.XTemplate(
'<div class="wrap">',
'<tpl for=".">', // process the data.kids node
'<p>{#}. {name}, Address1: {address1},Address2: {address2}</p>', // use current array index to autonumber
'<p>Address3: {address3},Address4: {address4}</p></br>',
'</tpl></div>'
),
renderTo: Ext.getBody(),
itemSelector: 'div.wrap',
autoHeight : true,
emptyText : 'No Data'
})
]
},
已更新
您的模特:
Ext.define('BuildingInfoModel', {
extend : 'Ext.data.Model',
fields : [
{
name : 'address',
type : 'string'
},
{
name : 'address2',
type : 'string'
},
{
name : 'address3',
type : 'string'
},
{
name : 'address4',
type : 'string'
}
]
});
您的店铺:
Ext.define('BuildingInfoStore', {
extend: 'Ext.data.Store',
requires: ['BuildingInfoModel'],
model: 'BuildingInfoModel',
storeId: 'BuildingInfoStore',
data : [
[ 'Address3', 'Address4', 'Address5', 'Address6' ]
]
});
试试这个,如果你喜欢它,请标记为已回答:
Ext.define('BuildingInfo', {
extend: 'Ext.Panel',
alias: 'widget.buildingInfo',
xtype: 'buildingInfo',
layout: 'form',
resizable: true,
border: 'fit',
items: [{
xtype: 'form',
items: [{
xtype: 'fieldset',
title: 'TEST',
items: [{
xtype: 'displayfield',
name: 'address4',
fieldLabel: 'Address4'
}, {
xtype: 'displayfield',
name: 'address3',
fieldLabel: 'Address3'
}]
}, {
xtype: 'fieldset',
title: 'TEST2',
width: 700,
items: [{
xtype: 'displayfield',
name: 'address2',
fieldLabel: 'Address2'
}, {
xtype: 'displayfield',
name: 'address',
fieldLabel: 'Address'
}]
}]
}],
listeners: {
afterrender: function(component, eOpts){
var store = Ext.getStore('BuildingInfoStore');
if(!Ext.isEmpty(store)) {
var form = component.down('form');
form.loadRecord(store.last());
}
}
}
});
您可以将其粘贴到煎茶中 fiddle 并检查。
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
title: 'Hello',
//TEST Address: 123 Land Dr, NY 12345 Address2: 234 Some Dr, CA 34590
//Test2 Address3: 123 Land Dr, NY 12345 Address4: 234 Some Dr, CA 34590
data:[{
name: 'Test',
address1: '123 Land Dr, NY 12345',
address2: '234 Some Dr, CA 34590',
address3: '123 Land Dr, NY 12345',
address4: '234 Some Dr, CA 34590',
},{
name: 'Test123',
address1: '123 Land Dr, NY 12345',
address2: '234 Some Dr, CA 34590',
address3: '123 Land Dr, NY 12345',
address4: '234 Some Dr, CA 34590',
}],
tpl:new Ext.XTemplate(
'<tpl for=".">', // process the data.kids node
'<p>{#}. {name}, Address1: {address1},Address2: {address2}</p>', // use current array index to autonumber
'<p>Address3: {address3},Address4: {address4}</p></br>',
'</tpl>'
),
renderTo: Ext.getBody()
});
}
});