problem displaying detail view

[master_obiwan]

Hey Sencha geniuses, I have a problem I was hoping someone can help me with. I have a list and when you click on one of the disclosure icons I have it display a detail view. The problem I have is when I click the disclosure icon it slides into view but nothing displays any idea of what I did wrong. Any help would be awesome.

view/projectContainer

Ext.define('codename.view.ProjectsContainer', {
    extend:'Ext.navigation.View',
    xtype: 'projectsContainer',
    fullscreen : true,


    requires:[
        'Ext.dataview.List',
        'Ext.data.proxy.JsonP',
        'Ext.data.Store',
        'codename.view.ProjectsList',
        'codename.view.ProjectDetail'
    ],


    config:
    {


        defaults:
        {
            scrollable:true,
            styleHtmlContent: false
        },


        items:
        [
            {
                xtype: 'projectList'
            }
        ]
    }
});

view projectList

Ext.define('codename.view.ProjectsList', {
    extend:'Ext.List',
    xtype: 'projectList',
    fullscreen : true,


    requires:['codename.store.Projects'],


    config:
    {
        itemTpl: '<img src="{ProjectImageUrl}"></img>',
        store: 'Projects',


        navigationBar: false,
        onItemDisclosure: true
    }
});

view projectDetail

Ext.define('codename.view.ProjectDetail',{
    extend:'Ext.Panel',
    xtype:'projectDetails',


    config:
    {
        scrollable:'vertical',
        styleHtmlContent:true,
        title: 'Project Details',
        html: 'FPO'
    }
});

controller project

Ext.define('codename.controller.Projects', {
    extend: 'Ext.app.Controller',


    config:
    {
        refs:
        {
            main: 'projectsContainer'
        },
        control:
        {
            'projectList' :
            {
                disclose: 'showProjectDetails'
            }
        }
    },


    showProjectDetails: function()
    {
        alert("test");
        this.getMain().push({
            xtype: 'projectDetails'
        });
    }


});

[master_obiwan]

This works just couldnt see my detail view because text was same color as background. I guess this can serve someone who needs to learn how to add a detail view

[master_obiwan]

Does anyone know who to push this view into the main view? Currently the detail view that I slide in appears in the projects container but essentially I need it to take up the full screen but above the tab bar. Any ideas out there?

[Schildi]

Hi master_obiwan,

instead of pushing your detailView to the projectsContainer, try

Ext.Viewport.setActiveItem('projectDetails');

If you want to change the view with an animation, e.g. use

Ext.Viewport.animateActiveItem('projectDetails', { type: 'slide', direction: 'left' });

Hope this helps.

Best regards,
Schildi

[master_obiwan]

Hi Schildi,

Does this look right to you? Not working for me.

showProjectDetails: function()    {        Ext.Viewport.animateActiveItem('projectDetails', { type: 'slide', direction: 'left' });    }

[Schildi]

Hi master_obiwan,

actually that should work...

3 questions:

1. Which specific version of Sencha Touch do you use?
2. Does setActiveItem work?
3. Do you see anything at the console in your browser (errors/warnings/...)?

Best regards,
Schildi

[master_obiwan]

Hey Schildi,

no the set active item doesn't work either and the error I get in the console is console[consoleMethod](message);

No errors in console

I am running sencha touch 2.0

[Schildi]

Hi master_obiwan,

okay, it seems that with your version of Sencha Touch, you cannot use the components xtype as parameter for setActiveItem, as I suggested here:

Ext.Viewport.setActiveItem('projectDetails');

I'm using Sencha Touch 2.1.0-beta1 and it works for me ;-)

Nevertheless, you should be able to do something like that then:

Ext.Viewport.setActiveItem(
    Ext.create('codename.view.ProjectDetail', {
        // your configs here
    })
);

Hope that at last this will work :-)

Best regards,
Schildi