PDA

View Full Version : DataView and 100% height



_piotr
18 May 2012, 1:57 AM
I've read many posts about dataview and height property, however I didn't found a solution which worked for me.

A problem is trivial: "Dataview type does not show children".
It is like a float property for DIV element and an absolut position without overflow: hidden.

I have:


Ext.definde('App.view.Viewport', {
extend: 'Ext.viewport.Default',
config: {
fullscreen: true,
layout: { type: 'card' },
items: [
{
xtype: 'formpanel',
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'dataview',
store: 'MyStore',
itemTpl; '<div>{ProductName}</div>
}
]
}
]
}
]
}
}


When I add height: 100 for dataview, so It works. However height: '100%' does not work. I've tried allmost everything - I think (for example: layout: 'fit' align: 'stretch' for Panel form (parent) or layout: 'vbox' for parent and flex number for children).

What is special with dataview, at it does not work for it whereas there is no problems with textfield etc?

scottmartin
18 May 2012, 8:34 PM
Did you simply type this code in from memory? There are numerous errors:
Why are you nesting a dataview inside a fieldset that is inside a formpanel?

If you do not specify a height, then your parent container must be a layout that will size the child element
fit, anchor, etc.



Ext.definde('App.view.Viewport', {
extend: 'Ext.viewport.Default',
config: {
fullscreen: true,
layout: { type: 'card' },
items: [
{
xtype: 'formpanel',
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'dataview',
store: 'MyStore',
itemTpl; '<div>{ProductName}</div>
}
]
}
]
}
]
}
});


Scott

_piotr
20 May 2012, 11:02 PM
Thanks for response, Scott! Yes, I've wrote it in from memory :)
What should it be instead of Ext.viewport.Default? Should I repleace it with Ext.Panel? I am using formpanel because I have also another elements such as textfields, selectfields, etc. I've just wanted to split it so it looks nice.

I've tried layout fit both on dataview, formpanel og panel with nested dataview. Without any luck :/

Thanks for helping!

scottmartin
21 May 2012, 6:18 AM
The fully qualified is: Ext.container.Viewport

Scott.

scottmartin
21 May 2012, 10:01 AM
Might I also suggest you have a look at our designer:
http://www.sencha.com/products/architect

It makes it very easy to design screens with a GUI interface (DnD)

Scott.