PDA

View Full Version : Tablewidth and update destination



Yasheena
27 Apr 2008, 6:58 AM
Hi,

I'm just writing a component for setting up a title line / status line, but I have no idea how to solve the following two problems:

a) How can I setup a 'layout:"table"' to expand the table to the available width? In 'normal' html I would use 'width="100%"', but here this has no effect.

b) I want to use the TaskMgr to update a clock in the "updatearea". But I have no idea, how to access this "updatearea" from the function ("titleUpdater"), which is called by the TaskMgr.

Any hints for me ...?

Here is my javascript code (js/test.js):



Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
Ext.ns('test');

Ext.onReady(function(){
Ext.QuickTips.init();
var viewport = new Ext.Viewport({
layout:'border'
,items:[
new test.titleLine({
region:'north'
})
,{
region:'center'
,html:'Center'
,title:'Center'
}]
});
});

test.titleLine=Ext.extend(Ext.Panel,{
// Configurables
titleText:"This is a headline"
//----
,border:false
,initComponent:function(){
Ext.apply(this,{
width:"100%"
,height:32
,items:[{
layout:"table"
,layoutConfig:{
columns:3
}
,defaults:{
baseCls:"x-panel-header"
,style:"border-style:none;padding:5px 0 4px 0;"
}
,items:[{
width:8
,html:" "
},{
html:this.titleText
},{
width:100
,style:"border-style:none;padding:5px 0 4px 0;text-align:right;"
,html:"updatearea"
}]
}]
});
test.titleLine.superclass.initComponent.apply(this,arguments);
}

,titleUpdater:{
run:function(){
var now=new Date();
var H=now.getHours();
var Info=' | '+((H>9)?'':'0')+H+':';
var M=now.getMinutes();
Info+=((M>9)?'':'0')+M+':';
var S=now.getSeconds();
Info+=((S>9)?'':'0')+S+' |';
// "updatearea".update(Info);
},
interval:1000
}

,afterRender:function(){
test.titleLine.superclass.afterRender.apply(this,arguments);
Ext.TaskMgr.start(this.titleUpdater);
}
});

And this is my html file (test.html):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
</body>
</html>

By the way: How do you encapsulate source code into an own scrolling area, when you post it here?

Greetings,
Wolfgang