Results 1 to 5 of 5

Thread: Uncaught TypeError: Cannot read property 'headerCt' of undefined

  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    41

    Default Uncaught TypeError: Cannot read property 'headerCt' of undefined

    Hi
    I append a add button for my grid panel with rowediting plugin

    onButtonClick: function(button, e, options) {


    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToMoveEditor: 1,
    autoCancel: false
    });
    var store = this.getWaitersListStoreStore();
    //var grid=Ext.ComponentQuery.query('#WaitersDataGrid');
    console.log(button.id);
    if (button.id == 'btt-add')
    {
    rowEditing.cancelEdit();
    var model=this.getWaitersListDataModel();
    var r = Ext.ModelManager.create({
    customer:'selec user',
    destination:'destination',
    from_date:'date',
    to_date:'date',
    from_cost:'date',
    to_cost:'date',
    hotel_stars:'date',
    airline:'date',
    sure:false,
    visited:false


    },model);
    store.insert(0,r);
    rowEditing.startEdit(0, 0);


    but when I click on add button I get this error :
    Uncaught TypeError: Cannot read property 'headerCt' of undefined

  2. #2
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Answers
    44

    Default

    Create row editing plugin in grid initComponent function and store reference in grid (or use pluginId cfg, read plugin docs) -
    PHP Code:
    // grid init component
    initComponent: function () {
      var 
    me this;

            
    me.rowEditing Ext.create('Ext.grid.plugin.RowEditing', {
                
    clicksToEdit2,
                
    autoCanceltrue
            
    });

            
    me.plugins = [
                
    me.rowEditing
            
    ];

    then in you button click handler:
    PHP Code:
    var store this.getWaitersListStoreStore(); 
    var 
    grid=Ext.ComponentQuery.query('#WaitersDataGrid');
    var 
    rowEditing grid.rowEditing;

    console.log(button.id);
    if (
    button.id == 'btt-add')
    {
    rowEditing.cancelEdit();
    var 
    model=this.getWaitersListDataModel();
    var 
    Ext.ModelManager.create({ 
    customer:'selec user',
    destination:'destination'
    from_date:'date',
    to_date:'date',
    from_cost:'date',
    to_cost:'date',
    hotel_stars:'date',
    airline:'date',
    sure:false,
    visited:false 


    },model);
    store.insert(0,r);
    rowEditing.startEdit(00); 
    Last edited by redraid; 19 Jun 2012 at 3:33 AM. Reason: fix

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    41

    Default

    I did it but i got this error :
    Uncaught TypeError: Cannot read property 'selModel' of undefined

    here is my view code


    Ext.define('MyApp.view.WaitersList', {
    extend: 'Ext.window.Window',
    // stores :['Customers','WaitersListStore'],
    autoShow: true,
    height: 536,
    id: 'waiterLists',
    width: 642,
    autoScroll: true,
    title: 'Waiters List',


    initComponent: function() {
    var me = this;


    Ext.applyIf(me, {
    items: [
    {
    xtype: 'fieldcontainer',
    height: 25,
    id: 'DateContainer',
    width: 516,
    activeItem: 0,
    layout: {
    align: 'stretch',
    type: 'hbox'
    },
    fieldLabel: '',
    items: [
    {
    xtype: 'datefield',
    id: 'from_date',
    width: 194,
    fieldLabel: '?? ?????',
    format: 'Y-m-d',
    flex: 0
    },
    {
    xtype: 'datefield',
    id: 'to_date',
    width: 194,
    fieldLabel: '?? ?????',
    format: 'Y-m-d'
    }
    ]
    },
    {
    xtype: 'multislider',
    id: 'CostMultiSlider',
    width: 516,
    fieldLabel: '?????',
    increment: 20000,
    keyIncrement: 0,
    maxValue: 800000,
    minValue: 40000,
    values: [
    10,
    40
    ]
    },
    {
    xtype: 'fieldcontainer',
    height: 50,
    width: 610,
    layout: {
    align: 'middle',
    type: 'hbox'
    },
    fieldLabel: '',
    labelPad: 3,
    items: [
    {
    xtype: 'checkboxfield',
    id: 'Sure',
    fieldLabel: '????',
    boxLabel: '',
    flex: 0
    },
    {
    xtype: 'combobox',
    width: 258,
    fieldLabel: '??? ???',
    labelPad: 0,
    typeAhead: false,
    flex: 1
    },
    {
    xtype: 'textfield',
    width: 172,
    fieldLabel: '????',
    flex: 1
    }
    ]
    },
    {
    xtype: 'panel',
    height: 31,
    id: 'DataPanel',
    title: '',
    dockedItems: [
    {
    xtype: 'fieldcontainer',
    height: 43,
    width: 100,
    fieldLabel: '',
    dock: 'top',
    items: [
    {
    xtype: 'button',
    id: 'btt-add',
    text: '????? ???? ?? ????'
    }
    ]
    }
    ]
    },
    {
    xtype: 'gridpanel',

    id: 'WaitersDataGrid',
    title: 'Waiters',
    store: 'WaitersListStore',
    initComponent: function () {


    var me = this;


    me.rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToEdit: 2,
    autoCancel: true,
    ptype: 'rowediting',
    clicksToEdit: 1,
    clicksToMoveEditor: 1,
    listeners: {
    edit: {
    fn: me.onGridroweditingpluginEdit,
    scope: me
    }
    }
    });


    me.plugins = [
    me.rowEditing
    ];


    columns: [

    {

    xtype: 'gridcolumn',
    width: 70,
    store: 'Customers',
    displayField: 'family',


    defaultType: 'combo',
    dataIndex: 'customer',
    editor: {
    xtype: 'combo'
    },
    text: 'Customer',
    listConfig: {
    loadingText: 'Searching...',
    emptyText: 'No matching posts found.',
    getInnerTpl: function() {
    return '{family}';
    }
    },
    valueField: 'id'
    },
    {
    xtype: 'gridcolumn',
    width: 70,
    dataIndex: 'destination',
    editor: {
    xtype: 'textfield'
    },
    text: 'Destination'
    },
    {
    xtype: 'datecolumn',
    width: 70,
    dataIndex: 'from_date',
    editor: {
    xtype: 'datefield'
    },
    text: 'From_date'
    },
    {
    xtype: 'datecolumn',
    width: 60,
    dataIndex: 'to_date',
    editor: {
    xtype: 'datefield'
    },
    text: 'To_date'
    },
    {
    xtype: 'gridcolumn',
    width: 70,
    dataIndex: 'from_cost',
    editor: {
    xtype: 'numberfield'
    },
    text: 'From_cost'
    },
    {
    xtype: 'gridcolumn',
    width: 50,
    dataIndex: 'to_cost',
    editor: {
    xtype: 'numberfield'
    },
    text: 'To_cost'
    },
    {
    xtype: 'gridcolumn',
    width: 50,
    dataIndex: 'hotel_stars',
    editor: {
    xtype: 'numberfield'
    },
    text: 'Hotel_stars'
    },
    {
    xtype: 'gridcolumn',
    width: 60,
    dataIndex: 'airline',
    editor: {
    xtype: 'textfield'
    },
    text: 'Airline'
    },
    {
    xtype: 'booleancolumn',
    width: 50,
    dataIndex: 'visited',
    editor: {
    xtype: 'checkbox',
    cls: 'x-grid-checkheader-editor'
    },
    text: 'Visited'
    },
    {
    xtype: 'booleancolumn',
    width: 50,
    dataIndex: 'sure',
    editor: {
    xtype: 'checkbox',
    cls: 'x-grid-checkheader-editor'
    },
    text: 'Sure'
    }
    ]}

    }
    ]


    // renderTo:Ext.getCmp('room-table');
    });


    me.callParent(arguments);
    },

  4. #4
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Answers
    44

    Default

    Define WaitersDataGrid to.

  5. #5
    Sencha Premium User jvandemerwe's Avatar
    Join Date
    Apr 2009
    Location
    Raalte, Netherlands
    Posts
    253
    Answers
    7

    Default Use the code option please

    This post is not extremely attractive to read with the code just pasted in like that.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •