I have developed a small view that contains special char like 'é' and when I go to the browser I find that these special char have been replaced by question mark, I have added the meta tag with charset="utf-8" to my index to resolve the problem but no changes, this is the first time I encounter such a problem, because I have already developed other views with special char (for an other ExtJs project) without any problem. any idea about this ?
Ext.define('ALM.MyView', {
extend : 'Ext.container.Viewport',
initComponent : function() {
var me = this;
Ext.applyIf(me, {
items : [{
xtype : 'toolbar',
//padding: '10px 10px 10px 10px',
//height: 28,
//width: 714,
items : [
{
xtype : 'button',
text : 'tout',
iconCls : 'all-icon'
}, {
xtype : 'button',
text : 'éffacer',
iconCls : 'clear-icon'
}, {
xtype : 'tbseparator'
}, {
xtype : 'button',
text : 'ajouter',
iconCls : 'add-icon'
}, {
xtype : 'button',
text : 'supprimer',
iconCls : 'delete-icon'
}, {
xtype : 'button',
text : 'modifier',
iconCls : 'modify-icon'
}, {
xtype : 'button',
text : 'rechercher',
iconCls : 'find-icon'
}
]
}]
});
me.callParent(arguments);
}
});
UPDATE
This is what I get as HTML :
<span id="button-1006-btnInnerEl" class="x-btn-inner" style="">�����</span>
and for instance I get this in the view : (Toolbar)
the solution that I have chosen is to use HTML special character code as it is discribed in the post given by #sha :stackoverflow.com/questions/... .
in the other hand I was looking for if Ext JS gives automatically the possibility of using spercial char.
Special thanks to #sha.
Related
my english is bad and why I write short and direct :o)
my view :
Ext.define('Anteile.view.Main', {
extend : 'Ext.Container',
xtype : 'xmain',
maxWidth :800,
maxHeight :400,
config : {
layout : 'fit',
id :'Main',
fullscreen : true,
items : [
{ xtype : 'xNavigationBar' },
{ xtype : 'xSidebar' },
{ xtype : 'xMainContainerView', flex : 1 }
]
}
} );
my controller :
Ext.define('Anteile.controller.SlideNavigation', {
extend : 'Ext.app.Controller',
config : {
refs:
{
// xMain
xMainContainer :'xmain',
idMainContainer :'xmain[id=Main]',
},
},
init: function() {
this.callParent();
this.initContainer();
},
initContainer: function() {
this.fConsole('this.x: '+this.getXMainContainer().getWidth());
this.fConsole('this.id: '+this.getIdMainContainer().getWidth());
}
... ...
concole output from initContainer :
this.x: null
this.id: null
why is x and id NULL instead of 800
Greetings
Volker
yes that's true I'm new.
Have it changed now and still NULL
view
Ext.define('Anteile.view.Main', {
extend : 'Ext.Container',
xtype : 'xmain',
config : {
maxWidth :800,
maxHeight :400,
name :'Main',
layout : 'fit',
fullscreen : true,
items : [
{ xtype : 'xNavigationBar' },
{ xtype : 'xSidebar' },
{ xtype : 'xMainContainerView', flex : 1 }
]
}
} );
contoller
Ext.define('Anteile.controller.SlideNavigation', {
extend : 'Ext.app.Controller',
config : {
refs:
{
// xMain
xMainContainer :'xmain',
idMainContainer :'xmain[name=Main]', // > idMainContainer :'xmain[name="Main"]' <neither
},
},
init: function() {
this.callParent();
this.initContainer();
},
initContainer: function() {
this.fConsole('this.x: '+this.getXMainContainer().getWidth());
this.fConsole('this.id: '+this.getIdMainContainer().getWidth());
}
I think you are new in Sencha. Well maxWidth and maxHeight are the config properties of container so you need to include them within config,like this:-
Ext.define('Anteile.view.Main', {
extend : 'Ext.Container',
xtype : 'xmain',
config : {
maxWidth :800,
maxHeight :400,
layout : 'fit',
fullscreen : true,
items : [
{ xtype : 'xNavigationBar' },
{ xtype : 'xSidebar' },
{ xtype : 'xMainContainerView', flex : 1 }
]
}
} );
Also in the controller if you want to get a reference of a view you will need the name property and not id. Like this:-
View:-
items: [{
name: 'test',
html: 'Test container'
}]
Controller:-
refs:
{
xmain: "xmain",
testContainer: 'container[name="test"]'
}
EDIT
To get the max-width:
this.getXMain().getMaxWidth();
I have implemented the following using sencha 2.3.1:
I have created a sencha app with the command: sencha generate app TempApp c:/TempApp
I have replaced the default app/view/Main.js by
Ext.define('TempApp.view.Main', {
extend: 'Ext.form.FormPanel',
alias : 'widget.login',
config: {
id : 'login',
cls : ['account-login','mobile'],
layout:{
type : 'vbox',
align: 'center',
pack : 'center'
},
defaults:{
width: 240
},
scrollable: {
direction: 'vertical'
},
items:[
// TOP TOOLBAR
{
xtype : 'toolbar',
ui : 'dark',
docked : 'top',
title : '',
width : undefined
},
// FIELSDSET
{
xtype: 'fieldset',
title: 'login',
items:[
{
xtype: 'emailfield',
name : 'email',
placeHolder: 'email',
value: ''
},
{
xtype: 'passwordfield',
id : 'loginPasswordField',
name : 'password',
placeHolder: 'password',
value: ''
},
{
xtype : 'checkboxfield',
name : 'remember',
//hidden : true,
label : 'remember',
value : 'true',
checked: true,
labelWidth: '80%'
}
]
},
// AND BUTTONS
{
xtype : 'button',
id : 'loginButton',
ui : 'confirm',
text : 'login',
margin: '5',
handler: function(button, evt){
}
},
{
xtype: 'button',
id : 'forgotButton',
text : 'forgot password',
margin: '5',
handler: function(button, evt){
}
},
// BOTTOM TOOLBAR
{
xtype : 'toolbar',
ui : 'dark',
docked : 'bottom',
width : undefined
}
],
listeners: {
initialize: function(view, options){
}
}
}
});
fieldset is not displayed in internet explorer and windows phone
I have read this: http://www.sencha.com/forum/showthread.php?272642 and it seems that there is a problem with fieldsets.
How can I use fieldsets with email and password fields inside in windows phone?
First a useful tool to fix this error is the emulation tool internet explorer 11
F12 > Emulation > Explorer Profile > Windows Phone
This tool can also be useful: Remote HTML5 debugging on Windows Phone with weinre
Finally in the stylesheet of our application located in path touch/resources/css comment the following attribute in wp.css file
~ div:not(.x-msgbox) .x-input-el {/ * visibility: collapse * /}
In the controller we can use the following code for windows phone (the picker div must have a onclick event for the browser wp disregard the input onclick of which are under the mask):
Ext.define('AppName.controller.ControllerName', {
extend: 'Ext.app.Controller',
requires: [
// ...
],
config: {
refs: {
//...
},
control: {
"picker[id='PickerId']":{show:'onPickerShow'}
//...
}
},
onPickerShow: function(picker,o){
if(picker.getId()=='PickerId'){
document.getElementById("PickerId").onclick = Ext.emptyFn;
}
},
I have multiple pie charts and grids in the page, so page has to be scrolled to view the charts.
Problem :
When pagination in the grid, or slice in the chart is clicked, page automatically scrolls top because of which user has to scroll down every time to view the chart/grid.
i am using "App SDK 2.0 RC1"
Any fix for this ?
Sample code :
items : [
{
xtype : 'container',
id : 'releaseBox',
layout : 'vbox'
},
{
xtype : 'container',
id : 'chart1',
layout : 'vbox'
},
{
xtype : 'container',
id : 'chart2',
layout : 'vbox'
},
{
xtype : 'container',
id : 'chart3',
layout : 'vbox'
},
{
xtype : 'container',
id : 'chart4',
layout : 'vbox'
},
{
xtype : 'container',
id : 'chart5',
layout : 'vbox'
}
]
You could try adding a listener for that event and adding this code to scroll to the desired id:
location.hash = '#chart' + chartNumber;
I am very new to Sencha so this is probably a newbie error :)
I am trying to implement page navigation in Sencha. The following scenario WORKS.
I have a Main.js with a Home screen and a Login screen. When I enter credentials I am forwarded to Home.js.
However, I now want to remove the Home from the Main, because it can only be shown after a login. But, after removing the xtype home from the Main.js, it cannot be found anymore. I don't understand why.
Main.js
config : {
tabBarPosition : 'bottom',
items : [{
xtype : 'startview',
}, {
xtype : 'contactform'
}, {
xtype : 'loginform'
}, {
xtype : 'createaccountform'
}, {
xtype : 'homeview' REMOVING THIS MAKES THE HOME undefined in the controller
}]
}
My controller
Ext.define("MyApp.controller.LoginController", {
extend : "Ext.app.Controller",
xtype : 'logincontroller',
requires : ['Ext.app.Router', 'MyApp.view.Home'],
config : {
refs : {
loginForm : "#loginFormPanel",
home : 'homeview'
},
routes : {
login : 'authenticateuser'
},
control : {
'button[action=login]' : {
tap : "authenticateUser"
}
},
views : ['Login', 'Home']
},
authenticateUser : function(button) {
**// WHEN REMOVING xtype: homeview from MAIN this getter returns undefined (??)**
var activeView = this.getHome();
this.getLoginForm().submit({
url : 'php/process_login.php',
method : 'POST',
success : function(form, result) {
alert('Success and moving to home ' + activeView);
Ext.Viewport.setActiveItem(activeView);
},
failure : function(form, result) {
alert('2');
Ext.Msg.alert('Error', 'failure....' + result);
}
});
}
});
Home.js
Ext.define('MyApp.view.Home', {
extend : 'Ext.tab.Panel',
id : 'home',
xtype : 'homeview',
requires : ['Ext.TitleBar', 'Ext.Video'],
config : {
title : 'Home',
iconCls : 'home',
tabBarPosition : 'bottom',
items : [{
xtype : 'searchview',
}, {
xtype : 'profileview'
}, {
xtype : 'messagesview'
}, {
xtype : 'sensesview'
}]
}
});
app.js
views : ['Start', 'Main', 'Contact', 'Login', 'CreateAccount', 'Home', 'Messages', 'Profile', 'Search', 'Senses'],
controllers : ['LoginController'],
So, how can I make sure I still get a reference to Home in the controller (after removing from main)??
Thanks for your help,
Coen
You want to give Home an itemId instead of of an id.
Ext.define('MyApp.view.Home', {
extend : 'Ext.tab.Panel',
itemId : 'home',
xtype : 'homeview',
...
});
And now in your controller, You want to reference it like this:
...
config : {
refs : {
loginForm : "#loginFormPanel",
home : {
autoCreate: true,
selector: '#home',
xtype: 'homeview'
}
},
...
I have a controller defined like this:
Ext.define('MyApp.controller.TestController', {
extend: 'Ext.app.Controller',
config: {
},
showTest: function() {
alert('aaa');
}
});
How can i call the showTest() function? I tried this:
MyApp.controller.TestController.showTest();
But this doesn't work. Anyone any idea how to do this..?? Because i want to call that function from an onClick even in a div. Something like:
<div onclick="call.controller.func(1)">User 1</div>
<div onclick="call.controller.func(2)">User 2</div>
etc.
No, you are doing it wrong.
Suppose that you have a button in your view:
Ext.define('MyApp.view.Login', {
extend : 'Ext.form.Panel',
xtype : 'myapp-login',
config : {
items : [
{
xtype : 'fieldset',
name : 'login-fieldset',
title : 'Login credentials',
instructions: 'Fill in your email and password)',
items : [
{
xtype: 'emailfield',
name : 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
},
{
xtype : 'button',
name : 'Login',
text : 'Login',
ui : 'confirm'
}
]
}
});
The in your controller, inside your control object:
control : {
'myapp-login button[ui=confirm]' : {
tap : 'showTest'
}
},
// function showTest
showTest: function() {
alert('aaa');
}
So in the above example: when user clicks inside the xtype called myapp-login the controller will execute the showTest() method.