Reputation:
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
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
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