1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    78
    Vote Rating
    0
    abu_hamid is on a distinguished road

      0  

    Default Answered: List Detail in new panel

    Answered: List Detail in new panel


    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.

    Code:
    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

    Code:
    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

    Code:
    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...

    Code:
    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...
    Code:
    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 ?

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

  3. #2
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


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

  4. #3
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    78
    Vote Rating
    0
    abu_hamid is on a distinguished road

      0  

    Default


    Thank you so much. You save my life

Thread Participants: 1