Results 1 to 3 of 3

Thread: View showing as 'display:none' when added to container (layout hbox) via items config

  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    15
    Vote Rating
    0
      0  

    Default View showing as 'display:none' when added to container (layout hbox) via items config

    I'm seeing some very strange behavior. Any pointers in debugging will be very helpful. Here's my setup.

    MVC Viewport - Layout Vbox with 2 items below
    - Top - container with auto layout
    - Bottom - container with card layout.
    - Card 5 is a view (name prodlist) rendering json data using xtemplate loaded from the server into a store. THIS WORKS. (CASE 1)

    However, if I change card 5 to be a container with 'hbox' layout and add prodlist (using the same xtype as above), the view doesn't render. (CASE 2)

    After debugging with illuminations, I saw that the 'display:none' is being set on the containing div.

    "<div id="prod-list" class="x-component x-box-item x-component-default" style="border-color: red; border-style: solid; border-width: 1px; left: 180px; top: 0px; margin: 0px; width: 1736px; height: 565px; display: none;" tabindex="-1">"

    I can add the same view to card 6 and it shows up. I can't figure out why this is happening. Any pointers in debugging will be very helpful. I'm posing the code for the view I'm adding to card 5 in case 2 below.


    Ext.define('MyApp.view.prod.Prod',{
    alias: 'widget.prod',
    extend: 'Ext.Container',
    layout: {
    type: 'hbox',
    align: 'stretch'
    },
    id:'prod-main',
    items: [{ /// THIS ITEM SHOWS UP
    id:'left-prod',
    width: 180,
    html:'<p>Test Left Column</p>',
    border: 1,
    style: {
    borderColor: 'orange',
    borderStyle: 'solid'
    }
    },
    {
    xtype: 'prodlist', // THIS ONE DOESNT, HAD DISPLAY:NONE IN DOM
    flex: 1,
    hidden: false,
    id:'prod-list',
    border: 1,
    style: {
    borderColor: 'red',
    borderStyle: 'solid',
    display: ''
    }
    }
    ]
    });


    ///And here's the prodlist view definition:



    Ext.define('MyApp.view.prod.ProdList', {
    extend: 'Ext.view.View',
    alias: 'widget.prodlist',
    hidden: false,
    // render: Ext.get('prod-list'),
    tpl: [
    '<tpl for=".">',
    //Header Image
    '<div class="prod_box_list">',


    '<div class="prod_img">',
    '<tpl for="Images">',
    '<tpl switch="rk">',
    '<tpl case="1">',
    '<img src="{u170}"/>',
    '</tpl>',
    '</tpl>',
    '</div>',

    ///MORE TEMPLATE..DELETED POSTING ON FORUM
    '</div>',
    '</tpl>'
    ],


    store: 'Listings',

    // data : {Hello: 'Karan'},
    itemSelector: 'div',

    listeners: {
    beforeshow: function(thisC, opts){
    console.log('**** BEFORE VIEW SHOW');
    }
    ,boxready : function(self,width,height,opts){
    console.log('**** boxready( *****');
    console.log(self.hidden);
    self.setVisible(true);
    console.log(width);
    console.log(height);
    self.hidden = false;
    console.log(self.hidden); //NONE OF THIS HELPED..
    }
    }

    });

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    There isn't anything in the code that would set it as hidden.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    15
    Vote Rating
    0
      0  

    Default

    That's the frustrating part. There's nothing in that code that should hide it.

    Gets worse: I wrote that thread and went to sleep. Woke up, came to my desk to debug and it was working. No change. I'm glad it worked but not sure why it was happening in the first place.

Tags for this Thread

Posting Permissions

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