Develop Reference

How to marked only one of the menu items in Extjs menu checked

I have a menu added to a button.
buttons.push({
iconCls: 'fa fa-money',
text: 'Currency format',
menu: new Ext.menu.Menu(
{
items: [{
iconCls: 'fa fa-euro',
text: '1.000,00',
checked: true,
handler: function (btn) {
updateNumericFormat(btn);
}
},
{
iconCls: 'fa fa-dollar',
text: '1,000.00',
checked: false,
handler: function (btn) {
updateNumericFormat(btn);
}
}],
})
});
I would like to select only one item in the menu at the time. so if the first item is checked I want the other item to be unchecked. but I can't get it to work.
updateNumericFormat: function (btn) {
//uncheck the other button
}

sencha fiddle
updateNumericFormat: function (btn) {
btn.up().down('[name=euro]').setChecked(!btn.checked , true);
}
Full code,
Ext.create('Ext.menu.Menu', {
width: 100,
margin: '0 0 10 0',
floating: false, // usually you want this set to True (default)
renderTo: Ext.getBody(), // usually rendered by it's containing component
items: [{
iconCls: 'fa fa-euro',
text: '1.000,00',
checked: true,
name : 'euro',
handler: function (btn) {
btn.up().down('[name=dollar]').setChecked(!btn.checked , true);
}
},
{
iconCls: 'fa fa-dollar',
text: '1,000.00',
checked: false,
name: 'dollar',
handler: function (btn) {
btn.up().down('[name=euro]').setChecked(!btn.checked , true);
}
}]
});

What you are searching is the menucheckitem's group config, or maybe even a cycle button.

CKEDITOR dialog - open second tab on button click

I have CKEDITOR dialog with two tabs:
- view one
- view two
Inside view one I have a button that should open view two if clicked by the user.
But I don't know how to do this. This is my CKEDITOR.dialog code:
CKEDITOR.dialog.add('placeholder', function(editor) {
var lang = editor.lang.placeholder,
generalLabel = editor.lang.common.generalTab,
validNameRegex = /^[^\[\]<>]+$/;
return {
title: 'some title',
minWidth: 300,
minHeight: 150,
contents: [{
id: 'initial-view',
label: 'view one',
title: generalLabel,
elements: [{
id: 'name-one',
style: 'width: 100%;',
type: 'html',
html: 'Organizational units'
}, {
type: 'button',
id: 'buttonId',
label: 'Click me',
title: 'My title',
setup: function(widget) {
},
onClick: function(widget) {
// this = CKEDITOR.ui.dialog.button
My code should go here........?
}
}]
}, {
id: 'organizational-unit-view',
label: 'view two',
title: generalLabel,
elements: [
// Dialog window UI elements.
{
id: 'list-of-vars',
style: 'width: 100%;',
type: 'html',
html: 'second view --- html goes here',
label: lang.name,
setup: function(widget) {
this.setValue(widget.data.name);
},
commit: function(widget) {
widget.setData('name', this.getValue());
}
}
]
}]
};
});
My question is how should I handle that button click? What method should I use? Basically how to open view two?

I found a solution. On click event is should use getDialog():
this.getDialog().selectPage('your-content-id);
Like this:
onClick: function(widget) {
this.getDialog().selectPage('organizational-unit-view');
}

Extjs 5.1: overflowHandler: 'Menu' not working correctly for toolbar

I'am using the property overflowHandler: 'Menu' to configure my toolbar
but when I clicked in the button to show the rest of buttons it shows me an empty List
Ext.create('Ext.toolbar.Toolbar', {
layout: {
overflowHandler: 'Menu'
},
items: [
{
iconCls: 'add',
text: 'Add external document',
handler: 'onAddClick'
//menu: Ext.create('bdociTabletProto.view.folder.list.DocumentsList')
},
{
iconCls: 'delete'
},
{
iconCls: 'edit'
},
{
iconCls: 'delete'
},
{
iconCls: 'edit'
},
{
iconCls: 'delete'
},
{
iconCls: 'edit'
},
{
iconCls: 'delete'
},
{
iconCls: 'edit'
},
{
iconCls: 'delete'
}, ,
{
iconCls: 'edit'
},
{
iconCls: 'delete'
},
'->',
'-',
{
iconCls: 'pdf',
toggleGroup: 'documentPermission'
},
{
iconCls: 'html',
toggleGroup: 'documentPermission'
}
]
});
Please Help me

The solution was to add overflowText property in every Item like that:
items: [
{
iconCls: 'delete',
overflowText: 'delete'
},
{
iconCls: 'edit',
overflowText: 'edit'
}
]
Thanks a lot -_-

navigation not working in sencha

Hi i am new to sencha and i am trying on navigation here i am clicking on one button in VehicleSubPage1 then it navigate to AccountInfo but it is not working,
here code i am writing
can any one help me
*VehicleSubPage1 class *
Ext.define("myproject.view.VehicleSubPage1", {
extend: 'Ext.navigation.View',
xtype:'VehicleSubPage1form',
requires: [
'myproject.view.AccountInfo'
],
config: {
title: 'Account Info',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: [
{
xtype: 'button',
text: 'Push another view!',
handler: function() {
view.push({
xtype:'AccountInfoform'
});
}
}
]
}
});
AccountInfo class
Ext.define("myproject.view.AccountInfo", {
extend: 'Ext.Panel',
xtype:'AccountInfoform',
config: {
url: 'contact.php',
title: 'Account Info',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items:[
{
xtype: 'button',
text: 'send',
ui: 'confirm',
handler:function(){
alert("clicked");
}
}
]
}
});

It seems the problem is that view in the button handler is undefined. What you actually want to do is to call the push method of the navigation view. So add an id attribute to your VehicleSubPage1 and change the handler into the following:
function() {
var accountInfo = Ext.getCmp('accountInfo'); //assuming you have set the id of VehicleSubPage1 as id: 'accountInfo'
accountInfo.push({
xtype:'AccountInfoform'
});
}

Trouble with Sencha Touch MVC

I'm trying to learn how to use Sencha Touch to build web apps. I've been following the tutorial Here and I am a bit stuck. Below have created one controller, two views and a model (All other code is copy & paste from the tutorial). The first view, Index works great. However if I try to access the second, it brings up a blank page, none of the toolbar buttons work and it doesn't fire the alert.
If I do comment out the line this.application.viewport.setActiveItem(this.editGyms);, the alert will fire, but obviously, it doesn't render the page.
I've looked at a couple other tutorials, and they seem to also be using the setActiveItem member to switch views.. Am I missing something, or do I have to somehow deactivate the first view to activate the second or something?
HomeController.js
Ext.regController('Home', {
//Index
index: function()
{
if ( ! this.indexView)
{
this.indexView = this.render({
xtype: 'HomeIndex',
});
}
this.application.viewport.setActiveItem(this.indexView);
},
editGyms: function()
{
if ( ! this.editGyms)
{
this.editGyms = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGyms);
Ext.Msg.alert('Test', "Edit's index action was called!");
},
});
views/home/HomeIndexView.js
App.views.wodList = new Ext.List({
id: 'WODList',
store: 'WODStore',
disableSelection: true,
fullscreen: true,
itemTpl: '<div class="list-item-title"><b>{title}</b></div>' + '<div class="list-item-narrative">{wod}</div>'
});
App.views.HomeIndex = Ext.extend(Ext.Panel, {
items: [App.views.wodList]
});
Ext.reg('HomeIndex', App.views.HomeIndex);
views/home/EditGymStore.js
App.views.EditGymStore = Ext.extend(Ext.Panel, {
html: 'Edit Gyms Displayed Here',
});
Ext.reg('EditGymStore', App.views.EditGymStore);
models/appModel.js
Ext.regModel('WOD', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'wod', type: 'string' },
{ name: 'url', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title' }
]
});
Ext.regStore('WODStore', {
model: 'WOD',
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'wod-app-localstore'
},
// REMOVE AFTER TESTING!!
data: [
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc1</br><br/>' },
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc2</br><br/>' }
]
});
viewport.js with toolbar
App.views.viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8e2ef',
dockedItems: [
{
xtype: 'toolbar',
title: 'The Daily WOD',
buttonAlign: 'right',
items: [
{
id: 'loginButton',
text: 'Login',
ui: 'action',
handler: function() {
Ext.Msg.alert('Login', "This will allow you to Login!");
}
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconMask: true,
iconCls: 'refresh',
ui: 'action',
handler: function() {
Ext.Msg.alert('Refresh', "Refresh!");
}
}]
},
],
});
Thanks for the help!!

In HomeController.js your action function (editGyms) is the same name as the variable you're using for your view (this.editGyms) so when it tries to setActiveItem(this.editGyms) its actually passing the controllers action function rather than the results of this.render({...})
Either change the name of the controller action or change the name of the variable you use to hold the view.. like
editGyms: function() {
if ( ! this.editGymView) {
this.editGymView = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGymView);
Ext.Msg.alert('Test', "Edit's index action was called!");
}

I am colleagues with the guy that wrote the tutorial you are referring to. You should add a comment on that post because I described your problem to him and he said that he knows the solution.
You can just add a link to this page so that you won't need to describe everything again.
Also he will (very) soon publish the 3rd part of that tutorial that will cover some similar things.