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 User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      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 User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar