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.
Related
Back Ground : I am working on an MVC application using sencha touch 2. I am working on a page which has two tabs. Inside the first tab, I have a button inside a title bar.
Issue : I am not able to call anyother function from the button handler. I think, there is an issue with the scope of the calling function.
Here is my code.
Ext.define('WUPOC.view.WUHomePage', {
extend: 'Ext.TabPanel',
requires:['Ext.TitleBar','Ext.dataview.List','Ext.data.proxy.JsonP'],
alias: 'widget.wuHomePageView',
config: {
fullscreen: true,
defaults: {
styleHtmlContent: true
},
items: [{
title: 'Home',
iconCls: 'home',
items: [{
xtype: 'titlebar',
title: 'Hello',
docked: 'top',
items: [{
xtype: 'button',
text: 'LogOut',
ui: 'action',
itemId: 'newButton',
align: 'right',
handler : function(btn){
console.log('LogOut is tapped'); // This is printed
this.up.onNewButtonTap(); // Throws error
}
}],
}],
}, {
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}]
},
onNewButtonTap: function () {
alert('newNoteCommand');
},
});
I am getting the error as below.
Uncaught TypeError: Object function (selector) {
var result = this.parent;
if (selector) {
for (; result; result = result.parent) {
if (Ext.ComponentQuery.is(result, selector)) {
return result;
}
}
}
return result;
} has no method 'onNewButtonTap'
I think there is an issue with setting the scope of a button. Kindly help.
Thank you
First, up is a function so you need to call it this way :
this.up();
Then this.up() would only bring to the container of the button, which has no method onNewButtonTap. You could just keep doing up() until you get the right component but this would me more clever to do :
Add an xtype to your view
Use this xtype as a selector in the up function : this.up('myXType').onNewButtonTap();
Example
Hope this helps
I have a Panel where I render a search-form. This works.
My problem is rendering a List under that search-form (so in the same Panel).
This is what I've done so far:
Ext.define("TCM.view.UserSearch",
{
extend: "Ext.form.Panel",
requires:
[
"Ext.form.FieldSet",
"Ext.List"
],
xtype: "usersearch",
config:
{
scrollable:'vertical'
},
initialize: function ()
{
this.callParent(arguments);
var clubsStore = Ext.create('TCM.store.Clubs');
clubsStore.load();
var usersStore = Ext.create('TCM.store.Users');
var searchButton =
{
xtype: 'button',
ui: 'action',
text: 'Search',
handler: this.onSearchButtonTap,
scope: this
};
var topToolbar =
{
xtype: 'toolbar',
docked: 'top',
title: 'Search',
items: [
{ xtype: 'spacer' },
searchButton
]
};
var userClub =
{
xtype: 'selectfield',
store: clubsStore,
name: 'clubId',
label: 'Club',
displayField : 'name',
valueField : 'id',
required: true
};
var userList =
{
xtype: 'list',
store: usersStore,
itemTpl: '{name}',
title: 'Search results'
};
this.add([
topToolbar,
{
xtype: "fieldset",
items: [userClub]
},
userList
]);
},
onSearchButtonTap: function ()
{
console.log("searchUserCommand");
this.fireEvent("searchUserCommand", this);
}
});
I can't see anything being rendered under the fieldset (the searchform). What could be wrong?
Most of time, when you don't see a component it's because you did not set a layout to your container or a height.
You can find more about layout here.
In your case, you want to have two components in your container. Therefore, I suggest a Vbox layout.
Here's an example
Hope this helps.
I actually used something like this in a project try this...Put this in the items property of your fieldset...
{
xtype: 'searchfield',
clearIcon: true,
placeHolder: 'Type Some text'
},
{
xtype: 'list',
hidden:true, //Initially hidden populate as user types something
height: '150px',
pressedDelay: 1,
loadingText: '',
store: 'listStore',
itemTpl: '{\'What you want to be displayed as per your model field\'}'
}
In your controller write a handler for the keyup event of the searchfield to load the store with relevant data and toggle the hidden property of the list. Hopefully list should appear with the search results(Worked for me and looked quite good). Hope this helps...
I have a Main view in which i create three tabs, on click login tab a login form open
after login success, i need to load another view (landing) in same login tabpanel..I have used the following lines of code to load the view but it doesnt opening it in same tabpanel but loading as a independent view. How to open it in same tabpanel.
Main View of application
Ext.define("SenchaTest.view.Main", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar',
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'home',
html: [
'<img src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>This demonstrates how ",
"to use tabs, lists and forms to create a simple app</p>",
'<h2>Sencha Touch (2.0.0)</h2>'
].join("")
},
{
title: 'Log In',
iconCls: 'user',
xtype: 'formpanel',
url: 'contact.php',
layout: 'card',
id:"loginForm",
items: [
{
xtype: 'fieldset',
title: 'Log In',
id:"submitForm",
instructions: 'Enter username and password to login.',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '45%'
},
items: [
{
xtype: 'textfield',
name : 'username',
label: 'User Name',
allowBlank:false,
useClearIcon: true
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
allowBlank:false,
useClearIcon: false
},{
xtype: 'button',
text: 'Submit',
ui: 'confirm',
id: 'btnSubmitLogin'
// this.up('formpanel').submit();
}]
}
]
}
]
}
});
Code for Controller
Ext.define("SenchaTest.controller.LoginForm", {
extend : "Ext.app.Controller",
config : {
refs : {
btnSubmitLogin : "#btnSubmitLogin",
LoginForm : '#loginForm'
},
control : {
btnSubmitLogin : {
tap : "onSubmitLogin"
}
}
},
onSubmitLogin : function(btn) {
alert("onSubmitLogin");
console.log("onSubmitLogin");
var values = this.getLoginForm().getValues();
//alert(values.username);
//alert(values.password);
Ext.util.JSONP.request({
url:'http://localhost:8092/returnjson.ashx',
params:{ callback:'callback',uname:values.username,password:values.password},
callbackKey: 'callback',
success: function (result,request)
{
if(result.status==true)
{
alert("Welcome " + result.UserName);
Ext.Viewport.setActiveItem(Ext.create('SenchaTest.view.Landing'));
}
else
{
alert("Username or Password is incorrect");
return;
}
console.log(result.UserName);
console.log(result);
alert(result);
// Handle error logic
if (result.error) {
alert(response.error);
return;
}
}
});
},
launch : function() {
this.callParent();
console.log("LoginForm launch");
Ext.Viewport.add(Ext.create('SenchaTest.view.Landing'));
},
init : function() {
this.callParent();
console.log("LoginForm init");
}
});
View to load after login landing
Ext.define("SenchaTest.view.Landing", {
extend: "Ext.Container",
xtype: 'landingScreen',
requires: [
"SenchaTest.view.Main"
],
config: {
html: "Welcome to my app"
}
});
i have used...
Ext.Viewport.setActiveItem(Ext.create('SenchaTest.view.Landing'));
to load landing view but it does not load in same tab but as a independent page.
Please Help on this.
The following code allows you to extend Sencha Touch with a 'replace' function that allows you to dynamically swap two view components within the same panel (I believe that is what you are trying to do):
http://www.sencha.com/forum/showthread.php?134909-Replace-component-function&langid=4
An alternative solution (not recommended) is to create a third, but hidden, tab panel ('Landing'), then create and show it on successfully login, while simultaneously hiding the login tab panel.
I'm learning Sencha Touch. I created this app with a form before and it worked fine.
Now i'm working on a new little test app i copy the code from the other app and it only passes empty variables to the webservice.
the View:
<!-- language: lang-js -->
Ext.define('Gasoline.view.InsertTankTrip', {
requires: [
'Ext.form.FieldSet'
],
extend: 'Ext.form.Panel',
xtype: 'inserttankpanel',
id: 'insertTankForm',
config: {
title: 'Insert Tank Trip',
iconCls: 'add',
url: 'contact.php',
items:[
{
xtype: 'fieldset',
title: 'Insert Tank Trip',
instructions: '(Make sure the info is correct!)',
items:[
{
xtype: 'datepickerfield',
label: 'Date',
name: 'date',
value: new Date()
},
{
xtype: 'textfield',
label: 'Amount',
name: 'amount',
minValue:-9007199254740992,
maxValue: 9007199254740992
}
]
},{
xtype: 'button',
text: 'Send',
ui: 'confirm',
action: 'insertTankSubmit'
}
]
}
});
And in the controller :
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('Gasoline.view.Main'));
this.control({
'button[action=insertTankSubmit]' : {
tap: 'insertTankForm'
}/*,
'list[itemId=kingsLeagueList]' : {
itemtap: 'onListTap'
},
'list[itemId=tournamentsList]' : {
disclose: 'showDetail'
}*/
});
},
insertTankForm : function(){
console.log('test');
var form = this.getInsertTankForm();
form.submit({
url:'contact.php'
});
},
This sends the following to the webservice (which currently doesn't exist i just check with developer tools)
date:2012-07-26T17:02:16
amount:
so the date does get sent , the number doesnt
If i fill in a standard value for the number ... that gets sent but if you type something in , it still doesn't send that
Use
xtype: 'numberfield'
instead of
xtype: 'textfield'
I had tried numerous solutions...none of them worked.
Lastly i deleted everything ... coded everything the exact same way and it started working ...
i am new to sencha touch2. i want display list in a page. binding is happening successful. but i am not able to see data but able to scroll page. please any one can help me. i facing this issue. thank you.
My code is here:
Ext.define("Sencha.view.ProjectListView", {
extend: 'Ext.form.Panel',
xtype: 'projectListepage',
id: 'projectListepage',
requires: [
'Ext.data.JsonP'
],
config: {
scrollable: true,
items: [{
xtype: 'panel',
id: 'JSONP'
},
{
docked: 'top',
xtype: 'toolbar',
flex: 3,
items: [{
text: 'Project Deatils',
handler: function () {
var list = Ext.getCmp('JSONP'),
tpl = new Ext.XTemplate([
'<tpl for=".">',
'<img src="{MainImageUrl}"/><label>{ProjectName}</label><p class="temp_low">{ShortDescription}</p>', //
'</tpl>',
]);
Ext.data.JsonP.request({
url: 'http://localhost:53985/PropertyService.svc/GetAllProject',
callbackKey: 'callback',
params: {
},
callback: function (success, request) {
var project = request;
if (project) {
list.updateHtml(tpl.applyTemplate(project));
}
else {
alert('There was an error retrieving the weather.');
}
}
});
}
}]
}]
}
});
I do not see anywhere in your code sample where you are creating a list. You need to extend 'Ext.List' or use xtype:'list'. There are a few simple examples in the sencha touch 2 docs on how to create a list. http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.List