1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
    koolll is on a distinguished road

      0  

    Default Unanswered: List item not able to set record to container

    Unanswered: List item not able to set record to container


    I got a main container which include one member's list item and one member's detail container. A member's record will populate selected data to member's detail container.

    But now i facing a problem . Detail container cant get any populated value. I am able to get the selected value, but I no sure why member's detail container not able to render any record.

    Here is my coding
    Membermain.js ~ which include a members list and member detail
    Code:
    Ext.define('bluebutton.view.BlueButton.MemberMain', {    extend: 'Ext.Container',
        xtype: 'membermain',
        requires: [
             'bluebutton.view.BlueButton.MemberList',
            'bluebutton.store.BlueButton.MemberList',
    
    
            'Ext.field.Select',
            'Ext.field.Search',
    
    
            'Ext.plugin.ListPaging',
            'Ext.plugin.PullRefresh',
            'Ext.form.Panel',
            'Ext.form.FieldSet',
            'Ext.field.Text',
            'Ext.form.Panel',
            'Ext.form.FieldSet',
            'Ext.field.Text',
            'Utility.ImageField',
    
    
    
    
    
    
        ],
            
           
        config: {
            layout: {
                type: 'hbox'
            },
            
            iconCls: 'team1',
            title: 'Member List',
            styleHtmlContent: true,
            scrollable: 'vertical',
    
    
            items: [
             {
                    xtype: 'container',
                    cls: ['slide'],
                    height: '100%',
                   id :'membermain',
                    left: 0,
                    width: '100%',
                    zIndex: 5,
                    layout: { type: 'card' },
                 
                    items: [
                             {
                                xtype: 'toolbar',
                                docked: 'top',
                              
                                items: [
                                     {
                                        xtype: 'toolbar',
                                        docked: 'top',
                    
                                        items: [
                                            {
                                                xtype: 'selectfield',
                                                name: 'gender',
                                                cls: 'txtwhite',
                                                options: [
                                                    { text: 'Active Member', value: 'both' },
                                                    { text: 'Delete Member', value: 'male' },
                                                    { text: 'Suspended Member', value: 'female' }
                                                ]
                                            },
    
    
                                            { xtype: 'spacer' },
    
    
                                            { xtype: 'searchfield' ,
                                                 itemId:'membersearch',
                                                 id :'membersearch'
                                            }
                                        ]
                                     }
                                ]
                            },
    
    
    
    
                            {
                             
    
    
                                xtype: 'memberlistcard',
                            
                            }
                    ]
                },
                
                
                {
                    flex: 1,
                    xtype: 'container',
                    hidden: false,
                     id: 'membermaindetail',
                    width: '350px',
                     right: 0,
    
    
                    layout: {
                        type: 'card'
                    },
                    items: [
                        {
                            xtype: 'toolbar',
                            docked: 'top',
                           
                           
                        },
    
    
    
    
    
    
    
    
                        {
                             
                           
                           xtype:'memberdetailcard',
                          
                               
                        
                        }
                  ]
                },
               
            ],
           
        },
    
    
       
    
    
    });
    Memberlist.js
    Code:
    Ext.define('bluebutton.view.BlueButton.MemberList', {    extend: 'Ext.List',
        xtype: 'memberlistcard',
        requires: [
            'Ext.field.Select',
            'Ext.field.Search',
            'bluebutton.view.BlueButton.MemberDetail',
             'Ext.plugin.ListPaging',
            'Ext.plugin.PullRefresh'
    
    
        ],
        config: {
          
            styleHtmlContent: true,
            scrollable: 'vertical',
     
             store : { xclass : 'bluebutton.store.BlueButton.MemberList'},
            grouped: true,
            indexBar: true,
             autoLoad: false,
           disclosure: true,
           cls:'customHeader',
           plugins: [
                        { xclass: 'Ext.plugin.ListPaging',
                          autoPaging: true ,
    
    
                          },
                            { xclass: 'Ext.plugin.PullRefresh',
                                refreshFn: function() {             
                                Ext.getStore('memberlist').load();
                    },
                        
                         }
                    ],
    
    
            id :'memberlist',
            items: [
                
              
            ],
            emptyText: '<p class="no-search-results">No member record found matching that search</p>',
            itemTpl: Ext.create(
                'Ext.XTemplate',
                '<div class="tweet-wrapper">',
                    '<table>',
                        '<tr>',
                            '<td rowspan="2" width="30%" >',
                            '<div style="padding-left: 50px;">',
                            '   <img src="{imgUrl}" width="140" height="130" /></div>',
                            '</td>',
                            '<td>',
                            '   <div class="tweet">',
                            '       <h2>{memberId}</h2>',
                             '      <h3>Name: {name}</h3>',
    //                        '       <h3>Age : {age}</h3>',
    //                        '       <h3>Address : {address}</h3>',
                            '       <h3>Point Avalaible : {pointAvalaible}</h3>',
                            '       <h3>Last Visited : {lastVisited}</h3>',
                            '   </div>',
                            '</td>',
                        '</tr>',
                    '</table>',
                '</div>'
    
    
    
    
            ),
    
    
           
    
    
        },
        
    
    
    });

    Memberdetail.js
    Code:
    Ext.define('bluebutton.view.BlueButton.MemberDetail', {    extend: 'Ext.form.Panel',
        xtype: 'memberdetailcard',
    
    
        requires: [
            'Ext.form.Panel',
            'Ext.form.FieldSet',
            'Ext.field.Text',
            'Utility.ImageField',
    
    
        ],
    
    
        config: {
    
    
            items: [
                        {
                            xtype: 'fieldset',
                            defaults: {
    
    
                            },
                            title: 'Information',
                            items: [
    
    
    
    
                                {
                                    xtype: 'textfield',
                                    label: 'Name',
                                    name: 'name',
                                    readOnly: true
    
    
                                },
    
    
                                {
                                    xtype: 'textfield',
                                    label: 'Age',
                                    name: 'age',
                                    age: '25',
                                    readOnly: true
                                },
    
    
    
    
                            ]
                        },
                        {
                            xtype: 'fieldset',
                            defaults: {
                                labelWidth: '35%'
                            },
                            title: 'Contact Information',
                            items: [
                                {
                                    xtype: 'textfield',
                                    label: 'Telephone',
                                    name: 'telephone',
                                    value: '017-3124567',
                                    readOnly: true
                                }
                            ]
                        },
                        {
                            xtype: 'fieldset',
                            title: 'Address',
                            defaults: {
                                labelWidth: '35%'
                            },
                            items: [
                                {
                                    xtype: 'textfield',
                                    label: 'City',
                                    name: 'city',
                                    value: 'Kuala Lumpur',
                                    readOnly: true
    
    
                                },
                                {
                                    xtype: 'textfield',
                                    label: 'State',
                                    name: 'state',
                                    value: 'Kuala Lumpur',
                                    readOnly: true
                                },
                                {
                                    xtype: 'textfield',
                                    label: 'Country',
                                    name: 'country',
                                    value: 'Malaysia',
                                    readOnly: true
                                }
                            ]
                        },
                        {
                            xtype: 'fieldset',
                            title: 'Additional Information',
                            defaults: {
                                labelWidth: '35%'
                            },
                            items: [
                                {
                                    xtype: 'textfield',
                                    label: 'Point Avalaible',
                                    name: 'pointAvalaible',
                                    readOnly: true
    
    
                                },
                                {
                                    xtype: 'textfield',
                                    label: 'Last Visited',
                                    name: 'lastVisited',
                                    readOnly: true
    
    
                                }
    
    
                            ]
    
    
                        }
                    ]
        }
    
    
    
    
    
    
    });

    Controller
    Code:
    Ext.define('bluebutton.controller.BlueButton.MemberList', {    extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                main: 'mainview',
                memberlist: 'memberlistcard',
                memberdetail: 'memberdetailcard',
                membersearch :'#membersearch',
                topMenuButton : '#topMenuButton',
                topUserButton :'#topUserButton',
                membermaindetail:'membermaindetail'
    
    
            },
    
    
            control: {
            
              main: {
                    push: 'onMainPush',
                    pop: 'onMainPop'
                },
    
    
                memberlist: {
                    itemtap: 'onMemberSelect'
                },
    
    
                membersearch :{
                   keyup: 'onSearchKeyUp'
                }
    
    
            }
        },
           
           
    
    
       onSearchKeyUp: function (field) {
            
            
            //get the store and the value of the field
            var value = field.getValue(),
              store = Ext.getCmp('memberlist').getStore();    
            
    
    
            //first clear any current filters on thes tore
            store.clearFilter();
    
    
            //check if a value is set first, as if it isnt we dont have to do anything
            if (value) {
                //the user could have entered spaces, so we must split them so we can loop through them all
                var searches = value.split(' '),
                    regexps = [],
                    i;
    
    
                //loop them all
                for (i = 0; i < searches.length; i++) {
                    //if it is nothing, continue
                    if (!searches[i]) continue;
    
    
                    //if found, create a new regular expression which is case insenstive
                    regexps.push(new RegExp(searches[i], 'i'));
                }
    
    
                //now filter the store by passing a method
                //the passed method will be called for each record in the store
                store.filter(function (record) {
                    var matched = [];
    
    
                    //loop through each of the regular expressions
                    for (i = 0; i < regexps.length; i++) {
                        var search = regexps[i],
                            didMatch = record.get('name').match(search) ;
    
    
                        //if it matched the first or last name, push it into the matches array
                        matched.push(didMatch);
                    }
    
    
                    //if nothing was found, return false (dont so in the store)
                    if (regexps.length > 1 && matched.indexOf(false) != -1) {
                        return false;
                    } else {
                        //else true true (show in the store)
                        return matched[0];
                    }
                });
            }
        },
       onMainPush: function (view, item) {
             
            if (item.xtype == memberlist) {
                   this.showTopMenuUserBtn();
            }
            else
             this.hideTopMenuUserBtn();
        },
    
    
        onMainPop: function (view, item) {
           if (item.xtype == memberlist) {
                   this.showTopMenuUserBtn();
            }
            else
             this.hideTopMenuUserBtn();
          
        },
    
    
    
    
    
    
      
        onMemberSelect: function (list, index, node, record) {
    
    
    
    
      
        
            if (Ext.getCmp('navigation').isHidden()) {
                Ext.getCmp('navigation').show();
            }
    
    
    
    
            var main = Ext.get('membermain');
    
    
    
    
            if (main.hasCls('out')) {
                main.removeCls('out');
                main.addCls('in');
              
            } else {
                main.removeCls('in');
                main.addCls('out');
                
            }
    
    
    
    
        
            if (!this.memberdetail) {
                this.memberdetail = Ext.create('bluebutton.view.BlueButton.MemberMain');
                
            }
    
    
            //Able to get selected value
              alert(record.get('memberId'));
    
    
    
    
            //Bind the record onto the show contact view
            this.memberdetail.setRecord(record);
    
    
          
    
    
    
    
    
    
    
    
    
    
    
    
    
    
        },
    
    
        
         showTopMenuUserBtn: function () {
            var topMenuButton = this.getTopMenuButton()
            var topUserButton = this.getTopUserButton();
    
    
            if (!topMenuButton.isHidden()) {
                return;
            }
    
    
             if (!topUserButton.isHidden()) {
                return;
            }
    
    
            topMenuButton.show();
            topUserButton.show();
        },
    
    
        hideTopMenuUserBtn: function () {
            var topMenuButton = this.getTopMenuButton()
            var topUserButton = this.getTopUserButton();
            if (topMenuButton.isHidden()) {
                return;
            }
    
    
             if (topUserButton.isHidden()) {
                return;
            }
    
    
            topUserButton.hide();
            topMenuButton.hide();
        
        },
    
    
       
    });

    Store

    Code:
    
    
    Ext.define('bluebutton.store.BlueButton.MemberList', {
        extend: 'Ext.data.Store',
       requires: [
            'bluebutton.model.BlueButton.MemberList'
        ],
    
    
        config: {
            grouper: {
                groupFn: function (record) {
                    return record.get('name')[0];
                }
            },
              
               autoLoad:false,
               pageSize: 5,
               clearOnPageLoad: false, 
               model: 'bluebutton.model.BlueButton.MemberList',
            data: [{
                memberId: 'Kenny',
                name: 'Kenny Chow',
                imgUrl: '/bluebutton/resources/images/user3.png',
                age: '20',
                address:'The Business Centre , 61 Wellfield Road , Roath, Cardiff, CF24 3DG',
                pointAvalaible :'10',
                lastVisited: '26/11/2012, 11:52 AM',
                
    
    
    
    
    
    
            }, {
                memberId: 'Anthony',
                name: 'Anthony Tan',
                imgUrl: '/bluebutton/resources/images/user3.png',
                age: '21',
                address:'3 Edgar Buildings , George Street , Bath , England , BA1 2FJ',
                pointAvalaible :'45',
                lastVisited: '27/11/2012, 09:52 AM'
            },
    
    
            {
                memberId: 'Nicholas',
                name: 'Nicholas Chen',
                imgUrl: '/bluebutton/resources/images/user3.png',
                age: '22',
                address: '91 Western Road , Brighton ,East Sussex ,England ,BN1 2NW ',
                pointAvalaible :'30',
                lastVisited: '30/11/2012, 15:52 PM'
            },
    
    
            {
                memberId: 'Admin2',
                name: 'Admin2',
                imgUrl: '/bluebutton/resources/images/user3.png',
                age: '30',
                address: '50 Eestern Road , Brighton ,West Sussex ,England ,BN1 34W ',
                pointAvalaible :'120',
                lastVisited: '01/12/2012, 15:52 PM'
            },
    
    
             {
                 memberId: 'User2',
                 name: 'User2',
                 imgUrl: '/bluebutton/resources/images/user3.png',
                 age: '25',
                  address:'Office 33 ,27 Colmore Row ,Birmingham, England ,B3 2EW',
                     pointAvalaible :'32',
                  lastVisited: '30/11/2012, 18:52 PM'
             }
             ,
    
    
              {
                 memberId: 'User3',
                 name: 'User2',
                 imgUrl: '/bluebutton/resources/images/user3.png',
                 age: '25',
                  address:'Office 33 ,27 Colmore Row ,Birmingham, England ,B3 2EW',
                     pointAvalaible :'32',
                  lastVisited: '30/11/2012, 18:52 PM'
             },
    
    
              {
                 memberId: 'User4',
                 name: 'User2',
                 imgUrl: '/bluebutton/resources/images/user3.png',
                 age: '25',
                  address:'Office 33 ,27 Colmore Row ,Birmingham, England ,B3 2EW',
                     pointAvalaible :'32',
                  lastVisited: '30/11/2012, 18:52 PM'
             },
    
    
              {
                 memberId: 'User5',
                 name: 'User2',
                 imgUrl: '/bluebutton/resources/images/user3.png',
                 age: '25',
                  address:'Office 33 ,27 Colmore Row ,Birmingham, England ,B3 2EW',
                     pointAvalaible :'32',
                  lastVisited: '30/11/2012, 18:52 PM'
             }
    
    
    
    
    
    
            ]
        }
    });

    Store
    Code:
    
    
    Ext.define('bluebutton.store.BlueButton.MemberList', {
        extend: 'Ext.data.Store',
       requires: [
            'bluebutton.model.BlueButton.MemberList'
        ],
    
    
        config: {
            grouper: {
                groupFn: function (record) {
                    return record.get('name')[0];
                }
            },
              
               autoLoad:false,
               pageSize: 5,
               clearOnPageLoad: false, 
               model: 'bluebutton.model.BlueButton.MemberList',
            data: [{
                memberId: 'Kenny',
                name: 'Kenny Chow',
                imgUrl: '/bluebutton/resources/images/user3.png',
                age: '20',
                address:'The Business Centre , 61 Wellfield Road , Roath, Cardiff, CF24 3DG',
                pointAvalaible :'10',
                lastVisited: '26/11/2012, 11:52 AM',
                
    
    
    
    
    
    
            }, {
                memberId: 'Anthony',
                name: 'Anthony Tan',
                imgUrl: '/bluebutton/resources/images/user3.png',
                age: '21',
                address:'3 Edgar Buildings , George Street , Bath , England , BA1 2FJ',
                pointAvalaible :'45',
                lastVisited: '27/11/2012, 09:52 AM'
            },
    
    
            {
                memberId: 'Nicholas',
                name: 'Nicholas Chen',
                imgUrl: '/bluebutton/resources/images/user3.png',
                age: '22',
                address: '91 Western Road , Brighton ,East Sussex ,England ,BN1 2NW ',
                pointAvalaible :'30',
                lastVisited: '30/11/2012, 15:52 PM'
            },
    
    
            {
                memberId: 'Admin2',
                name: 'Admin2',
                imgUrl: '/bluebutton/resources/images/user3.png',
                age: '30',
                address: '50 Eestern Road , Brighton ,West Sussex ,England ,BN1 34W ',
                pointAvalaible :'120',
                lastVisited: '01/12/2012, 15:52 PM'
            },
    
    
             {
                 memberId: 'User2',
                 name: 'User2',
                 imgUrl: '/bluebutton/resources/images/user3.png',
                 age: '25',
                  address:'Office 33 ,27 Colmore Row ,Birmingham, England ,B3 2EW',
                     pointAvalaible :'32',
                  lastVisited: '30/11/2012, 18:52 PM'
             }
             ,
    
    
              {
                 memberId: 'User3',
                 name: 'User2',
                 imgUrl: '/bluebutton/resources/images/user3.png',
                 age: '25',
                  address:'Office 33 ,27 Colmore Row ,Birmingham, England ,B3 2EW',
                     pointAvalaible :'32',
                  lastVisited: '30/11/2012, 18:52 PM'
             },
    
    
              {
                 memberId: 'User4',
                 name: 'User2',
                 imgUrl: '/bluebutton/resources/images/user3.png',
                 age: '25',
                  address:'Office 33 ,27 Colmore Row ,Birmingham, England ,B3 2EW',
                     pointAvalaible :'32',
                  lastVisited: '30/11/2012, 18:52 PM'
             },
    
    
              {
                 memberId: 'User5',
                 name: 'User2',
                 imgUrl: '/bluebutton/resources/images/user3.png',
                 age: '25',
                  address:'Office 33 ,27 Colmore Row ,Birmingham, England ,B3 2EW',
                     pointAvalaible :'32',
                  lastVisited: '30/11/2012, 18:52 PM'
             }
    
    
    
    
    
    
            ]
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Lot of code for something that seems simpler. How are you taking the record and putting it on the detail view? Is your detail view a form or just a component?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread