PDA

View Full Version : [TRIVIAL] [Panel] Layout (again) recalculate



gabrielstuff
14 Oct 2010, 9:24 AM
So I have this extend of Panel, composed by a background image, then a text in rounded box then 4 button place in horizontal box.

If I call


this.doComponentLayout();
everything get broken... same for this.doLayout() not calling it make it better... but the text box which is update with a new text is not resize....

Any help would be appreciate


Ext.ns('Ext.ux');
Ext.ux.Step = Ext.extend(Ext.Panel, {
layout: {
type: 'vbox',
align: 'stretch'
},
scroll:'vertical',

rebuildCard: function(pComponent)
{

if(storeActivatedItems.getAt(0)){
if(this.scroller)
this.scroller.scrollTo({x: 0, y: 0});

myitem = this.items.items[2];
if (!myitem.html) myitem.update('<div id="presentation" class="box"><p>'+ storeActivatedItems.getAt(0).data.content+'</p></div>');
}
this.doComponentLayout();
},
onActualiteButtonTap: function(button, event)
{
if(selectedTeam)
{
if(selectedTeam.data)
{
selectedTeam = storeActu.data.items[0].data;
selectedTeam.title = 'Foo';
}
}
onglets.Phase.fireEvent('navigation', onglets.Actu, onglets.Phase);
},
onSiteDuJeuButtonTap: function(button, event)
{
location.href = 'http://www/' || '/';
},
onFanFacebookButtonTap: function(button, event)
{
location.href = 'http://wwww' || '/';
},
onTwitterButtonTap: function(button, event)
{
location.href = 'wwww' || '/';
},
initComponent: function(){

this.items = [{

style:'padding:0px',
html: '<div id="backimage"></div>',
flex:2

},{

html: '<div class="spacer"></div>'

},{
style: 'padding:0 8px',

html : '<div id="presentation" class="box"><h1>Foo</h1><p>Bar</p></div>',
flex:2

},{

html: '<div class="spacer"></div>'

},{
layout: 'hbox',
defaults: {
align:'stretch'
},
style:'padding:0 8px',
items: [{
xtype: 'button',
text: 'Le site du jeu',
handler: this.onSiteDuJeuButtonTap,
scope:this,
cls: 'webbtn',
flex:0.3
},{
html: '<div class="h_spacer"></div>',
},{
xtype: 'button',
text: 'Follow us',
handler: this.onActualiteButtonTap,
scope: this,
cls: 'bluebtn',
flex:0.3
}]
},{

html: '<div class="spacer"></div>'

},{
layout: 'hbox',
defaults: {
align:'stretch'
},
style:'padding:0 8px',
items: [{
xtype: 'button',
cls: 'webbtn',
text: 'Become fan',
handler: this.onFanFacebookButtonTap,
scope: this,
flex:0.3
},{
html: '<div class="h_spacer"></div>',
},{
xtype: 'button',
cls: 'webbtn',
text: 'Follow us',
handler: this.onTwitterButtonTap,
scope: this,
flex:0.3
}]
},{
html: '<div class="spacer"></div>'
}

];
this.addListener("beforeactivate",this.rebuildCard);
Ext.ux.Step.superclass.initComponent.call(this);
}
});

evant
14 Oct 2010, 3:15 PM
You might want to put together a test case that demonstrates the issue.

gabrielstuff
14 Oct 2010, 3:19 PM
Sorry, didn't get what you said. I use this panel in a layout card, like this :



dockIcon.Step = new Ext.ux.Step({
title: 'Foo',
backButtonEnabled : true,
extraCard: true
});



If I put all the element in a vertical layout box containing horizontal box, the whole structure also get broken.

evant
14 Oct 2010, 3:39 PM
As in, something we can run locally.

gabrielstuff
14 Oct 2010, 4:20 PM
Ok, I take the tabs example in kitchen sink, here is the full loadable sencha snipet code :

index.js :


Ext.ns('Ext.ux');

storeActivatedItems = {"content":"foo"};

Ext.ux.JeuPhase = Ext.extend(Ext.Panel, {
layout: {
type: 'vbox',
align: 'stretch'
},
scroll:'vertical',
cls:'foo',

rebuildCard: function(pComponent)
{

if(storeActivatedItems){
if(this.scroller)
this.scroller.scrollTo({x: 0, y: 0});

myitem = this.items.items[2];
if (!myitem.html) myitem.update('<div id="presentation" class="box"><p>'+ storeActivatedItems.content+'</p></div>');
}
this.doComponentLayout();
},
onActualiteButtonTap: function(button, event)
{

},
onSiteDuJeuButtonTap: function(button, event)
{
location.href = 'http://www.com/' || '/';
},
onFanFacebookButtonTap: function(button, event)
{
location.href = 'http://m.facebook.com/' || '/';
},
onTwitterButtonTap: function(button, event)
{
location.href = 'http://mobile.twitter.com/' || '/';
},
initComponent: function(){

this.items = [{

style:'padding:0px',
html: '<div id="backimage"></div>',
flex:2

},{

html: '<div class="spacer"></div>'

},{
style: 'padding:0 8px',

html : '<div id="presentation" class="box"><h1>La primera ticiccia !</h1><p>Lorem blalbllalbm anzldinaidnaiozdl lakzdklazld,azdkl,a ,asa "e&!un maskmkas,a pos ? Vivez !</p></div>',
flex:2

},{

html: '<div class="spacer"></div>'

},{
layout: 'hbox',
defaults: {
cls: 'foo',
align:'stretch'
},
style:'padding:0 8px',
items: [{
xtype: 'button',
text: 'Le site du jeu',
handler: this.onSiteDuJeuButtonTap,
scope:this,
cls: 'webbtn',
flex:0.3
},{
html: '<div class="h_spacer"></div>',
},{
xtype: 'button',
text: 'Suivre l\'actualit&eacute;',
handler: this.onActualiteButtonTap,
scope: this,
cls: 'bluebtn',
flex:0.3
}]
},{

html: '<div class="spacer"></div>'

},{
layout: 'hbox',
defaults: {
cls: 'foo',
align:'stretch'
},
style:'padding:0 8px',
items: [{
xtype: 'button',
cls: 'webbtn',
text: 'Devenez fan sur Facebook',
handler: this.onFanFacebookButtonTap,
scope: this,
flex:0.3
},{
html: '<div class="h_spacer"></div>',
},{
xtype: 'button',
cls: 'webbtn',
text: 'Suivez-nous sur Twitter',
handler: this.onTwitterButtonTap,
scope: this,
flex:0.3
}]
},{
html: '<div class="spacer"></div>'
}

];

this.addListener("beforeactivate",this.rebuildCard);
Ext.ux.JeuPhase.superclass.initComponent.call(this);
}
});

phase = new Ext.ux.JeuPhase({
title: Foo',
backButtonEnabled : true,
extraCard: true
});



Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function() {
new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
items: [{
title: 'Tab 1',
html: '1',
cls: 'card1'
}, phase
, {
title: 'Tab 3',
html: '3',
cls: 'card3'
}]
});
}
});


index.html


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tabs</title>

<link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css">

<script type="text/javascript" src="../../ext-touch.js"></script>
<script type="text/javascript" src="index.js"></script>

<style>
.card1, .card2, .card3 {
background-color: #376daa;
text-align: center;
color: #204167;
text-shadow: #3F80CA 0 1px 0;
font-size: 72px;
padding-top: 100px;
}
body{
background-color:#f7eae1;
}

html{
height:480px;
}

.box {
background-color: #FFF;
color: rgba(0,0,0,.5);
text-shadow: #fff 0 1px 0;
margin: 0px;
text-align: left;
-webkit-border-radius: 0.4em;
border: 1px solid #bab9b7;
padding: 15px;
position:relative;
/*font-size:0.8em;*/
}

.alert {
background-color: none;
color: #FFF;
margin: 0px;
text-align: center;
-webkit-border-radius: 0em;
border: 0px solid #bab9b7;
padding: 15px;
position:relative;
}


.hbox{
min-height:2.2em;height:2.2em;vertical;-webkit-box-align: center;-webkit-box-pack:end;display:-webkit-box;-webkit-box-direction: normal;-webkit-box-orient: horizontal;
}

#backimage{
background-size: 100%;
width:100%;
height:100%;
min-height:184px;
position:relative;
background-color:blue;
}

.foo p{
display:inline;
clear:none;
font-size: 0.9em;
color:#000;
}

.spacer{
height:0.8em;
}
.h_spacer{
width:0.3em;
}

.webbtn{
background-image:-webkit-gradient(linear, 0% 0, 0% 100%, from(#c1c1c1), color-stop(0.4, #575757), color-stop(0.5, #404040), to(#626262));
-webkit-box-shadow: #4E5A65 0px 0px 0.1em 0.1em inset, rgba(255, 255, 255, 0.246094) 0px 0.1em 0px;
-webkit-border-radius: 0.5em;
border: 1px solid #7e7b77;
color:#FFF;
text-shadow: #535c6d 0 -1px 0;
text-align:center;
font-size:0.75em;
padding:0.5em 0.1em
}

.webbtn.x-button-pressed{
background-image:-webkit-gradient(linear, 0% 0, 0% 100%, from(#626262), color-stop(0.4, #404040), color-stop(0.5, #575757), to(#c1c1c1));
}

.bluebtn{
background-image:-webkit-gradient(linear, 0% 0, 0% 100%, from(#97a8c6), color-stop(0.5, #758aaf), color-stop(0.5, #667eaa), to(#667eaa));
-webkit-box-shadow: #4E5A65 0px 0px 0.1em 0.1em inset, rgba(255, 255, 255, 0.246094) 0px 0.1em 0px;
-webkit-border-radius: 0.5em;
border: 1px solid #758aaf;
color:#FFF;
font-weight:normal;
text-shadow: #535c6d 0 -1px 0;
text-align:center;
/*font-size:12px;*/
font-size:0.75em;
padding:0.5em 0.1em
}

.bluebtn.x-button-pressed{
background-image:-webkit-gradient(linear, 0% 0, 0% 100%, from(#667eaa), color-stop(0.5, #667eaa), color-stop(0.5, #758aaf), to(#97a8c6));
}

.bluebtn a, .bluebtn a:visited, .bluebtn a:hover, .bluebtn a:active{
color:#FFF;
background-image:-webkit-gradient(linear, 0% 0, 0% 100%, from(#667eaa), color-stop(0.5, #667eaa), color-stop(0.5, #758aaf), to(#97a8c6));
text-decoration:none;
display:block;
}
</style>
</head>
<body></body>
</html>

You can change the comment doComponentLayout and see how it act differently and how the button are placed.

Thank you for any help/hints

qpi
10 Aug 2011, 8:35 AM
Hello


I think I have the same problem and I can't resolve it. I have an Ext.Container and after when I try to call the update() method on it, the new content doesn't resize my conteiner. I tried to use the doComponentLayout() and the doLayout() methods on the all the elements, but It doesn't help.


Could someone help me?


Here you can find my test case: http://www.megaupload.com/?d=2EODAIV0


Thanks in advance

qpi
17 Aug 2011, 2:15 AM
I found the reason for the problem. When I use hbox or vbox layout for the container and when I try to update one of the items, the container doesn't want to increase the own height.


I don't know if it is a feature or a bug, but in my opinion, it is a bug, because when I use it in this way:





layout: {
type: 'hbox',
align: 'stretch'
}


It causes the same problem. In my mind the stretch means the container's height will increase after when the inside components had grown