2 questions concerning controller & bug in titlebar + IDE?

[elcrian]

Hello,
first of, I'm sorta new to Sencha and am currently trying to setup a test-project. Very basic, just a functionality to add and view entries from the local storage and maybe send it to a server afterwards. Pretty much just to learn the basic functions.

My first issue is very simple: The icons / links in the titlebar won't show up.

Ext.define('TestSencha.view.Main', {    
extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: ['Ext.TitleBar'],
    config: {
        fullscreen: true,
        tabBarPosition: 'bottom',


            items: [
               {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Welcome to Sencha Touch 2'
                },
                {
                    iconCls: 'add',
                    title: 'Add',
                    xtype: 'AddEntry'
                },
                {
                    iconCls: 'time',
                    title: 'View',
                    xtype: 'ViewEntries',
                }
            ]
    }
});

It starts off by showing me the "Welcome to Sencha Touch 2" screen and the AddEntry-view.

Second issue I'm facing is that my controller doesn't recognize references via ID (as described in the tutorials):

Ext.define('TestSencha.model.Day', {     
extend: 'Ext.data.Model',
    requires: ['Ext.data.Store'],
    id: 'DayModel', // there we go
    config: {
        fields: [
            { name: 'id', type: 'int'},
            { name: 'weekNo', convert: function(){
                var date = new Date();
                return Ext.Date.format(date, 'W'); // i wanna call a function like "getDate()" from my controller from here
            }},
// ...

Ext.define('TestSencha.controller.AddEntry', {    
extend: 'Ext.app.Controller',
    requires: ['TestSencha.model.Day'],
    config: {
        stores : ['Days'],
        models : ['Day'],
        refs: { // reference the classes that will use this controller
            dayView    : '#DayView'
        },
        control : { // use handler-mechanics for every button with the action "addEntryAction"
            'container button[action=addEntryAction]' : {
                 tap : 'addEntry' // that one works
             },
             'DayModel': {
                 activate : 'onActivate' // that one doesn't and futhermore, the function's name isn't recognized from within the model
             },
        }
    },

    // [...]

    onActivate : function(){ // debug mucho
        console.log('Controller for view is active!')
    },
        
   // http://docs.sencha.com/touch/2-0/#!/api/Ext.Date
   getAndConvertTime: function(args) { 
       console.log('Test getAndConvertTime()');
    var date = new Date();
    if (args = 'WEEK') return Ext.Date.format(date, 'W');
    else if (args = 'WEEKDAY') return Ext.Date.format(date, 'D');
    else if (args = 'TIME_AMERICAN') return Ext.Date.format(date, 'g:i a');
    else if (args = 'TIME_EUROPEAN') return Ext.Date.format(date, 'G:i');
    else if (args = 'DATE_AMERICAN') return Ext.Date.format(date, 'n/d/y');
    else if (args = 'DATE_EUROPEAN') return Ext.Date.format(date, 'd.n.y');  
   }
});

My third and last question would be: Is there any convenient, free IDE available for Sencha? I'm currently using Aptana, but unfortunately there seems to be no way to enable an auto-completion or an integrated complier which tells you about your errors before you load it into the browser.

Thanks in advance!

[mitchellsimoens]

For the icons, did you create the needed icons?

For the id issue on the model, the control config in a controller will only work with components, a model is not a component so this will never work. For you convert method, I'd suggest creating a utility singleton that you can call from the convert method on that field.

[elcrian]

Hi,
thanks for your response. I didn't create the icons (and am not sure if I'd know how to do so); however, the buttons still don't appear even if I try to use the "title" property only:

{         //iconCls: 'add',
                    title: 'Add',
                    xtype: 'AddEntry'
                }

...which totally confuses me.

Concerning the controller: Okay, I wasn't aware of that. I'm gonna try using a class with the singleton-property for that.