List Detail in new panel

[abu_hamid]

Hi,

I have a small issue.
I have a list of element coming from a store. That list is composed by elements with two fields each : title, desc.

Ext.define('BeautifulMinds.store.symptomsPatient', {
    extend: 'Ext.data.Store',

    config: {
        autoLoad: true,
        storeId: 'symptomsPatient',
        proxy: {
            type: 'ajax',
            url: 'database.php',
            reader: {
                type: 'xml',
                record: 'symptom'
            }
        },
        fields: [
            {
                name: 'title'
            },
            {
                name: 'desc'
            }
        ]
    }
});

Here is the list

Ext.define('BeautifulMinds.view.patientSymptoms', {
    extend: 'Ext.Panel',
    alias: 'widget.patientsymptoms',

    config: {
        items: [
            {
                xtype: 'container',
                centered: true,
                height: '100%',
                html: '<img src="./images/backgrounds/patients/Backgrounds_only_Patients-18.png" style="width:100%; height:100%" />',
                left: 0,
                top: 0,
                width: '100%'
            },
            {
                xtype: 'container',
                height: '65%',
                left: '10%',
                style: ' -webkit-border-radius: 10px; border-radius: 10px;background-color:rgba(255,255,255,0.7); ',
                top: '25%',
                width: '80%',
                scrollable: false,
                items: [
                    {
                        xtype: 'list',
                        height: '90%',
                        id: 'symptomslist',
                        itemId: 'mylist',
                        left: '5%',
                        style: 'background-color:transparent;',
                        top: '5%',
                        width: '90%',
                        layout: {
                            type: 'vbox'
                        },
                        scrollable: 'vertical',
                        itemTpl: [
                            '<h1>{title}</h1>'
                        ],
                        store: 'symptomsPatient',
                        plugins: [
                            {
                                xtype: 'component',
                                type: 'pullrefresh'
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'button',
                baseCls: 'x-transparent',
                height: '15%',
                html: '<img src="./images/patients/symptoms/home.png" style="width:100%; height:100%" />',
                id: 'backhomepatient',
                left: '38%',
                top: '-6%',
                width: '22%',
                zIndex: 3
            },
            {
                xtype: 'image',
                bottom: '-10.5%',
                height: '16%',
                html: '<img src="./images/patients/symptoms/footer.png" style="width:100%; height:100%" />',
                right: '5%',
                width: '30%'
            },
            {
                xtype: 'image',
                height: '8%',
                html: '<img src="./images/patients/symptoms/text.png" style="width:100%; height:100%" />',
                left: '10%',
                top: '15%',
                width: '35%'
            }
        ]
    }

});

And here is the controller to handle the events

Ext.define('BeautifulMinds.controller.SymptomsController', {
    extend: 'Ext.app.Controller',
    alias: 'controller.SymptomsController',

    config: {
        refs: {
            Symptomslist: '#symptomslist',
            main: 'mainnav',
            sympdetails: '#detailsymtpomscontainer'
        },

        control: {
            "#symptomslist": {
                itemtap: 'onSymptomsItemTap'
            }
        }
    },

    onSymptomsItemTap: function(dataview, index, target, record, e, options) {
        this.getMain().push({
            xtype: 'symptomspatientdetail',
            data: record.data
        });


    }

});

Now here is the problem that I have, as you just saw, when an item from my list is tapped, I push to a detail panel along with the record data. But what i want to do is to have a designed page like this...

Ext.define('BeautifulMinds.view.symptomsPatientDetail', {
    extend: 'Ext.Panel',
    alias: 'widget.symptomspatientdetail',

    config: {
        items: [
            {
                xtype: 'container',
                centered: true,
                height: '100%',
                html: '<img src="./images/backgrounds/patients/Backgrounds_only_Patients-18.png" style="width:100%; height:100%" />',
                left: 0,
                top: 0,
                width: '100%'
            },
            {
                xtype: 'container',
                height: '65%',
                id: 'detailsymtpomscontainer',
                itemId: 'detailsymtpomscontainer',
                left: '10%',
                style: ' -webkit-border-radius: 10px; border-radius: 10px;background-color:rgba(255,255,255,0.7); ',
                top: '25%',
                tpl: [
                    '{desc}'
                ],
                width: '80%',
                scrollable: 'vertical'
            },
            {
                xtype: 'button',
                baseCls: 'x-transparent',
                height: '15%',
                html: '<img src="./images/patients/symptoms/home.png" style="width:100%; height:100%" />',
                id: 'backhomepatient',
                left: '38%',
                top: '-6%',
                width: '22%',
                zIndex: 3
            },
            {
                xtype: 'image',
                bottom: '-10.5%',
                height: '16%',
                html: '<img src="./images/patients/symptoms/footer.png" style="width:100%; height:100%" />',
                right: '5%',
                width: '30%'
            },
            {
                xtype: 'image',
                height: '8%',
                html: '<img src="./images/patients/symptoms/text.png" style="width:100%; height:100%" />',
                left: '10%',
                top: '15%',
                width: '35%'
            }
        ]
    }

});

...but it does not work.... It only works when I put...

tpl: [
                    '{desc}'
                ],

directly on the config of the panel with nothing else... I would love to put it in an item of the panel so i could have a nice design.

Can anyone help me ?

[haduki]

onSymptomsItemTap: function(dataview, index, target, record, e, options) {
        var symptomspatientdetail=this.getMain().push({
            xtype: 'symptomspatientdetail',
            data: record.data
        });
        symptomspatientdetail.down('#detailsymtpomscontainer').setData(record.data);




    }

[abu_hamid]

Thank you so much. You save my life