Results 1 to 9 of 9

Thread: Strange behavior: Not appearing xtype-elements in layout: "table"

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    43

    Default Strange behavior: Not appearing xtype-elements in layout: "table"

    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:

    PHP Code:
    var footabs = new Ext.TabPanel({
            
    renderTodocument.body,
            
    activeTab0,
            
    plain:true,
            
    defaults:{autoScrolltrue},
            
    items : [{
                 
    xtype "panel",
                 
    autoHeighttrue
                 
    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"
              
    width25
            
    }, 
            {
             
    xtype"fieldset",
             
    title"TEXT"
             
    items: [{
                 
    xtype"button",
                 
    text"NOT APPEARING BUTTON"
             
    }]
            }]
            },
            {
             
    xtype"fieldset"
             
    layout"table",
             
    items: [{
                  
    xtype"button",
                  
    text"< foo" 
                  
    }, 
                  {
                   
    xtype"spacer"
                   
    width10
                  
    }, 
                  { 
                   
    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?

  2. #2
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335

    Default anchor layout

    Hi,

    Try to use anchor layout for button's container:

    Code:
     {
                                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"
                                        }]
                                    }
                                ]
                            }
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    43

    Default

    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?

  4. #4

    Default

    Your fieldset probably needs to be inside a form...Just my $.02

    Your button and/or fieldset need heights.
    Wes

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    43

    Default

    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.

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    43

    Default

    PHP Code:
     html'<input type="button" value="BUTTON!">'
    Works, by the way. But that's more than just dirty. :/

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    43

    Default

    Okay, I wasn't able to fix my problem and found a new one:

    PHP Code:
             xtype"form",
             
    layout"anchor"
             
    height300
             
    items: [{
                      
    xtype"container"
                      
    colspan2,  
                      
    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)

  8. #8
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335

    Default I guess not related with the table layout

    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:

    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' }                  ]               , 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 >"              }]        }]    }]});  
    
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  9. #9
    Sencha User
    Join Date
    Mar 2012
    Posts
    43

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •