CODEWITHSUNDEEP
sencha-touchsencha-touch-2
user1391869
user1391869

Reputation:

How to access ItemId in controller in sencha

I declared contain in main view. So how to access in controller. Here i have democontainer and demopanel. so how to access it.

    Ext.define('MyApp.view.Main', {
      extend: 'Ext.Panel',
      alias: 'widget.mainpage',


      config: {
        width: 710,
        margin: '10px auto 0',
        itemId: 'democontainer',
        layout: {
          type: 'hbox'
        },
        items: [
        {
          xtype:'container',
          cls:'wholeMenuWrap',
          margin: '65px 0 0 0',
          width: 175,

          items:[ 
....and
 {
    xtype: 'homepage',
    cls:'homepage-wrap',
    itemId: 'demopanel',
    layout: {
      type: 'fit'
    }
  },
  {
    xtype:'container',
    layout: 'vbox',
    margin: '65px 0 0 0',

    width: 185,
    items:[
    {
      xtype: 'titlebar',          
      cls:'roundedToolbar',

I want to access on controller like this, but i am unable to access it.

    config: {
        main:this,
        profile: Ext.os.deviceType.toLowerCase(),

       refs:{
       myContainer: 'mainpage',
       },
        control: {
          'mainpage': {
            activate: 'onActivate',
            itemtap: 'onItemTap',
            },
'mainpage textfield[itemId=searchBox]' : {
//clear the input text box
clearicontap : 'onClearSearch',
//on every key stroke
keyup: 'onSearchKeyUp'
},

........

   onSearchKeyUp: function(searchField) {
   var container = this.up('#democontainer');
          var panel = container.down('#demopanel');
          panel.removeInnerAt(0);
          var submitWordBySearch = { xtype: 'searchplusfav' }; 
          panel.insert(0, submitWordBySearch);

I am getting this error:

Uncaught TypeError: Object [object global] has no method 'up'

anyone please help me out.

I added New Code:

    refs:{

         myContainer: 'mainpage',
         demoContainer2: '#democontainer', //same as demoContainer1
         demoContainer3:'#demopanel'
       },

...-------------
  onSearchKeyUp: function(searchField) {
 var container = this.getDemoContainer2();
           var panel = container.getDemoContainer3();
          panel.removeInnerAt(0);
          var submitWordBySearch = { xtype: 'searchplusfav' }; 
          panel.insert(0, submitWordBySearch);

Getting error:

Uncaught TypeError: Object [object global] has no method 'demoContainer2'

Working code:

  onKeySubmitTap: function(dataview, index, target, record, e, options) 
  {
    var container = dataview.up('#democontainer');
    var panel = container.down('#demopanel');
    panel.removeInnerAt(0);
    var submitWordBySearch = { xtype: 'categorywordsdisplay' }; 
    panel.insert(0, submitWordBySearch);
  }

Upvotes: 1

Views: 673

Answers (2)

user1391869
user1391869

Reputation:

I add this for my own problem, which is exact work:

 var container = Ext.Viewport.up('#democontainer');
  var panel = Ext.Viewport.down('#demopanel');
  panel.removeInnerAt(0);
  var submitWordBySearch = { xtype: 'submitnewdefinitionholder' }; 
  panel.insert(0, submitWordBySearch);

Upvotes: 2

kevhender
kevhender

Reputation: 4405

Using this.up() within a controller will not really do anything. To get a reference to democontainer, you first should realize that declaring an itemId in the config of a class is kind of useless; this should really be done when declaring a class instance. You essentially already have a reference to #democontainer because these 2 are equivalent with your current class config:

refs: {
    demoContainer1: 'mainpage',
    demoContainer2: '#democontainer' //same as demoContainer1
}

So, using the ref that you already have, to get that reference later in the controller, all you need to use is this.getMyContainer():

refs: {
    myContainer: 'mainpage',
},
....
onSearchKeyUp: function(field) {
    var container = this.getMyContainer();
    ....
}

Upvotes: 0

Related Questions