PDA

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



karan
17 Sep 2012, 11:02 AM
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..
}
}

});

mitchellsimoens
24 Sep 2012, 7:05 AM
There isn't anything in the code that would set it as hidden.

karan
24 Sep 2012, 7:43 PM
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.