PDA

View Full Version : Strange behavior: Not appearing xtype-elements in layout: "table"



anfla
30 May 2012, 3:54 AM
Hello community,

I'm encountering a little problem. I'm creating some elements by using the xtype-properties. It works very well, but in a certain case it won't show me any subelements added with the property items[].

My code:


var footabs = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
plain:true,
defaults:{autoScroll: true},
items : [{
xtype : "panel",
autoHeight: true,
title : "bar1",
listeners: {
activate: function() {
alert("Unleashing foo rage");
}
},
items: [{
xtype: "fieldset",
layout: "table",
items: [{
xtype: "grid",
columns: [
{header: 'foo', dataIndex: 'fooa'},
{header: 'bar', dataIndex: 'foob'},
{header: 'foo', dataIndex: 'fooc'},
{header: 'bar', dataIndex: 'food'},
{header: 'foo', dataIndex: 'fooe'}
]
},
{
xtype: "spacer",
width: 25
},
{
xtype: "fieldset",
title: "TEXT",
items: [{
xtype: "button",
text: "NOT APPEARING BUTTON"
}]
}]
},
{
xtype: "fieldset",
layout: "table",
items: [{
xtype: "button",
text: "< foo"
},
{
xtype: "spacer",
width: 10
},
{
xtype: "button",
text: "bar >"
}]
}]
}]
});

My button, labeled as "NOT APPEARING BUTTON", is - no joke - not appearing. Other elements, within my fieldset "TEXT", aren't working, too. Everything else is working fine. If I replace the fieldset with my button, my button is appearing. Am I missing something?

sword-it
30 May 2012, 4:59 AM
Hi,

Try to use anchor layout for button's container:


{
xtype: "fieldset",
layout: "anchor",
items: [
{
xtype: "grid",
columns: [
{ header: 'foo', dataIndex: 'fooa' },
{ header: 'bar', dataIndex: 'foob' },
{ header: 'foo', dataIndex: 'fooc' },
{ header: 'bar', dataIndex: 'food' },
{ header: 'foo', dataIndex: 'fooe' }
]
},
{
xtype: "spacer",
width: 25
},
{
xtype: "fieldset",
title: "TEXT",
items: [{
xtype: "button",
text: "NOT APPEARING BUTTON"
}]
}
]
}

anfla
30 May 2012, 5:34 AM
Okay, that works, but it breaks the design of my application. Is there any explanation for this behaviour? And is there (another) clever way for placing elements table-like?

darthwes
30 May 2012, 5:43 AM
Your fieldset probably needs to be inside a form...Just my $.02

Your button and/or fieldset need heights.

anfla
30 May 2012, 6:11 AM
I tried both ways and failed so far. :/ That's strange.. I can't remember that kind of behavior from my last work with Ext JS.

It's related to the "table"-layout fieldset. As long as I use another layout, my elements within my "TEXT" fieldset appear. Otherwise no elements, buttons or not, won't show up.

anfla
30 May 2012, 6:28 AM
html: '<input type="button" value="BUTTON!">',

Works, by the way. But that's more than just dirty. :/

anfla
30 May 2012, 11:04 PM
Okay, I wasn't able to fix my problem and found a new one:



xtype: "form",
layout: "anchor",
height: 300,
items: [{
xtype: "container",
colspan: 2,
layout: "form",
items: [{
xtype: "button",
text: "BUTTON!"
}]
}]



Works, so far. If I add a fixed width for the anchor form now, my button is disappearing again. (It isn't simply hidden or out of my viewport: It isn't even appearing in the page source)

sword-it
30 May 2012, 11:45 PM
I realized that, it is throwing a store error for the grid, and stops the rendering, this should be your problem.

I have defined a store for the grid and button is rendered.

try this:



var footabs = new Ext.TabPanel({ renderTo: document.body, activeTab: 0, plain: true, defaults: { autoScroll: true }, items: [{ xtype: "panel", autoHeight: true, title: "bar1", listeners: { activate: function () { alert("Unleashing foo rage"); } }, items: [{ xtype: "fieldset", layout: "table", items: [{ xtype: "grid", columns: [ { header: 'foo', dataIndex: 'fooa' }, { header: 'bar', dataIndex: 'foob' }, { header: 'foo', dataIndex: 'fooc' }, { header: 'bar', dataIndex: 'food' }, { header: 'foo', dataIndex: 'fooe' } ] , store:{ xtype:'jsonstore' , root:'item' , fields:['fooa','foob','fooc','food','fooe'] , data:{item:[{fooa:1,foob:2,fooc:3,food:4,fooe:5}]} } }, { xtype: "spacer", width: 25 }, { xtype: "fieldset", title: "TEXT", items: [{ xtype: "button", text: "NOT APPEARING BUTTON" }] }] }, { xtype: "fieldset", layout: "table", items: [{ xtype: "button", text: "< foo" }, { xtype: "spacer", width: 10 }, { xtype: "button", text: "bar >" }] }] }]});

anfla
31 May 2012, 12:06 AM
Yes, that does the trick. It's working now. Even if I'm still not able to explain, why my button appears, if I use "anchor" or any other layout than "table". :-? But thanks! Now I'm able to continue my work.