PDA

View Full Version : rendering a div element in the app panel



NehaShah
29 Jun 2011, 10:18 PM
Hi,
Wen i try to render the div element in tab panel of my app then the div id which i use to render in panel is showing as null i mean it cannot find the div element as it gets render on the body and then on it my full screen panel comes
Actually in my div tag i have a id to display a clock which i find rendered on the body first and then my whole panel comes I just want to kw how render

Hanni Sullivan
29 Jun 2011, 10:58 PM
Could you post some code? I don't get what you are trying to achieve. I know that it is not always easy to describe a problem in an understandable way but you could try a little harder.

NehaShah
29 Jun 2011, 11:06 PM
<!DOCTYPE html>
<html>
<head>
<title> GetQuote</title>
<meta name="viewport"
content="width=device-width,height=device-height,initial-scale=device-scale, user-scalable=yes, minimum-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="sencha-touch/resources/css/sencha-touch.css" />
<link rel="stylesheet" type="text/css" href="sencha-touch/resources/css/app.css" />
<script type="text/javascript" src="sencha-touch/sencha-touch.js"></script>
<script type="text/javascript" src="Quotetest.js"></script>
<style type="text/css">
.textLeft {
padding-left: 1.1em;
padding-bottom: 0.5em;
font-weight: bold;
font-size: 1.1em;
float: left;
color:black;

}

.textRight {
padding-right: 1.1em;
padding-bottom: 0.5em;
font-weight: bold;
font-size: 1.1em;
float: left;
color:black;
}

.tablec {
width:100%;
background-color: #C0C0C0;
border:medium;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-border-radius:10px;
rules:rows;

}

</style>
<script type="text/javascript">
var now = new Date();
var end = new Date();
end.setTime(now.getTime()+300000)
var seconds = (end - now) / 1000;
var minutes = Math.floor(seconds / 60);
seconds = Math.floor(seconds - (minutes*60));
ID=window.setTimeout("update1();", 1000);

function update1() {
now = new Date();
seconds = (end - now) / 1000;
minutes = Math.floor(seconds / 60);
seconds = Math.floor(seconds - (minutes*60));

if (seconds < 0 || minutes < 0) {
Ext.fly('clock'). update('This exchange rate has expired');
} else {
Ext.fly('clock'). update('This exchange rate expires in ' + minutes + ' minutes and ' + seconds + ' seconds');
ID=window.setTimeout("update1();",1000);
}
}

Ext.regApplication({
name:'MyApp',
launch:function(){

new MyApp.AppPanel({
fullscreen:true
})
}
});



var tpl = new Ext.XTemplate(
'<table class="tablec" >',

'<tr>',
'<td><span class="textLeft">Product </span></td>',
'<td><span class="textRight">FX Trade</span></td>',
'</tr>',
'<tr>',
'<td><span class="textLeft">Payment Currency </span></td>',
'<td><span class="textRight">{contractCurrency} </span></td>',
'</tr>',
'<tr>',
'<td><span class="textLeft">Payment Amount </span></td>',
'<td><span class="textRight">{currencyAmount} </span></td>',
'</tr>',
'<tr>',
'<td><span class="textLeft">Value Date </span></td>',
'<td><span class="textRight">{valueDate}</span></td>',
'</tr>',
'<tr>',
'<td><span class="textLeft">Rate </span></td>',
'<td><span class="textRight">0.685</span></td>',
'</tr>',
'<tr>',
'<td><span class="textLeft">TotalCost </span></td>',
'<td><span class="textRight">{currencyAmount}*0.685 </span></td>',
'</tr>',
'</table>'
);

MyApp.AfterQuote=Ext.extend(Ext.List,{
store:store,
itemTpl:tpl,
title:'YourQuote',
onRender:function(){
MyApp.AfterQuote.superclass.onRender.apply(this,arguments);
this.store.load();
}
});
Ext.reg('AfterQuote',MyApp.AfterQuote);


MyApp.Timershow=Ext.extend(Ext.Panel,{
scroll:'vertical',
id:'clock',
name:'clock', html:'<div id="clock"></div>',


onRender:function(){
MyApp.Timershow.superclass.onRender.apply(this,arguments);
}

});
Ext.reg('TimerShow',MyApp.Timershow);



MyApp.AppPanel=Ext.extend(Ext.Panel,{

scroll:'vertical',
initComponent:function(){
this.dockedItems=this.buildDockedItems();
this.items={};
MyApp.AppPanel.superclass.initComponent.call(this);
},
buildDockedItems:function(){
return{
xtype:'panel',
width:'100%',
dock:'center',
style:'border-top:10px;',

items:[{xtype:'TimerShow',
name:'timer',
width:'100%',
title:'Timer'
},{
xtype: 'fieldset',
title: 'QUOTE',
instructions:'By hitting "Accept",you acknowledge you are entering into a contract to buy foreign exchange.You agree to use the full amount and send us payment instructions before the contract matures',
defaults: {
labelWidth: '50%',
},
items: [{
xtype:'AfterQuote',
name:'after',
width:'100%',
title:'Your Quote'
},{
xtype:'TimerShow',
name:'timer',
width:'100%',
title:'Timer'
}]
}],

dockedItems:[{
xtype:'toolbar',
height:'53px',
dock:'top',
padding:'10px 10px 10px 10px',
title: '<div style="text-align:center;padding-top:0.3em" ><img style="width:40px; height:43px;" src="sencha-touch/resources/themes/images/default/icon.png"/><span style="font-size:0.65em;font-weight:bold;color:#FFFFFF">&nbsp;&nbsp;FX INTERNATIONAL PAYMENTS</span></div>'
},{
xtype:'toolbar',
height:'40px',
dock:'bottom',
padding:'3px 0px 3px 0px',
items:[{
xtype:'spacer'
},{
xtype:'button',
text: 'Accept',
ui: 'save',
width:'30%'

},{
xtype:'spacer'
}]
}]
}
}



})



</script>
</head>
<body ></body>
</html>


It is not able to recognize 'clock ' from div

Hanni Sullivan
29 Jun 2011, 11:58 PM
I'm sorry, but I'm going to be a little rude now. Your code, to be frank, is quite a mess.
Too many global variables (now, end, seconds, ...) and not enough object orientation for my personal taste.
May I suggest reading some good books on JavaScript programming?
JavaScript: The Good Parts (http://oreilly.com/catalog/9780596517748/) and JavaScript Patterns (http://oreilly.com/catalog/9780596806767/) come to mind.

But back to your problem: Since JavaScript is an interpreted language which is executed line by line, your "update1" function is simply executed before the div is even rendered.
You could put in the onRender method of your MyApp.TimerShow class:

onRender:function(){
ID=window.setTimeout("update1();", 1000);
MyApp.Timershow.superclass.onRender.apply(this,arguments);
}

This makes sure that it is executed AFTER your div is rendered.

NehaShah
30 Jun 2011, 1:18 AM
Hey thank you so much .It actually solved my thing ..as m not much hands on in JavaScript i need some assistance in proper coding for my project .Thankyou so much for the quick help ..I need more help to improve ma basic code interpretation as u did..can u help me ..i wil go links u mentioned
Thanks ,
Neha
:D:)