31
Aug
function nextCard(){
carousel.next();
Ext.defer(nextCard(),1000);
}
Archive for the ‘Sencha’ Category
26
Aug
You need to explicitly specify the x-template for the mask. So, your form definition should look something like this:
{
xtype: 'form',
// TEMPLATE OF THE MASK
waitTpl: '<div class="x-mask-loading"><div class="x-loading-spinner"><span class="x-loading-top"></span><span class="x-loading-right"></span><span class="x-loading-bottom"></span><span class="x-loading-left"></span></div><div class="x-loading-msg">{message}</div></div>'),
items: [{....]
}
And the message you want to show you can decide in the form submit button handler where you will call the form submit like this:
myFrm.submit({
url: 'somescript.php',
method: 'POST',
waitMsg: 'Processing...', ---> MESSAGE TO DISPLAY IN MASK
success: function (frm, res) {
alert('Form submitted');
},
failure: function (frm, res) {
alert('Form submit error');
}
});
08
Aug
The following script adds tab bar buttons:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World</title>
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var bar = new Ext.TabBar({
dock : 'top',
ui : 'dark',
items: [
{
text: 'Button1'
},
{
text: 'Button2'
}
]
});
new Ext.Application({
launch: function() {
new Ext.Panel({
dockedItems: [bar],
fullscreen : true,
html : 'Test Panel'
});
}
});
</script>
</head>
<body></body>
</html>
05
Aug
What do you do if, you want to work with the vertical alignment your child panels?
While the align property of Layout will affect the horizontal alignment the pack property will affect the vertical align.
For example, the following code will align the child panels center horizontally and top vertically.
new Ext.Panel({
layout: 'fit',
items: [{
layout: {
type: 'vbox',
align: 'center', pack: 'top'
},
scroll: 'vertical',
items: []
}]
});
25
Jul
Here is the code for a simple form submit in Sencha Touch:
var myForm = new Ext.Panel({
layout: 'card',
dockedItems: [{
xtype: 'toolbar',
docked: 'top',
title: 'Test Form'
}],
items: [{
xtype: 'form',
title: 'My Form',
id: 'register',
items: [{
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Some instruction for personal info',
defaults: {
labelWidth: '40%'
},
items: [{
xtype: 'datepickerfield',
name: 'dob',
label: 'Date of birth',
required: true,
useClearIcon: true,
picker: {yearFrom: 1900}
}, {
xtype: 'selectfield',
name: 'gender',
label: 'Gender',
required: true,
useClearIcon: true,
options: [{
text: 'Male',
value: 'male'
}, {
text: 'Female',
value: 'female'
}]
}, {
xtype: 'textfield',
name: 'phone_number',
label: 'Phone number',
placeHolder: 'Enter..',
required: false,
useClearIcon: true,
}]
},
{
xtype: 'fieldset',
title: 'Login Info',
instructions: 'Some instruction for login info',
defaults: {
labelWidth: '40%'
},
items: [{
xtype: 'emailfield',
name: 'email',
label: 'Email',
placeHolder: 'me@abc.com',
required: true,
useClearIcon: true,
}, {
xtype: 'passwordfield',
name: 'password',
label: 'Password',
required: true,
useClearIcon: true,
}, {
xtype: 'passwordfield',
name: 'repeat_password',
label: 'Re-type password',
required: true,
useClearIcon: true,
}]
}, {
xtype: 'button',
text: 'Register',
scope: this,
handler: function (b, e) {
var form = Ext.getCmp('register');
form.submit({
url: 'testform.php',
method: 'POST',
success: function (frm, res) {
alert('Form submitted: ' + res.customfield);
},
failure: function (frm, res) {
alert('Form no submit!');
}
});
}
}
}]
});
This is testform.php:
It is very important to send success => true
If, success is not defined or not equal to true then it will be considered as a form submit error.
<?php
$response = array('success' => true, 'customfield' => 'custom value');
echo json_encode($response);
?>
24
Jun
I needed to display an action sheet on load on my web app asking the customer to do something.
All I had to do was define the action sheet variable and call the show() method when, I needed to show it – in this case immediately after the page finished loading.
On my iPod touch and iPad this did not pose a problem. But, on the iPhone it pushed my main panel (behind the actionsheet) up! Whatever I did, on the iPhone the main panel was always pushed up.
After some debugging I realised that this was because on the iPhone (I am not sure why) the actionsheet was being rendered before my main panel – even though I called the show function after displaying the main panel.
As a work around what I tried is, I called the show() function in the afterrender event of the main panel – this too didn’t work. So, finally what worked is, I called the show() function in the afterrender event of the main panel using a 1 second setTimeout()! And this works – iPhone, iPod & iPad!
Finally my code looks something like this:
var myActionSheet;
Ext.setup({
tabletStartupScreen: 'images/Splash.png',
phoneStartupScreen: 'images/Splash.png',
icon: 'images/icon1.png',
glossOnIcon: true,
onReady: function() {
myActionSheet = new Ext.ActionSheet({
items: [
{text: 'Action 1'},
{text: 'Action 2'},
{text: 'Action 3'}
]
});
var mainView = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [panel1, panel2],
listeners: {
afterrender: function () {
// the 1 second delay is needed
// without the delay it has the same issue of pushing the main panel up.
setTimeout('myActionSheet.show();', 1000);
}
}
});
// this will not work on iPhone; only iPod and iPad
//myActionSheet.show();
}
});
Feel free to suggest a different method but, this one works for me!
15
Jun
If, you need to show a load mask anywhere (not necessarily linked to a store) then you can do something like this:
var myMask;
Ext.setup({
tabletStartupScreen: 'images/Splash.png',
phoneStartupScreen: 'images/Splash.png',
icon: 'images/icon1.png',
glossOnIcon: true,
onReady: function() {
// We are linking the loading mask to the document body
// Ext.getBody() will get the document body - it will work only after the document body is ready!
myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Working..."});
doSomethingLong();
}
});
function doSomethingLong() {
myMask.show();
if (....) {
.......
.......
.......
}
myMask.hide();
}
01
Jun
In Sencha Touch, sometimes our models need more complex data types other than the simple int, string etc
This is especially true when your data source is from an external URL.
For example, if you have data like this:
{
"data":{
"totalItems":3,
"items":[
{
"id":"10001",
"name":"Text 1",
"thumbnail":{
"sqDefault":"http://i.ytimg.com/vi/10001/default.jpg",
"hqDefault":"http://i.ytimg.com/vi/10001/hqdefault.jpg"
},
},
{
"id":"10002",
"name":"Text 2",
"thumbnail":{
"sqDefault":"http://i.ytimg.com/vi/10002/default.jpg",
"hqDefault":"http://i.ytimg.com/vi/10002/hqdefault.jpg"
},
},
{
"id":"10003",
"name":"Text 3",
"thumbnail":{
"sqDefault":"http://i.ytimg.com/vi/10003/default.jpg",
"hqDefault":"http://i.ytimg.com/vi/10003/hqdefault.jpg"
},
}
]
}
}
How will you define your model? As, you can see id and name can be int and string respectively but, what will thumbnail be?
Moreover, you want the value of the thumbnail to be the value of “hqDeafult” – how do you do that?
You can define a custom field type for the field thumbnail using the “converted” method.
Ext.regModel('MyModel', {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{
name: 'thumbnail',
convert: function(value, record) {
return value.hqDefault;
}
},
]
});
The value parameter has the data in the current iteration and record has all the data iterated so far.
This can be vague and will take time to get used to – please feel free to share your findings.
15
Oct
Here i show you how to create a panel using sencha.First you have to create a html file.
Here i create a file called panel.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Panel</title>
<link rel="stylesheet" href="ext-touch.css" type="text/css">
<script type="text/javascript" src="ext-touch.js"></script>
<script type="text/javascript" src="index.js"></script>
<style type="text/css">
#frame
{
position:absolute;
top:40%;
left:45%;
width:250px;
height:auto;
}
</style>
</head>
<body>
<div id="frame"></div>
</body>
</html>
Note:You can download ext-touch.js and ext-touch.css from here
More »
22
Sep
Introduction
Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android and Apple iOS devices
More »
-
Follow us
