Title of the Toolbar gets cut when too long text in it, see the picture:
Here is the code:
launch: function () {
var myTabPanel = Ext.create('Ext.Toolbar', {
fullscreen: true,
title: {
title: 'BLA BLA BLA BLA BLA',
style: {
'text-align': 'left'
}
},
docked: 'top',
defaults: {
iconMask: true,
ui: 'plain'
}
});
[...]
myTabPanel.add([ start, ...]);
The code for 'start':
Ext.define('MyApp.view.Start', {
extend: 'Ext.Button',
config: {
html: 'Start',
iconCls: 'home'
}
});
No worry!
It's a Chrome issue and also bug registered for Sencha to rectify it. It will soon be fixed in the upcoming releases.
This is a bug, read this post and view my comment for a temporary fix: SenchaTouch2 - NestedList - Title "cut off"
Related
I'm following through this sencha touch tutorial, however, I could not get tap event to fire, I've tried with and with out using id to get a reference..but no luck..here is my code..
View:
Ext.define("NotesApp.view.NotesListContainer", {
extend: "Ext.Container",
xtype: "NotesListView",
config: {
items: [{
xtype: "toolbar",
docked: "top",
title: "My Notes",
items:[{
xtype: "spacer",
}, {
xtype: "button",
text: "New",
ui: "action",
action: "addNote",
id: "new-note-btn"
}]
}]
}
});
Controller:
Ext.define("NotesApp.controller.Notes", {
extend: "Ext.app.Controller",
config: {
refs: {
notesListView: 'NotesListView',
newNoteBtn: 'notesListView button[action=addNote]'
},
control: {
tap: "onNewNote"
}
},
onNewNote: function(){
console.log("New button has been tapped!!");
},
launch: function() {
this.callParent();
console.log("Launch in Notes.js");
},
init: function(){
this.callParent();
console.log("Init in Notes.js");
}
});
I couldn't workout what I'm missing..when I tap on the New button in the toolbar, no event seems to be firing as theres nothing in the console logs. I've tried Safari, Chrome and Firefox..no joy..Could you please take a quick look and see if could find what I'm missing? Is there a way to debug Sencha Touch apps?
Try to use:
newNoteBtn: 'button[action=addNote]'
or:
newNoteBtn: '#new-note-btn'
instead of:
newNoteBtn: 'notesListView button[action=addNote]'
I'm usign Sencha Touch 2.1 so this code should work (link I used for inspiration):
defaultBackButtonText: null,
useTitleForBackButtonText: false,
backButton: {
// ui: 'toolbar-back',
// align : 'left',
iconCls: 'back',
iconMask: true
},
But I can still see icon and text as well.
Thanks a lot.
I use an empty string instead of null for defaultBackButtonText, and it removes the text (also using ST 2.1):
defaultBackButtonText: '',
EDIT: To clarify, this is an example of the full config for a nav view with a back button using an icon with no text:
Ext.define('MyApp.view.GroupNavView', {
extend: 'Ext.navigation.View',
xtype: 'groupnavview',
config: {
defaultBackButtonText: '',
navigationBar: {
backButton: {
iconCls:'arrow_left',
iconMask: true,
ui: 'dark',
cls: 'backButton'
}
},
items: [
{
xtype: 'mylist'
}
]
}
});
I think there is no "back" iconCls available in the default theme. Try using some other icon like "home". Also, you missed the navigationBar config. It should be like this:
defaultBackButtonText : null,
navigationBar: {
backButton : {
align : 'left',
iconCls: 'home',
iconMask: true,
ui : 'plain'
}
},
As I tested, I see only home icon there - nothing else.
In my application, I'm using a tab panel with 5 items in it. Each item holds around 6 panels added in card layout. When I'm at the last panel inside a tab item, I need to get back to the initial panel by clicking on the bottom tab panel (somewhat similar to a normal tab view controller in iOS). I have came across some solutions I found here, but it seems to work only when I switch between the tabs. In fact I want to listen to the click event on the same tab icon. How can I do this?
I have worked on your problem. I think this is exactly what you want. Hope this helps. If not so, please leave a comment.
1). View (MyTabPanel1.js)
Ext.define('MyApp.view.MyTabPanel1', {
extend: 'Ext.tab.Panel',
config: {
scrollable: 'vertical',
items:
[
{
xtype: 'panel',
id:'cardpanel1',
title: 'Tab1',
layout: 'card',
items: [
{
html: "First Item",
items:
[
{
xtype: 'button',
text: 'Forward',
handler: function() {
Ext.getCmp('cardpanel1').setActiveItem(1);
console.log('Going to Second Item');
}
}
]
},
{
html: "Second Item",
items:
[
{
xtype: 'button',
ui: 'confirm',
text: 'Go back',
handler: function() {
Ext.getCmp('cardpanel1').setActiveItem(0);
console.log('Going to First Item');
}
}
]
}
]
},
{
xtype: 'panel',
title: 'Tab2',
scrollable: true,
items: [
{
xtype: 'button',
margin: 10,
ui: 'action',
text: 'Tab2'
}
]
},
{
xtype: 'panel',
title: 'Tab3',
scrollable: true,
items: [
{
xtype: 'button',
margin: 10,
ui: 'action',
text: 'Tab3'
}
]
}
]
}
});
2). Controller (MainController.js)
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
config: {
control: {
"tabpanel #ext-tab-1":{ //ext-tab-1 is the id for the 1st tab generated by Sencha
tap: 'ontap'
}
}
},
ontap: function (){
console.log('inside controller');
Ext.getCmp('cardpanel1').setActiveItem(0);
}
});
I would give a much simpler solution
This is my view called Viewport which is a TabPanel:
Ext.define('Sencha.view.iphone.Viewport',{
extend: 'Ext.TabPanel',
xtype: 'newviewport',
alias: 'widget.newTabPanel',
Now in my controller file:
Ext.define('Sencha.controller.iphone.main', {
extend: 'Ext.app.Controller',
config:
{
refs: {
theMainTabPanelTabbarTab: 'newTabPanel > tabbar > tab', //this the tab of the tabpanel, if we listen to it that way we will know of tab panel tap.
},
control: {
theMainTabPanelTabbarTab:{
tap: 'onTapMainTabPanel'
}
}
This is a working code and works fine. Hopefully this will help you.
How to change the button text using localization concept?
Ext.define("iPolis.view.login", {
extend: 'Ext.form.Panel',
requires: [
'Ext.TitleBar',
'Ext.form.FieldSet',
'Ext.field.Password',
'Ext.field.Text',
'Ext.field.TextAreaInput',
],
id:'loginPanel',
loginText:'Login',
xtype:'login',
.
.
.
items: [{
xtype: 'button',
cls: 'btn',
text: this.loginText,
id:'loginbtn',
handler: function() {
}
]
});
My localization.js is like this:
if(Ext.form.Panel) {
Ext.override(Ext.form.Panel,{
loginText:'iniciarsession'
});
}
I am getting a blank button. Please let me know what has to be done.
I used it this way and it worked for me
var Messages = {
username: 'Benutzername',
password: 'Passwort'
login: 'iniciarsession'
}
and in the button definition:
{
xtype: 'passwordfield',
id: 'pwd',
placeHolder:'Password',
label:Messages.password
},
{
xtype: 'button',
cls: 'btn',
text:Messages.login,
id:'loginbtn',
}
you have used loginText as the button text but in when overriding it you have used login
so it should be
Ext.override(Ext.form.Panel,{
loginText: 'iniciarsession'
});
You should not use Ext.override since it has been deprecated in Sencha Touch 2.
To achieve what you need, try this:
Ext.getCmp('loginPanel').loginText = 'my new value'
if it does not work, use this instead:
Ext.getCmp('loginPanel').config.loginText = 'my new value'
Hope it helps.
I am using sencha touch 2 PR1 .when I click on alert button the alert box which gets open does not have 'Ok' button and its height covers entire page.
here is my view
Ext.define('MyTask.view.Main', {
extend: 'Ext.Container',
alias: 'widget.main',
config: {
items: [
{
xtype : 'button',
cls : 'demobtn',
ui : 'round',
margin: '10 0',
text: 'Alert',
handler: function() {
Ext.Viewport.add(Ext.Msg);
Ext.Msg.alert('Title', 'The quick brown fox jumped over the lazy dog.', Ext.emptyFn);
}
}
]
}
});
and controller
Ext.define('MyTask.controller.TestController', {
extend: 'Ext.app.Controller',
views: ['Main'],
refs: [
{
ref : 'main',
selector: 'main',
autoCreate: true,
xtype : 'main'
},
],
init: function() {
mainPanel=this.getMain();
Ext.Viewport.add(mainPanel);
}
});
and app.js
Ext.Loader.setConfig({ enabled: true });
Ext.require([
'Ext.XTemplate',
'Ext.Panel',
'Ext.Button',
'Ext.List',
'Ext.MessageBox'
]);
Ext.application({
name: 'MyTask',
controllers: ['TestController'],
});
Why it is not getting displayed properly?
I tested on crome and ipad.
thanks in advance.
Why are you adding the Ext.Msg to the viewport. Change the handler function as follows
handler: function() {
Ext.Msg.alert('Title', 'The quick brown fox jumped over the lazy dog.', Ext.emptyFn);
}
ie remove Ext.Viewport.add(Ext.Msg);
Note : I tested it on Sencha 1.1.0
Hope it will help...
Hey guys below code would help you to solve your problem:-
The code tested on sencha touch 2.0 final.
Ext.Msg.show({
title: 'Title',
message: 'The quick brown fox jumped over the lazy dog.',
buttons: [{
id: 'alertCancelBtn',
iconCls: 'user',
iconMask: true,
text: 'Ok',
ui: 'round decline'
}], // buttons
height: 200,
width: 150,
// Ext.emptyFn
}); // show()
I got the same issue, even with Sencha Touch version 2.0.0.
At the first time, I thought it is a bug of Sencha Touch.
After spending couple days to research, I've just found out the root cause of this bug.
I've put an extra tag before the HTML5 <!DOCTYPE html> declaration in my html page.
I corrected it by put the HTML5 declaration <!DOCTYPE html> on the very top of my page and it fixed my problem.