1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    2
    Vote Rating
    0
    kpr@emco is on a distinguished road

      0  

    Default XTemplate with in EditorGridPanel

    XTemplate with in EditorGridPanel


    Hi ,

    I have an EditiorGridPanel whose one column i am using XTemplate to render and another Column is Combo Box Field .
    When i render the EditorGridPanel , it renderes correctly .
    But, when i click on the ComboBox cell. Extjs throws an Error this.boundEI is undefined in Ext.Editor Class.
    Any Clue, why this is happening?

    Thanks

  2. #2
    Sencha User
    Join Date
    Jul 2009
    Posts
    4
    Vote Rating
    0
    nishnet2002 is on a distinguished road

      0  

    Default


    Can you post your code ?

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    2
    Vote Rating
    0
    kpr@emco is on a distinguished road

      0  

    Default


    Hi, I found the issue.
    The issue was in XTemplate definition.
    If we have a 'templatecolumn' , and with in XTemplate definition we have defined a HTMLtable, with in that HTMLtable we have another HTMLTable , and adjacent column to this column is editable .
    In runtime, When user selects the editable column , Browser throws an exception.
    see the code below,

    If we have only one HTMLtable , the behavior of the grid is as expected.
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../ext-js/resources/css/ext-all.css">
    <title>Ext 2.0 Editor Grid Example</title>
    <style type="text/css">
    .img {
    font-size:12px;
    }
    </style>
    <script type="text/javascript" src="../ext-js/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-js/ext-all-debug.js"></script>
    <script type="text/javascript">

    Ext.onReady(function(){
    var gridData = [
    [1, 'US', 'Washington', 9826630]
    ,[2, 'UK', 'London', 244820]
    ,[3, 'DE', 'Berlin', 357021]
    ,[4, 'F', 'Paris', 674843]
    ,[5, 'NL', 'Amsterdam', 41526]
    ,[6, 'SK', 'Bratislava', 49035]
    ,[7, 'JP', 'Tokyo', 377873]
    ,[8, 'A', 'Vienna', 88872]
    ,[9, 'CA', 'Ottawa', 9984670]
    ];
    var countries = [
    ['US', 'United States']
    ,['UK', 'United Kingdom']
    ,['DE', 'Germany']
    ,['F', 'France']
    ,['NL', 'Netherlands']
    ,['SK', 'Slovakia']
    ,['JP', 'Japan']
    ,['A', 'Austria']
    ,['CA', 'Canada']
    ];
    var combo = Ext.extend(Ext.form.ComboBox,{
    store: new Ext.data.SimpleStore({
    fields:['countryCode', 'countryName']
    ,data:countries
    ,id:0
    })
    ,valueField:'countryCode'
    ,displayField:'countryName'
    ,lazyRender:true
    ,triggerAction:'all'
    ,mode:'local'
    ,initComponent : function(){
    combo.superclass.initComponent.call(this);
    }
    });
    var renderCountry = function(val, cell, record, rowIndex, colIndex, store) {
    return this.getById(val).get('countryName');
    };

    var template = new Ext.XTemplate(
    '<DIV>',
    '<TABLE>',
    '<tpl>',
    '<TR><TD width="100%">',
    '<TABLE><TR><TD>',
    ' ({values.countryCode})<br>{values.capital}',
    '</TD></TR></TABLE>',
    '</TD></TR></tpl>',
    '</TABLE>',
    '</DIV>',
    {
    compiled:true

    });

    var gridStore = new Ext.data.SimpleStore({
    fields:['ID', 'countryCode', 'capital', 'area']
    ,id:0
    })

    var grid = Ext.extend(Ext.grid.EditorGridPanel,{
    clicksToEdit:1,

    store: gridStore
    ,columns:[{
    header:'Country'
    ,sortable:true
    ,dataIndex:'countryCode'
    ,editor:new combo()
    ,renderer:renderCountry.createDelegate((new combo()).store)
    },{
    header:'Capital'
    ,sortable:true
    ,dataIndex:'capital'
    ,xtype : 'templatecolumn'
    ,tpl :template
    },{
    header:'Area [km2]'
    ,sortable:true
    ,dataIndex:'area'
    ,align:'right'
    ,editor:new Ext.form.NumberField({})
    }]
    ,viewConfig:{forceFit:true},

    initComponent : function(){
    grid.superclass.initComponent.call(this);
    }
    });
    var win = new Ext.Window({
    title:'Ext 2.0 Editor Grid Example'
    ,layout:'fit'
    ,width:400
    ,height:300
    ,items:[new grid()]
    ,listeners : {
    scope : this,
    'show' :function(window){
    window.items.get(0).getStore().loadData(gridData,false);
    }
    }
    });
    win.show();
    });

    </script>
    </head>
    <body>
    </body>
    </html>

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Location
    Shenzhen city guangdong province of China
    Posts
    7
    Vote Rating
    0
    Jueying is on a distinguished road

      0  

    Smile What

    What


    I
    Just do it

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    1
    Vote Rating
    0
    davehandong is on a distinguished road

      0  

    Red face this is the title

    this is the title


    this is the content

Similar Threads

  1. XTemplate Help
    By visual-a in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 9 Dec 2010, 9:34 AM
  2. Replies: 1
    Last Post: 17 Jun 2010, 4:34 PM
  3. XTemplate to PDF
    By nak1 in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 2 Sep 2009, 7:17 AM
  4. XTemplate - Need help
    By D in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 13 Aug 2008, 9:58 PM
  5. Better way to do XTemplate w/ XML than this?
    By scottblue in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 2 Feb 2008, 1:06 AM

Thread Participants: 3