1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    8
    Vote Rating
    0
    jjosephs is on a distinguished road

      0  

    Default Data Binding for grid to panel not working

    Data Binding for grid to panel not working


    First off, I'm new to Extjs so bare with me.

    I can't get the data binding to work so that when I click on the row in the grid, it appears in the panel below. I have tried a variety of approaches and so far I've spent hours with no progress.

    Any solution that you can provide would be most appreciated. Thank you.

    Currently, I am getting this error

    Uncaught TypeError: Object [object Object] has no method 'getCmp' - JobSearch.js 45

    Here's a picture of my app structure

    extimg1.jpg


    Below are the files I modified for the binding

    app/controller/JobSearch.js

    Code:
    Ext.define('OE.controller.JobSearch', {    extend: 'Ext.app.Controller',
        
        init: function(){
            this.control({
                'viewport > jobsearchlist': {
                    itemdblclick: this.editUser
                },
                'useredit button[action=save]': {
                    click: this.updateUser
                },
                
                'viewport > jobsearchlist': {
                    selectionchange: this.updateFooterDetails
                }
            });
        },
        
        onLaunch: function(){
            this.control({
                'viewport > jobsearchlist': {
                    selectionchange: this.updateFooterDetails
                }
            });
        },
        
        editUser: function(grid, record){
            var view = Ext.widget('useredit');
            
            view.down('form').loadRecord(record);
        },
        
        updateUser: function(button){
            var win = button.up('window'),
                form = win.down('form'),
                record = form.getRecord(),
                values = form.getValues();
                
                record.set(values);
                win.close();
                this.getUsersStore().sync();
        },
        
        updateFooterDetails: function(sm, rs) {
            var bookGridSm = this.getCmp('jobsearchb').getSelectionModel();
            if (rs.length) {
                var jobdetailbasic = Ext.getCmp('jobdetailbasic');
                bookTpl.overwrite(jobdetailbasic.body, rs[0].data);
            }
            bookGridSm.on('selectionchange', this.onRowSelect, this);
            console.log('Test');
            
            var bookGridSm = sm;
            //console.log(rs[0].data);
            
            var jobdetailbasic = Ext.widget('jobdetailbasic');
            jobdetailbasic.updateDetail(rs[0].data);
            
            bookGridSm.on('selectionchange', this.onRowSelect, this);
        },
        
        onRowSelect: function(sm, rs) {
            // getComponent will retrieve itemId's or id's. Note that itemId's
            // are scoped locally to this instance of a component to avoid
            // conflicts with the ComponentManager
            if (rs.length) {
                var jobdetailbasic = this.getComponent('jobsearchb');
                jobdetailbasic.updateDetail(rs[0].data);
            }
    
    
        },
        
        views: [
            'jobsearch.List',
            'jobsearch.Edit',
            'jobdetail.Basic'
        ],
        stores: [
            'JobSearch'
        ],
        models: [
            'JobSearch'
        ]
    });

    app/view/jobdetail/Basic.js

    Code:
    Ext.define('OE.view.jobdetail.Basic', {    extend: 'Ext.Panel',
        alias: 'widget.jobdetailbasic',
        store: 'JobSearch',
        
        // add tplMarkup as a new property
        tplMarkup: [
            'Title: <a href="{op_comm_status}" target="_blank">{job_category_level_two}</a><br/>',
            'Author: {op_title}<br/>',
            'Manufacturer: {op_description}<br/>',
            'Product Group: {op_country}<br/>'
        ],
        // startingMarup as a new property
        startingMarkup: 'Please select a book to see additional details',
    
    
        bodyPadding: 7,
        // override initComponent to create and compile the template
        // apply styles to the body of the panel and initialize
        // html to startingMarkup
        initComponent: function() {
            this.tpl = Ext.create('Ext.Template', this.tplMarkup);
            this.html = this.startingMarkup;
    
    
            this.bodyStyle = {
                background: '#ffffff'
            };
            // call the superclass's initComponent implementation
            this.callParent();
        },
        // add a method which updates the details
        updateDetail: function(data) {
            this.tpl.overwrite(this.body, data);
        }
    });

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,596
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I think the error message says it all. JobSearch.js, line 45:

    Code:
    var bookGridSm = this.getCmp('jobsearchb').getSelectionModel();
    this.getCmp doesn't exist. I assume you mean Ext.getCmp?

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    8
    Vote Rating
    0
    jjosephs is on a distinguished road

      0  

    Default


    I did some more work to the code and now I'm getting this error

    Uncaught ReferenceError: bookTpl is not defined - app/controller/JobSearch.js

    I don't get this error in the example code, why do I get it here?


    app/controller/JobSearch.js

    Code:
    Ext.define('OE.controller.JobSearch', {    extend: 'Ext.app.Controller',
        
        init: function(){
            this.control({
                'viewport > jobsearchlist': {
                    itemdblclick: this.editUser
                },
                'useredit button[action=save]': {
                    click: this.updateUser
                },
                
                'viewport > jobsearchlist': {
                    selectionchange: this.updateFooterDetails
                }
            });
        },
        
        onLaunch: function(){
            this.control({
                'viewport > jobsearchlist': {
                    selectionchange: this.updateFooterDetails
                }
            });
            
            Ext.data.StoreManager.get('gridJobStore').load();
        },
        
        editUser: function(grid, record){
            var view = Ext.widget('useredit');
            
            view.down('form').loadRecord(record);
        },
        
        updateUser: function(button){
            var win = button.up('window'),
                form = win.down('form'),
                record = form.getRecord(),
                values = form.getValues();
                
                record.set(values);
                win.close();
                this.getUsersStore().sync();
        },
        
        updateFooterDetails: function(sm, rs) {
            var bookGridSm = Ext.getCmp('jobSearchList').getSelectionModel();
            if (rs.length) {
                var jobdetailbasic = Ext.getCmp('jobdetailbasic');
                bookTpl.overwrite(jobdetailbasic.body, rs[0].data);
            }
            bookGridSm.on('selectionchange', this.onRowSelect, this);
            console.log('Test');
            
            var bookGridSm = sm;
            //console.log(rs[0].data);
            
            //var jobdetailbasic = Ext.widget('jobdetailbasic');
            //jobdetailbasic.updateDetail(rs[0].data);
            
            //bookGridSm.on('selectionchange', this.onRowSelect, this);
        },
        
        onRowSelect: function(sm, rs) {
            // getComponent will retrieve itemId's or id's. Note that itemId's
            // are scoped locally to this instance of a component to avoid
            // conflicts with the ComponentManager
            if (rs.length) {
                var jobdetailbasic = Ext.getComponent('jobsearchb');
                jobdetailbasic.updateDetail(rs[0].data);
            }
    
    
        },
        
        views: [
            'jobsearch.List',
            'jobsearch.Edit',
            'jobdetail.Basic'
        ],
        stores: [
            'JobSearch'
        ],
        models: [
            'JobSearch'
        ]
    });

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,596
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    You are using bookTpl here:

    Code:
    bookTpl.overwrite(jobdetailbasic.body, rs[0].data);
    That example defines bookTpl:

    Code:
    var bookTpl = Ext.create('Ext.Template', bookTplMarkup);
    Judging by the error message, you are not defining bookTpl anywhere, or if you are then it isn't in scope where you're using it.

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    8
    Vote Rating
    0
    jjosephs is on a distinguished road

      0  

    Default


    Actually, the example does not define bookTpl anywhere that I can see. I did a search and it is nowhere to be found. Maybe my eyes are going real bad early, could you tell me what line it's on.

    Anywho, I experimented with the code a bit and apparently I don't even need to define the book template. All I do is call the updateDetail function in the Basic.js file.

    My concern now is why is the console.log('update'); in the code below being fired twice for every row click or keyboard row change that I perform on the grid. I suspect if it is running twice then the panel is also being updated twice with the same record which is unnecessary.

    The updated code is below

    Code:
    updateFooterDetails: function(sm, rs) {        var bookGridSm = Ext.getCmp('jobSearchList').getSelectionModel();
            
            if (rs.length) {
                var jobdetailbasic = Ext.getCmp('jobdetailbasic');
                jobdetailbasic.updateDetail(rs[0].data);
                //var tplMarkup = 
                    'Title: <a href="{op_comm_status}" target="_blank">{op_title}</a><br/>'
                    'Category: {job_category_level_two}<br/>'
                    'Description: {op_description}<br/>'
                    'Country: {op_country}<br/>';
                    
                //var bookTpl = Ext.create('Ext.Template', tplMarkup);
                //bookTpl.overwrite(jobdetailbasic.body, rs[0].data);
                console.log('update');
            }
            //bookGridSm.on('selectionchange', this.onRowSelect, this);
            
            
            var bookGridSm = sm;
            //console.log(rs[0].data);
            
            //var jobdetailbasic = Ext.widget('jobdetailbasic');
            //jobdetailbasic.updateDetail(rs[0].data);
            
            //bookGridSm.on('selectionchange', this.onRowSelect, this);
        }

  6. #6
    Sencha User
    Join Date
    Nov 2011
    Posts
    8
    Vote Rating
    0
    jjosephs is on a distinguished road

      0  

    Default


    Scratch that last one, after going through the code I just realized that I had one event handler attached in the init function and one the same event handler attached in the onLaunch function.

    Thanks for your input skirtle.

Thread Participants: 1

Tags for this Thread