Javascript extjs panelgrid替代方案
浏览ExtJS文档时,我在名称中迷失了方向,找不到所需的组件。我想显示如下对象的属性: 姓名:姓名 地址:地址 对于JSF,我将使用带有outputText标记的panelgrid。有这样的组件吗? 还有一件事:我想让这个面板像手风琴或类似的东西一样“可关闭”,这样用户可以在不需要时隐藏信息,但我无法使手风琴面板的大小适应内容。当我在primefaces中使用accordionpanel时,如果内容发生更改,面板的大小将调整。使用ExtJS有什么方法可以做到这一点吗?好吧,这个怎么样:Javascript extjs panelgrid替代方案,javascript,extjs,extjs4,accordion,Javascript,Extjs,Extjs4,Accordion,浏览ExtJS文档时,我在名称中迷失了方向,找不到所需的组件。我想显示如下对象的属性: 姓名:姓名 地址:地址 对于JSF,我将使用带有outputText标记的panelgrid。有这样的组件吗? 还有一件事:我想让这个面板像手风琴或类似的东西一样“可关闭”,这样用户可以在不需要时隐藏信息,但我无法使手风琴面板的大小适应内容。当我在primefaces中使用accordionpanel时,如果内容发生更改,面板的大小将调整。使用ExtJS有什么方法可以做到这一点吗?好吧,这个怎么样: Ext.
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
collapsible: true,
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
那么,这个怎么样:
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
collapsible: true,
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
所以它叫colapsible。。。谢谢你,这部分很有用。:)虽然我希望显示简单的键值对,但仍呈现属性。我不想将它们放入表中,因为只有一行,而且看起来不太好。@Peter如果您只想显示一个对象的一些属性,我会将其硬编码到html属性中,如
html:'Name:'+obj.Name+'Address:'+obj.Address+'
您也可以对一行使用but已经太多了,所以它叫colapsible。。。谢谢你,这部分很有用。:)虽然我希望显示简单的键值对,但仍呈现属性。我不想将它们放入表中,因为只有一行,而且看起来不太好。@Peter如果您只想显示一个对象的一些属性,我会将其硬编码到html属性中,如html:'Name:'+obj.Name+'Address:'+obj.Address+'
您也可以对一行使用but已经太多了。