General questions about object creation

[bfrolicher]

Hello all,
I'm new to Sencha Touch, i come from iOS and Java development and i'm a bit confuse with object creation and management.
I try create something like a 'gridView' (to understand how sencha works). So in other language
I would have created a 'gridItem' which take an 'name' and an 'id', and a gridView which manage all given gridItems. gridView also handle click action on an item on dispatch event to another object.

So i'have made this : (GridItem are displayed but i can't set a listener on them)

GridItem.js

Ext.define('SenchaTry.view.GridItem',{
    extend:'Ext.Container',
    xtype:'gridItem',
    requires:[
        'Ext.Label',
    ],
    config:{
        id:null,
        title:null,
        img:null,
        action:null,
        style:'width:30%;background:red;height:30%',
        items:[
            {
                xtype:'label',
                html:'Label1',
            }
        ]
    },
});

GridView.js

Ext.define('SenchaTry.view.GridView',{
    extend:'Ext.Container',
    xtype:'gridView',
    gridItems:null,    
    config:{
        width: 350,
        height: 370,
        style:'with:100%;background:blue;height:30%',
        listeners: {
            painted: function () {
                    console.log("Count : "+this.gridItems.length);
                for(var i = 0; i< this.gridItems.length;i++){
                    gridItem = this.gridItems[i];
                    gridItem.on('tap', this.handleTap, this,{
                        single:true
                    });
                }
                    this.setItems(this.gridItems);
            }
        },
        items:[
            {
                xtype:'label',
                html:'qsdqsd'
            }
        ]
    }
})

And the Main.js

Ext.define("SenchaTry.view.Main", {
    extend: 'Ext.Panel',
    requires: [
        'Ext.TitleBar',
    ],
    
    config: {
        tabBarPosition: 'bottom',


        items: [
            {
                xtype:'gridView',
                gridItems:[
                    {xtype:'gridItem',id:'firstItem'
                    },
                    {
                        xtype:'gridItem',
                        id:'secItem'
                    },
                    {
                        xtype:'gridItem',
                        id:'thridItem'
                    }
                ]
            }
        ]
    }
});

Many thanks for your explanations

(i will go to re-read the doc)

[mitchellsimoens]

Since the SenchaTry.view.Main class is going to be your main view you can create it using:

new SenchaTry.view.Main({
    fullscreen : true 
});

or

Ext.create('SenchaTry.view.Main', {
    fullscreen : true
});

I would stay away from using id as you can easily run into collisions if you have duplicate id.

[bfrolicher]

Hi,

I don't have problem to load the main, only to catch action on GridItem.

Thanks for your reply

Ben

[mitchellsimoens]

You don't have any listeners in the grid item class.