How to hide button is Sencha Touch 2.1 - sencha-touch

I've found similar questions on this site but none of the answers has been working for me. This is button I want to hide (view):
{
xtype: 'button',
id: 'btn_messenger',
text: 'Messenger'
}
Controller for that view has init function:
init : function() {
var me = this;
me.callParent();
me.hideMessengerButton(me);
}
This is the function that should hide button:
hideMessengerButton: function(me) {
var user = me.getLoggedUser(); // return user or undefined
if (user == undefined) {
Ext.select('#btn_messenger').hide(); // Does nothing
}
}
I've tried these options:
Ext.getCmp('btn_messenger').hide(); // Ext.getCmp('btn_messenger') returns undefined
Ext.getCmp('#btn_messenger').hide(); // Ext.getCmp('#btn_messenger') returns undefined
In controller's refs there is btn_messenger: '#btn_messenger', so I've tried:
this.getBtn_messenger().hide() // this.getBtn_messenger() returns undefined
Thanks for help in advance.
PS.: I don't know if this matters but the view mentioned above is not the main view. It is pushed after button tap on the main view.
EDIT:
Here is the controller:
Ext.define('First.controller.HomePage', {
extend : 'First.controller.Controller',
requires : ['First.view.Main', 'First.view.HomePage'],
config : {
refs : {
pnl_home: 'pnl_home',
btn_messenger : '#btn_messenger'
},
control : {
btn_messenger : {
tap : 'btn_openMessenger'
}
pnl_home: {
show: 'hideMessengerButton'
}
},
},
init : function() {
var me = this;
me.callParent();
},
btn_openMessenger : function() {
Ext.Msg.alert('Open', 'Messenger');
},
/**
* Hide meseenger button when user's not logged in
*/
hideMessengerButton : function() {
var me = this;
var user = me.getLoggedUser();
if (user == undefined) {
me.getBtn_messenger().setHidden(true);
}
}
});

http://docs.sencha.com/touch/2-1/#!/api/Ext.Button-method-setHidden
in your action
replaces refs
refs : {
btnMessenger: '#btn_messenger'
},
then when you need this button on action use next
this.getBtnMessenger().setHidden(true)
also on init button are not yet added to dom as i remember
lauch : function() {
this.hideMessengerButton();
},
hideMessengerButton: function() {
var user = this.getLoggedUser(); // return user or undefined
if (user == undefined) {
this.getBtnMessenger().setHidden(true); // Does nothing
}
}

I've added pnl_home: 'pnl_home', to refs and called show event on the panel. Modified code can be found above, in my initial post.

Related

Sencha touch 2 custom list item button tap not fired

I am developing a Hybrid Mobile App over sencha touch 2.
Now I was in a need of a custom component to be specific a custom list item consisting of a button along with.
My view has rendered as i wanted to but the button that is added to the list item is not firing the TAP event as expected. Instead on every tap, the ITEMTAP event is fired which is creating a bit of mess.
Can someone suggest me where to look to make this work ?
Below is the code for the custom component that i created:
var listView = {
xtype : "list",
id : "desk-list-search-results",
cls : "desk-list-search-results-cls",
selectedCls : "",
defaultType:"desksearchlistitem",
store : "deskstore",
flex : 2
};
This is the code for the custom component
Ext.define("MyApp.view.DeskSearchListItem",{
extend:"Ext.dataview.component.ListItem",
requires:["Ext.Button"],
alias:"widget.desksearchlistitem",
initialize:function()
{
this.callParent(arguments);
},
config:{
layout:{
type:"hbox",
align:"left"
},
cls:'x-list-item desk-search-list-item',
title:{
cls:"desk-list-item",
flex:0,
styleHtmlContent:true,
style:"align:left;"
},
image:{
cls:"circle_image",
width:"28px",
height:"28px"
},
button:{
cls:'x-button custom-button custom-font bookdesk-button',
flex:0,
text:"Book",
width:"113px",
height:"46px",
hidden:true
},
dataMap:{
getTitle:{
setHtml:'title'
}
}
},
applyButton:function(config)
{
return Ext.factory(config,Ext.Button,this.getButton());
},
updateButton:function(newButton,oldButton)
{
if(newButton)
{
this.add(newButton);
}
if(oldButton)
{
this.remove(oldButton);
}
},
applyTitle:function(config)
{
return Ext.factory(config,Ext.Component,this.getTitle());
},
updateTitle:function(newTitle,oldTitle)
{
if(newTitle)
{
this.add(newTitle);
}
if(oldTitle)
{
this.remove(oldTitle);
}
},
applyImage:function(config)
{
return Ext.factory(config,Ext.Component,this.getImage());
},
updateImage:function(newImage,oldImage)
{
if(newImage)
{
this.add(newImage);
}
if(oldImage)
{
this.remove(oldImage);
}
}
})
Finally got a solution to this,
It can be done into the view using the listeners object.
Here is the code sample for it.
listeners:{
initialize:function()
{
var dataview = this;
dataview.on("itemtap",function(list,index,target,record,event){
event.preventDefault();
});
dataview.on("itemswipe",function(list,index,target,record,event){
if(event.direction === "right")
{
var buttonId = target.element.down(".bookdesk-button").id;
var buttonEl = Ext.ComponentQuery.query("#"+buttonId)[0];
if(Ext.isObject(buttonEl))
{
buttonEl.setZIndex(9999);
buttonEl.show({
showAnimation:{
type:"slideIn",
duration:500
}
});
var listeners = {
tap:function(btn,e,opt)
{
console.log("Button Tapped");
}
};
buttonEl.setListeners(listeners);
}
else
{
console.log("This is not a valid element");
}
}
});
}
}
Thanks Anyways.

Routing/Modularity in Dojo (Single Page Application)

I worked with backbone before and was wondering if there's a similar way to achieve this kind of pattern in dojo. Where you have a router and pass one by one your view separately (like layers) and then you can add their intern functionality somewhere else (e.g inside the view) so the code is very modular and can be change/add new stuff very easily. This code is actually in jquery (and come from a previous project) and it's a "common" base pattern to develop single application page under jquery/backbone.js .
main.js
var AppRouter = Backbone.Router.extend({
routes: {
"home" : "home"},
home: function(){
if (!this.homeView) {
this.homeView= new HomeView();
}
$('#content').html(this.homeView.el);
this.homeView.selectMenuItem('home-link');
}};
utils.loadTemplate(['HomeView'], function() {
app = new AppRouter();
Backbone.history.start();
});
utils.js
loadTemplate: function(views, callback) {
var deferreds = [];
$.each(views, function(index, view) {
if (window[view]) {
deferreds.push($.get('tpl/' + view + '.html', function(data) {
window[view].prototype.template = _.template(data);
}));
} else {
alert(view + " not found");
}
});
$.when.apply(null, deferreds).done(callback);
}};
HomeView.js
window.HomeView = Backbone.View.extend({
initialize:function () {
this.render();
},
render:function () {
$(this.el).html(this.template());
return this;
}
});
And basically, you just pass the html template. This pattern can be called anywhere with this link:
<li class="active"><i class="icon-home"></i> Dashboard</li>
Or, what is the best way to implement this using dojo boilerplate.
The 'boilerplate' on this subject is a dojox.mvc app. Reference is here.
From another aspect, see my go at it a while back, ive setup an abstract for 'controller' which then builds a view in its implementation.
Abstract
Then i have an application controller, which does following on its menu.onClick
which fires loading icon,
unloads current pane (if forms are not dirty)
loads modules it needs (defined 'routes' in a main-menu-store)
setup view pane with a new, requested one
Each view is either simply a server-html page or built with a declared 'oocms' controller module. Simplest example of abstract implementation here . Each implements an unload feature and a startup feature where we would want to dereference stores or eventhooks in teardown - and in turn, assert stores gets loaded etc in the setup.
If you wish to use templates, then base your views on the dijit._TemplatedMixin
edit
Here is a simplified clarification of my oocms setup, where instead of basing it on BorderLayout, i will make it ContentPanes:
Example JSON for the menu, with a single item representing the above declared view
{
identifier: 'view',
label: 'name',
items: [
{ name: 'myForm', view: 'App.view.MyForm', extraParams: { foo: 'bar' } }
]
}
Base Application Controller in file 'AppPackagePath/Application.js'
Note, the code has not been tested but should give a good impression of how such a setup can be implemented
define(['dojo/_base/declare',
"dojo/_base/lang",
"dijit/registry",
"OoCmS/messagebus", // dependency mixin which will monitor 'notify/progress' topics'
"dojo/topic",
"dojo/data/ItemFileReadStore",
"dijit/tree/ForestStoreModel",
"dijit/Tree"
], function(declare, lang, registry, msgbus, dtopic, itemfilereadstore, djforestmodel, djtree) {
return declare("App.Application", [msgbus], {
paneContainer: NULL,
treeContainer: NULL,
menuStoreUrl: '/path/to/url-list',
_widgetInUse: undefined,
defaultPaneProps: {},
loading: false, // ismple mutex
constructor: function(args) {
lang.mixin(this, args);
if(!this.treeContainer || !this.paneContainer) {
console.error("Dont know where to place components")
}
this.defaultPaneProps = {
id: 'mainContentPane'
}
this.buildRendering();
},
buildRendering: function() {
this.menustore = new itemfilereadstore({
id: 'appMenuStore',
url:this.menuStoreUrl
});
this.menumodel = new djforestmodel({
id: 'appMenuModel',
store: this.menustore
});
this.menu = new djtree( {
model: this.menumodel,
showRoot: false,
autoExpand: true,
onClick: lang.hitch(this, this.paneRequested) // passes the item
})
// NEEDS a construct ID HERE
this.menu.placeAt(this.treeContainer)
},
paneRequested: function(item) {
if(this.loading || !item) {
console.warn("No pane to load, give me a menustore item");
return false;
}
if(!this._widgetInUse || !this._widgetInUse.isDirty()) {
dtopic.publish("notify/progress/loading");
this.loading = true;
}
if(typeof this._widgetInUse != "undefined") {
if(!this._widgetInUse.unload()) {
// bail out if widget says 'no' (isDirty)
return false;
}
this._widgetInUse.destroyRecursive();
delete this._widgetInUse;
}
var self = this,
modules = [this.menustore.getValue(item, 'view')];
require(modules, function(viewPane) {
self._widgetInUse = new viewPane(self.defaultProps);
// NEEDS a construct ID HERE
self._widgetInUse.placeAt(this.paneContainer)
self._widgetInUse.ready.then(function() {
self.paneLoaded();
})
});
return true;
},
paneLoaded: function() {
// hide ajax icons
dtopic.publish("notify/progress/done");
// assert widget has started
this._widgetInUse.startup();
this.loading = false;
}
})
})
AbstractView in file 'AppPackagePath/view/AbstractView.js':
define(["dojo/_base/declare",
"dojo/_base/Deferred",
"dojo/_base/lang",
"dijit/registry",
"dijit/layout/ContentPane"], function(declare, deferred, lang, registry, contentpane) {
return declare("App.view.AbstractView", [contentpane], {
observers: [], // all programmatic events handles should be stored for d/c on unload
parseOnLoad: false,
constructor: function(args) {
lang.mixin(this, args)
// setup ready.then resolve
this.ready = new deferred();
// once ready, create
this.ready.then(lang.hitch(this, this.postCreate));
// the above is actually not nescessary, since we could simply use onLoad in contentpane
if(typeof this.content != "undefined") {
this.set("content", this.content);
this.onLoad();
} else if(typeof 'href' == "undefined") {
console.warn("No contents nor href set in construct");
}
},
startup : function startup() {
this.inherited(arguments);
},
// if you override this, make sure to this.inherited(arguments);
onLoad: function() {
dojo.parser.parse(this.contentNode);
// alert the application, that loading is done
this.ready.resolve(null);
// and call render
this.render();
},
render: function() {
console.info('no custom rendering performed in ' + this.declaredClass)
},
isDirty: function() { return false; },
unload: function() {
dojo.forEach(this.observers, dojo.disconnect);
return true;
},
addObserver: function() {
// simple passthrough, adding the connect to handles
var handle = dojo.connect.call(dojo.window.get(dojo.doc),
arguments[0], arguments[1], arguments[2]);
this.observers.push(handle);
}
});
});
View implementation sample in file 'AppPackagePath/view/MyForm.js':
define(["dojo/_base/declare",
"dojo/_base/lang",
"App/view/AbstractView",
// the contentpane href will pull in some html
// in the html can be markup, which will be renderered when ready
// pull in requirements here
"dijit/form/Form", // markup require
"dijit/form/Button" // markup require
], function(declare, lang, baseinterface) {
return declare("App.view.MyForm", [baseinterface], {
// using an external HTML file
href: 'dojoform.html',
_isDirty : false,
isDirty: function() {
return this._isDirty;
},
render: function() {
var self = this;
this.formWidget = dijit.byId('embeddedForm') // hook up with loaded markup
// observer for children
dojo.forEach(this.formWidget._getDescendantFormWidgets(), function(widget){
if(! lang.isFunction(widget.onChange) )
console.log('unable to observe ' + widget.id);
self.addObserver(widget, 'onChange', function() {
self._isDirty = true;
});
});
//
},
// #override
unload: function() {
if(this.isDirty()) {
var go = confirm("Sure you wish to leave page before save?")
if(!go) return false;
}
return this.inherited(arguments);
}
})
});

Sencha Touch 2: Call controller function from within Ext.Msg.confirm

I'm just getting started with Sencha Touch 2 and I have never worked with Sencha Touch 1.x before. I've just finished this tutorial (which is the best starter tutorial I have found so far) http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-1/ and now I want to go ahead and extend this Notes App.
I have a controller and 2 views, a list view and an edit view. In the edit view I want to be able to delete the current record. The delete function is in the controller. After tapping the delete button, I want to show a confirmation dialog ("Are you sure you want to delete...?"). After the user presses yes, the delete function should be called.
Now my problem is: How do I call the controllers delete function from within Ext.Msg.confirm?
Here are the relevant snippets of my code. Please let me know if something important is missing.
Please see the "onDeleteNoteCommand" function. "this.someFunction" obviously doesn't work since "this" is a DOMWindow.
Ext.define('TestApp2.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
noteEditorView: 'noteeditorview'
},
control: {
noteEditorView: {
deleteNoteCommand: 'onDeleteNoteCommand',
}
}
},
onDeleteNoteCommand: function() {
console.log('onDeleteNoteCommand');
var noteEditor = this.getNoteEditorView();
var currentNote = noteEditor.getRecord();
Ext.Msg.confirm(
"Delete note?",
"Do you reall want to delete the note <i>"+currentNote.data.title+"</i>?",
function(buttonId) {
if(buttonId === 'yes') {
//controller functions!! how to call them?
this.deleteNote(currentNote);
this.activateNotesList();
}
}
);
},
deleteNote: function(record) {
var notesStore = Ext.getStore('Notes');
notesStore.remove(record);
notesStore.sync();
},
activateNotesList: function() {
Ext.Viewport.animateActiveItem(this.getNotesListView(), this.slideRightTransition);
},
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
launch: function() {
this.callParent();
Ext.getStore('Notes').load();
console.log('launch main controller');
},
init: function() {
this.callParent();
console.log('init main controller');
}
});
When you enter callback function of Ext.Msg the scope changes from controller scope to global scope (window), so you must set up it as parameter of confirm method:
Ext.Msg.confirm(
"Delete note?",
"Do you reall want to delete the note <i>"+currentNote.data.title+"</i>?",
function(buttonId) {
if(buttonId === 'yes') {
this.deleteNote(currentNote);
this.activateNotesList();
}
},
this // scope of the controller
);
For more info please check sencha docs: http://docs.sencha.com/touch/2-0/#!/api/Ext.MessageBox-method-confirm

Add a custom button in column header dropdown menus {EXTJS 4}

I want a button in column header dropdown menu of grid in extjs4.
so that i can add or delete columns which are linked in database.
Any help will be appreciated...
Thankyou..:)
Couple of months ago I had the same problem. I've managed to solve it by extending Ext.grid.header.Container (I've overrided getMenuItems method). However, recently, I've found another solution which requires less coding: just add menu item manualy after grid widget is created.
I'll post the second solution here:
Ext.create('Ext.grid.Panel', {
// ...
listeners: {
afterrender: function() {
var menu = this.headerCt.getMenu();
menu.add([{
text: 'Custom Item',
handler: function() {
var columnDataIndex = menu.activeHeader.dataIndex;
alert('custom item for column "'+columnDataIndex+'" was pressed');
}
}]);
}
}
});
Here is demo.​
UPDATE
Here is demo for ExtJs4.1.
From what I have been seeing, you should avoid the afterrender event.
Context:
The application I am building uses a store with a dynamic model. I want my grid to have a customizable model that is fetched from the server (So I can have customizable columns for my customizable grid).
Since the header wasn't available to be modified (since the store gets reloaded and destroys the existing menu that I modified - using the example above). An alternate solution that has the same effect can be executed as such:
Ext.create('Ext.grid.Panel', {
// ...
initComponent: function () {
// renders the header and header menu
this.callParent(arguments);
// now you have access to the header - set an event on the header itself
this.headerCt.on('menucreate', function (cmp, menu, eOpts) {
this.createHeaderMenu(menu);
}, this);
},
createHeaderMenu: function (menu) {
menu.removeAll();
menu.add([
// { custom item here }
// { custom item here }
// { custom item here }
// { custom item here }
]);
}
});
For people who would like to have not just one "standard" column menu but have an individual columnwise like me, may use the following
initComponent: function ()
{
// renders the header and header menu
this.callParent(arguments);
// now you have access to the header - set an event on the header itself
this.headerCt.on('menucreate', function (cmp, menu, eOpts) {
menu.on('beforeshow', this.showHeaderMenu);
}, this);
},
showHeaderMenu: function (menu, eOpts)
{
//define array to store added compoents in
if(this.myAddedComponents === undefined)
{
this.myAddedComponents = new Array();
}
var columnDataIndex = menu.activeHeader.dataIndex,
customMenuComponents = this.myAddedComponents.length;
//remove components if any added
if(customMenuComponents > 0)
{
for(var i = 0; i < customMenuComponents; i++)
{
menu.remove(this.myAddedComponents[i][0].getItemId());
}
this.myAddedComponents.splice(0, customMenuComponents);
}
//add components by column index
switch(columnDataIndex)
{
case 'xyz': this.myAddedComponents.push(menu.add([{
text: 'Custom Item'}]));
break;
}
}
I took #nobbler's answer an created a plugin for this:
Ext.define('Ext.grid.CustomGridColumnMenu', {
extend: 'Ext.AbstractPlugin',
init: function (component) {
var me = this;
me.customMenuItemsCache = [];
component.headerCt.on('menucreate', function (cmp, menu) {
menu.on('beforeshow', me.showHeaderMenu, me);
}, me);
},
showHeaderMenu: function (menu) {
var me = this;
me.removeCustomMenuItems(menu);
me.addCustomMenuitems(menu);
},
removeCustomMenuItems: function (menu) {
var me = this,
menuItem;
while (menuItem = me.customMenuItemsCache.pop()) {
menu.remove(menuItem.getItemId(), false);
}
},
addCustomMenuitems: function (menu) {
var me = this,
renderedItems;
var menuItems = menu.activeHeader.customMenu || [];
if (menuItems.length > 0) {
if (menu.activeHeader.renderedCustomMenuItems === undefined) {
renderedItems = menu.add(menuItems);
menu.activeHeader.renderedCustomMenuItems = renderedItems;
} else {
renderedItems = menu.activeHeader.renderedCustomMenuItems;
menu.add(renderedItems);
}
Ext.each(renderedItems, function (renderedMenuItem) {
me.customMenuItemsCache.push(renderedMenuItem);
});
}
}
});
This is the way you use it (customMenu in the column config let you define your menu):
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
plugins: ['Ext.grid.CustomGridColumnMenu'],
columns: [
{
dataIndex: 'name',
customMenu: [
{
text: 'My menu item',
menu: [
{
text: 'My submenu item'
}
]
}
]
}
]
});
The way this plugin works also solves an issue, that the other implementations ran into. Since the custom menu items are created only once for each column (caching of the already rendered version) it will not forget if it was checked before or not.

ExtJS 4 - Control events of items in MVC

I have an application in MVC with a view class:
Ext.define('a.view.Mainmenu' ,{
extend: 'Ext.menu.Menu',
alias: 'widget.mainmenu',
text: 'Menu',
items: [
{
xtype: 'menucheckitem',
id: 'mci1',
text: 'a'
},
{
xtype: 'menucheckitem',
id: 'mci2',
text: 'b'
}]
});
How I can control the click events of the menucheckitems in the controller? I want to check if the menucheckitems are checked.
I tried something in the init function of the controller, but there is an error (item.down("mci1") is null):
...
init: function() {
this.control({
'mainmenu': {
click: function(item) {
if (item.down('mci1').checked == true) {
...
}
if (item.down('mci2').checked == true) {
...
}
}
}
});
}
How I could do it right?
#Ringo,
Neither the menuitem or menucheckitem have a method of down() available to them according to the Sencha docs (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.menu.CheckItem-event-checkchange).
So, that is why those aren't working.
There is an event for the xtype of menucheckitem called 'checkchange'. This event makes the following arguments available for your function:
this (Ext.menu.CheckItem) <= the actual menucheckitem that was checked/unchecked (so mci1 or mci2 depending on which the user clicked on)
checked (Boolean) <= true if the change set the menucheckitem as checked and false if unchecked.
So, this would only require you to do something like:
...
init: function() {
this.control({
'mainmenu menucheckitem': {
checkchange: function(item, checked) {
if (checked) {
if(item.id == 'mci1'){
...
}
}else{
...
}
}
}
});
}
The item parameter is already your menu item. You don't have to query down.
so it would be:
if(item.checked && item.getId() == 'mci1'){
...
}