ExtJS 4.2 - How can I add a table to a panel?
Question
I´m trying to add this to a panel but I don´t know how:
This is a table and the container is a panel,and I don´t know how to do this in ExtJS 4.2,because the nearest thing is a grid,but I don´t want a grid.
1 answers
solution1
0 ACCPTED 2016-05-25 11:10:58
Finally I solved this with a form panel. Here is the code:
var tabla=new Ext.form.Panel({
bodyPadding: '0 0 0 0',
margin:'0 5 0 5',
bodyStyle: 'background-color:#f1f1f1;',
border:0,
items: [
{
xtype: 'container',
anchor: '100%',
layout: 'hbox',
items:[
{
xtype: 'container',
flex: 1,
layout: 'anchor',
items:[
{
xtype:'textfield',
readOnly:true,
anchor:'100%',
labelAlign: 'top',
labelSeparator: '',
fieldLabel: '--',
labelStyle: 'text-align: center;color:#f1f1f1;background-color:#f1f1f1;',
height:104,
fieldStyle: 'text-align: center;',
value:'NUEVO'
}
]
},
{
xtype: 'container',
flex: 1,
layout: 'anchor',
items:[
{
xtype:'textfield',
readOnly:true,
anchor:'100%',
labelAlign: 'top',
labelSeparator: '',
fieldLabel: '--',
labelStyle: 'text-align: center;color:#f1f1f1;background-color:#f1f1f1;',
fieldStyle: 'text-align: center;',
value:'GANADO',
height:44
},
{
xtype:'textfield',
margin:'-5 0 0 0',
readOnly:true,
anchor:'100%',
fieldStyle: 'text-align: center;',
value:'PERDIDO',
height:30
},
{
xtype:'textfield',
readOnly:true,
anchor:'100%',
fieldStyle: 'text-align: center;',
value:'PENDIENTE',
height:30
}
]
},
{
xtype: 'container',
flex: 1,
layout: 'anchor',
items:[
{
xtype:'textfield',
anchor:'100%',
labelAlign: 'top',
labelSeparator: '',
fieldLabel: 'VIGOR',
labelStyle: 'text-align: center;background-color:#f1f1f1;',
readOnly:true,
fieldStyle: 'text-align: right;',
height:44
},
{
xtype:'textfield',
margin:'-5 0 0 0',
readOnly:true,
anchor:'100%',
fieldStyle: 'text-align: right;',
height:30
},
{
xtype:'textfield',
readOnly:true,
anchor:'200%',
fieldStyle: 'text-align: right;',
height:30
}
]
},
{
xtype: 'container',
flex: 1,
layout: 'anchor',
items:[
{
xtype:'textfield',
anchor:'100%',
labelAlign: 'top',
labelSeparator: '',
fieldLabel: 'VENCIDO',
labelStyle: 'text-align: center;background-color:#f1f1f1;',
readOnly:true,
fieldStyle: 'text-align: right;',
height:44
},
{
xtype:'textfield',
margin:'-5 0 0 0',
readOnly:true,
anchor:'100%',
fieldStyle: 'text-align: right;',
height:30
}
]
}
]
},
{
xtype: 'container',
margin:'-5 0 0 0',
anchor: '100%',
layout: 'hbox',
items:[
{
xtype: 'container',
flex: 1,
layout: 'anchor',
items:[
{
xtype:'textfield',
readOnly:true,
anchor:'100%',
height:90,
fieldStyle: 'text-align: center;',
value:'MANTENIMIENTO'
}
]
},
{
xtype: 'container',
flex: 1,
layout: 'anchor',
items:[
{
xtype:'textfield',
readOnly:true,
anchor:'100%',
value:'GANADO',
fieldStyle: 'text-align: center;',
height:30
},
{
xtype:'textfield',
margin:'-5 0 0 0',
readOnly:true,
anchor:'100%',
fieldStyle: 'text-align: center;',
value:'PERDIDO',
height:30
},
{
xtype:'textfield',
readOnly:true,
anchor:'100%',
fieldStyle: 'text-align: center;',
value:'PENDIENTE',
height:30
}
]
},
{
xtype: 'container',
flex: 1,
layout: 'anchor',
items:[
{
xtype:'textfield',
readOnly:true,
anchor:'100%',
fieldStyle: 'text-align: right;',
height:30
},
{
xtype:'textfield',
margin:'-5 0 0 0',
readOnly:true,
anchor:'100%',
fieldStyle: 'text-align: right;',
height:30
},
{
xtype:'textfield',
readOnly:true,
anchor:'200%',
fieldStyle: 'text-align: right;',
height:30
}
]
},
{
xtype: 'container',
flex: 1,
layout: 'anchor',
items:[
{
xtype:'textfield',
readOnly:true,
anchor:'100%',
fieldStyle: 'text-align: right;',
height:30
},
{
xtype:'textfield',
margin:'-5 0 0 0',
readOnly:true,
anchor:'100%',
fieldStyle: 'text-align: right;',
height:30
}
]
}
]
}
]
});
And this is an image of the result:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can i use same xtype multiple time within same panel Extjs 4.2?
How can I open a grid in a panel in extJS?
ExtJS 4.2 How can I get all the stores of a view?
Extjs 4.2, how to I create a frame around the panel body with rounded corners
EXTJS: How can I add an click event on Icon node in a Tree Panel
Fixing the size of a panel extjs 4.2
How to i add horizontal scrollbar in my Extjs Ext.Panel?
ExtJS add panel to panel
How can I put a dropdown in the header of an ExtJS panel?
Can't add a button to a panel extJS
Related Tags