View Full Version : Ext.Toolbar.TextItem extension and id error when debugging.

13 Jun 2012, 7:49 AM
Hi all Ext JS users.

I'm starting with Ext so please be patient and gentle ;)

I'm trying to extend Ext.Toolbar.TextItem to display current time.
I have build a class like so:

Ext.define('Urlopy.Components.TimeDisplay', {
extend : 'Ext.Toolbar.TextItem',
initComponent : function() {
var me = this;

var dt = new Date();

Ext.defer(this.onUpdate, 240, this);

Ext.apply(me, {
text : Ext.Date.format(dt, "Y-m-d H:i:s")
delete dt;
onUpdate : function(obj) {
var dt = new Date();
this.setText(Ext.Date.format(dt, "Y-m-d H:i:s"));
delete dt;
Ext.defer(this.onUpdate, 240, this);

And I'm creating new item in status bar like so:

Ext.define('Urlopy.Components.Statusbar', {
extend : 'Ext.ux.statusbar.StatusBar',

defaultText : 'Wczytane.',
defaultIconCls : 'x-status-valid',
iconCls : 'x-status-valid',
autoClear : 3000,
initComponent : function() {

this.currentUserDisplay = Ext.create("Ext.toolbar.TextItem");
this.currentUserDisplay.setText('Nie jeste? zalogowany!');
this.timeDisplay = Ext.create("Urlopy.Components.TimeDisplay");

Ext.apply(this, {
items : [this.currentUserDisplay, {
xtype : 'tbseparator'
}, this.timeDisplay]


setCurrentUser : function(username) {
this.currentUserDisplay.setText('Zalogowany jako' + ": "
+ username);
startLoad : function(message) {
if (message !== null) {
text : message,
iconCls : "x-status-busy"
} else {
endLoad : function() {
useDefaults : true

Any tips on how to improve this are welcome :)

But getting back to my problem. When I create my main layout using Viewport and I try to collapse one panel I get an error like this (it will be avilable soon as it is converted by vimeo):


Basicly from what I understand ID of my extended TimeDisplay is needed, but when I add it the error is still triggered when I try to collapse panel.

Only changing:

this.timeDisplay = Ext.create("Urlopy.Components.TimeDisplay");

this.timeDisplay = Ext.create("Ext.toolbar.TextItem");
helped, but then I don't get my clock.

What's wrong? Any ideas?

18 Jun 2012, 12:39 PM
I would suggest using Firebug in FF, or DeveloperTools in Chrome to debug your component.
Your 2nd call is reference a generic text item, so that is why you cannot see your clock.

You will need to step through your component and find out there you are going wrong.