PDA

View Full Version : Help with Ext.Window



mrras25
1 Feb 2010, 5:00 PM
I have a limited html box with details that could go beyond the limit, I am trying to add a 'More Info' button which would pop up an Ext.Window and grab the content of the div that is associated to the button call.

I have tried contentEl however it blanks out the data on the main page where the more info was clicked I would like the text to stay. What am I missing:



....
<div id="infobox">
<div id="block1">
<h2> Welcome! </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p>
</div> <input type="button" id="moreinfo" value="More Info" /><br /><br />
</div>
....




Ext.onReady(function(){
var win;
var button = Ext.get('moreinfo');
button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
contentEl: 'block1',
layout:'fit',
width:668,
height:350,
closeAction:'hide',
plain: true,
//constrain: true,
modal: true
});
}
win.show(this);
});
});

mitchellsimoens
1 Feb 2010, 5:06 PM
Quick and somewhat dirty...


Ext.onReady(function(){
var win;
var button = Ext.get('moreinfo');
button.on('click', function(){
var myData = document.getElementById('block1').innerHTML;
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
layout:'fit',
width:668,
height:350,
closeAction:'hide',
plain: true,
//constrain: true,
modal: true,
html: myData
});
}
win.show(this);
});
});

VinylFox
1 Feb 2010, 5:10 PM
Yeah, contentEl will do that. Try this instead...


...
//contentEl: 'block1',
layout:'fit',
width:668,
height:350,
closeAction:'hide',
plain: true,
//constrain: true,
modal: true,
listeners: {
show: function(t){
t.body.update(Ext.get('block1').dom.innerHTML);
}
}
...

mrras25
1 Feb 2010, 8:41 PM
You both rock! Thanks for your time- If I wanted to make my button pass the block1, block2 block3 etc the listener has that ability to know which id is passed right? and its a variable like

var = button.id; or something in that sense?