PDA

View Full Version : Cannot hide simple button


karpatyx@ya.ru
25 Nov 2011, 8:07 AM
Hi guys,

I have simple View with 2 buttons:


Ext.define('ikhtml.view.main.DesktopView', {
extend: 'Ext.container.Container',
alias: 'widget.desktop',
title: 'Desktop View',


items:
[
{
xtype: 'button',
action: 'login',
text: 'Log in',
itemId: 'loginButton'
},
{
xtype: 'button',
action: 'logout',
text: 'Log out',
itemId: 'logoutButton'
}
]
});


Then I get these buttons in controller and show/hide them:


desktopView = Ext.widget('desktop');
var loginButtons = desktopView.query("#loginButton");
if (loginButtons.length != 1)
Ext.Msg.alert("Error! Found login buttons: " + loginButtons.length);
loginButton = loginButtons[0];

I call following methods to these buttons both within controller's Init method and on other buttons' clicks


loginButton.show();
logoutButton.hide();
loginButton.enable();
logoutButton.disable();


But they both are still visible and enabled. I also played with hideMode but the same result.
No any errors occur - I'm checking using Chrome Dev Tools.

As I missing something? Should I call kind of "refresh" on View after I did logoutButton.hide();?

Thank you.
mitchellsimoens
25 Nov 2011, 8:38 AM
This works for me:


Ext.define('ikhtml.view.main.DesktopView', {
extend: 'Ext.container.Container',
alias: 'widget.desktop',
title: 'Desktop View',

items: [
{
xtype: 'button',
action: 'login',
text: 'Log in',
itemId: 'loginButton'
},
{
xtype: 'button',
action: 'logout',
text: 'Log out',
hidden : true,
itemId: 'logoutButton'
}
]
});

Ext.onReady(function() {

var panel = Ext.create('ikhtml.view.main.DesktopView', {
renderTo : Ext.getBody(),
width : 400,
height : 400
});

var loginBtn = panel.down('button[action=login]'),
logoutBtn = panel.down('button[action=logout]');

loginBtn.on('click', function(btn) {
btn.hide();
logoutBtn.show();
});

logoutBtn.on('click', function(btn) {
btn.hide();
loginBtn.show();
});

});
karpatyx@ya.ru
28 Nov 2011, 6:37 AM
Your example works for me. However, the same one using MVC - doesn't.

Here are all parts:

1. Index.htm

<html>
<head>
<script src="extjs/ext-debug.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
</head>
<body>
</body>
</html>

2. app.js

Ext.application({
name: 'ikhtml',


controllers: [
'DesktopController'
],


launch: function ()
{
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'desktop'
}
]
});
}
});


3. View

Ext.define('ikhtml.view.main.DesktopView', {
extend: 'Ext.container.Container',
alias: 'widget.desktop',


title: 'Desktop View',
height: '100%',
width: '100%',
style: {
color: '#AAAAAA',
backgroundColor: '#CCCCCC'
},


items:
[
{
xtype: 'button',
action: 'login',
text: 'Log in',
itemId: 'loginButton'
},
{
xtype: 'button',
action: 'logout',
text: 'Log out',
hidden: true,
itemId: 'logoutButton'
}
]
});


4. Controller

Ext.define('ikhtml.controller.DesktopController', { extend: 'Ext.app.Controller',


views: [
'main.DesktopView'
],

desktopView: null,
loginButton: null,
logoutButton: null,

init: function ()
{
console.log("Initializing Desktop controller");


this.desktopView = Ext.widget('desktop');


var loginButtons = this.desktopView.query("#loginButton");
if (loginButtons.length != 1)
Ext.Msg.alert("Error! Found login buttons: " + loginButtons.length);
var logoutButtons = this.desktopView.query("#logoutButton");
if (logoutButtons.length != 1)
Ext.Msg.alert("Error! Found password buttons: " + logoutButtons.length);


this.loginButton = loginButtons[0];
this.logoutButton = logoutButtons[0];


this.control({
'desktop button[action=login]': {
click: this.onLogin
}
});


this.control({
'desktop button[action=logout]': {
click: this.onLogout
}
});


this.switchToLoginControls();
},


onLogin: function ()
{
this.switchToLogoutControls();
},


onLogout: function ()
{
this.switchToLoginControls();
},


switchToLoginControls: function ()
{
console.log('switchToLoginControls');


this.loginButton.show();
this.logoutButton.hide();
},


switchToLogoutControls: function ()
{
console.log('switchToLogoutControls');


this.loginButton.hide();
this.logoutButton.show();

console.log(this.loginButton);
console.log(this.logoutButton);
}
});

You can simply copy this code and create test app. You'll see it's not working. I think reason is in "this" references, but cannot clarify where for 4 days already.

Much thanks in advance.
karpatyx@ya.ru
28 Nov 2011, 9:42 AM
Got a workaround. However, I'm not happy with it - it's ugly.

On Controller Init:

init: function ()
{
this.control({
'desktop': {
beforerender: this.desktopBeforeRender
}
});

this.q = Ext.widget('desktop');

...


Then:

desktopBeforeRender: function (desktop)
{
console.log('Rendering desktop view');


this.desktopView = desktop;

console.log(this.q == this.desktopView); // GET FALSE! WHY??

this.setButtonVariables();
this.switchToLoginControls();
}


This workaround works well here, but I would like to make this.q == this.desktopView.

Why isn't it working? What am I missing?

Thank you.
tobiu
28 Nov 2011, 9:59 AM
to give you an idea about scoping:



this.control({
'desktop': {
beforerender: this.desktopBeforeRender,
scope: this
}
});
karpatyx@ya.ru
29 Nov 2011, 3:22 AM
Hi all,

Within the last few days I've read number of ExtJS MVC discussions. Looks like this topic is fresh and hot. I believe Sencha will come up with really strong MVC improvements in next releases.

Much helpful info can be found in this post: http://www.sencha.com/forum/showthread.php?131671-Advanced-MVC-Best-Practices&p=615488&viewfull=1#post615488

Here is what I did for now:

App.js:

Ext.application({
controllers: [
'DesktopController'
],


launch: function()
{
var viewport = Ext.create('Ext.container.Viewport', {
layout: 'fit'
});


this.fireEvent('createDesktop', viewport);
}
});


And what does controller:


Ext.define('ikhtml.controller.DesktopController', {
extend: 'Ext.app.Controller',


views: [
'main.DesktopView'
],


desktopView: null,


init: function ()
{
this.application.on({
createDesktop: this.onCreateDesktop,
scope: this
});
},


onCreateDesktop: function (viewport)
{
this.desktopView = Ext.widget('desktop'); // So, here I get link to my only and single view
viewport.add(this.desktopView); // And here I add it to viewport
},


This code works. Moreover, finally I like and understand this code.