I am trying to use third party extension on this link for only time field. How can I use it in sencha touch 2.1?
Edit
I added the extension in ux\picker and then I used following code
Ext.define('HB.view.Search', {
extend: 'Ext.form.Panel',
xtype: 'search',
Ext.require(['Ext.ux.picker.DateTimePicker']),
config: {
title: 'Search',
layout: 'fit',
scrollable: true,
styleHtmlContent: true,
styleHtmlCls: 'searchpage',
//html: ['<h1>Welcome to MyApp</h1>'].join(''),
items: [
{
xtype: 'titlebar',
title: 'Search Page',
docked: 'top'
},
{
xtype: 'textfield',
name: 'from',
placeHolder: 'From'
},
{
xtype: 'textfield',
name: 'to',
placeHolder: 'To'
},
{
xtype: 'datepickerfield',
name: 'date',
value: new Date()
},
{
xtype: 'datetimepickerfield',
name: 'time',
value: new Date()
}
]
},
//style: 'height:' + (Ext.getBody().getHeight()) + 'px;'
height: Ext.getBody().getHeight()
});
But it gives me this error
GET http://localhost/HelsinkiBus/touch/src/DateTimePicker.js?_dc=1357800622746 404 (Not Found)
Uncaught Error: [Ext.Loader] Failed loading 'touch/src/DateTimePicker.js', please verify that the file exists
It is Ext.require(['Ext.ux.field.DateTimePicker']);.
DateTimePicker -> ux/field/DateTimePicker
DateTime -> ux/picker/DateTime
I wasted 6 hours to find this issue.
Just place the files from the ux folder in ux\picker folder in your project and use xtype: 'datetimepickerfield'.
Before you can use this component you need to load the files needed first. You can do this with Ext.require
Related
I have a problem to integrate map in this view:
Ext.define('Sample.view.MainMenu', {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar','Ext.Video'],
alias: 'widget.mainmenuview',
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to sencha' ,items: [
{
xtype: 'button',
text: 'Log Off',
itemId: 'logOffButton',
align: 'right'
}
]
},
html: [
"Hello to dawini plateforme"
].join("")
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}
]
}
], listeners: [{
delegate: '#logOffButton',
event: 'tap',
fn: 'onLogOffButtonTap'
}]
},onLogOffButtonTap: function () {
this.fireEvent('onSignOffCommand');
}
});
Can someone help me how to integrate map in this view and think you very much.
I am a developer with SIMpalm (www.simpalm.com), and I think you should try map type in your Sencha component within the Items. Others attribute also can be configured like height, current location etc. And also you need to configure google map api in your Index.html page like, .
Example : items: [
{
xtype: 'map',
height: 200,
useCurrentLocation: true
}
]
Here you can find how to include map in Sencha Touch. Though it is focused on infobubble but it is also showing the map integration. Let me know if you have any difficulty implementing this.
In my SenchaTouch 2.3.1 app I have build a login panel for the user. It looks like this:
Ext.define('MyApp.view.LoginPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.loginPanel',
requires: [
'Ext.form.FieldSet',
'Ext.field.Password',
'Ext.Button'
],
config: {
layout: 'vbox',
items: [
{
xtype: 'fieldset',
title: 'Business Login',
itemId: 'login',
items: [
{
xtype: 'emailfield',
itemId: 'email',
label: 'E-Mail',
name: 'email',
required: true
},
{
xtype: 'passwordfield',
itemId: 'password',
label: 'Passwort',
name: 'password',
required: true
}
]
},
{
xtype: 'button',
itemId: 'loginButton',
cls: 'button-blue',
text: 'Login'
},
{
xtype: 'panel',
itemId: 'loggedInPanel',
cls: 'logged-in-panel',
tpl: [
'Sie sind eingeloggt als {firstname} {lastname} (ID: {agentId})'
],
hidden: true,
margin: '10 0'
}
]
}
});
In my controller, I want to use a reference to this panel like this:
config: {
refs: {
loginPanel: 'loginPanel',
navigationView: '#morenavigation',
loggedInPanel: '#loggedInPanel',
loginButton: '#loginButton'
}
}
In the launch function of the controller, I want to check if the user already logged in to show his id and show a logout button. But when I try to get the panel ref, it's undefined. But why?
launch: function() {
var me = this,
sessionInfo = Ext.getStore('SessionInfo');
console.log(me.getLoginPanel()); <-- undefined
if (null !== sessionInfo.getAt(0).get('sessionId')) {
me.successfullLogin(sessionInfo.getAt(0).get('sessionId'));
}
}
Is anything actually creating an instance of your view?
Inside your application's launch method, you'll probably have to create an instance of it, and then either give your view the fullscreen: true config, or add it to the viewport. The examples on the Sencha Touch API docs for Ext.app.Application have the main view being created from the application's launch function.
The correct way of using the ref in my example would be:
refs: {
loginPanel: {
autoCreate: true,
forceCreate: true,
xtype: 'loginPanel'
}
}
I am new in sencha touch. I make a login page in there some override controls issue.
Here is my code.
Ext.define('RaceNote.view.Login', {
extend: 'Ext.form.Panel',
alias: "widget.loginview",
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label'],
config: {
title: 'Login',
scrollable: 'false',
layout: 'vbox',
items: [
{
xtype: 'label',
html: 'Login failed. Please enter the correct credentials.',
itemId: 'signInFailedLabel',
hidden: true,
hideAnimation: 'fadeOut',
showAnimation: 'fadeIn',
style: 'color:#990000;margin:5px 0px;'
}, {
xtype: 'fieldset',
title: 'Login Example',
items: [{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
}, {
xtype: 'passwordfield',
placeHolder: 'Password',
itemId: 'passwordTextField',
name: 'passwordTextField',
required: true
}]
}, {
xtype: 'button',
itemId: 'logInButton',
ui: 'action',
padding: '10px',
text: 'Log In',
listeners: [{
delegate: '#logInButton',
event: 'tap',
fn: 'onLogInButtonTap'
}]
}]
}
});
and it s looking below.
Based on your comments, I'd say you are having the recent issue found with ST 2.2.1 and Chrome 29. See my answer regarding this here: Sencha Touch 2 App FieldSet not rendering
I have started to work on Sencha touch a week ago and I still no able to figured out how to create a view. I want to create textfield and listView. Listview shold be shown below the textfield. I am able to show either ListView or textfield as I am able to extend only Ext.panel or Ext.List.
Please help. Please share a link those give details about creating views in Sencha touch.
Ext.define('TrainEnquiry.view.SearchTrains', {
extend: 'Ext.Panel',
alias: "widget.searchtrains",
requires: [ 'Ext.dataview.List','Ext.form.FieldSet','TrainEnquiry.store.Homes'],
config: {
title: 'Train Enquiry',
items: [
{
xtype: 'fieldset',
style:'width:70%; margin:10px',
padding: '10px',
items: [
{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
}
]
},{
xtype: 'homepagelist',
style: 'margin-Top:100px',
config: {
itemTpl: '<div class="myContent">'+
'<div><b>{status}</b> </div>' +
'</div>',
store: 'Homes',
onItemDisclosure: true
}
}
]
}
});
Showing list views when you are also using a containing element (like a panel) is one of the trickiest things in Sencha, in my opinion. It can be done, but you have to set the layout: 'fit' property on the panel. You'll also need to dock your fieldset to the top (assuming you want it at the top, and probably turn that simple title attribute into a titlebar view within the panel. Here's a link to a SenchaFiddle demonstrating an example of how to do this, and some code for you below:
Ext.Viewport.add({
xtype: 'panel',
layout: 'fit',
items: [
{
xtype: 'titlebar',
title: 'Train Enquiry',
docked: 'top'
},
{
xtype: 'fieldset',
docked: 'top',
items: [
{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
}
]
},
{
xtype: 'list',
itemTpl: '<div class="myContent">'+
'<div><b>{name}</b> </div>' +
'</div>',
data: [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' },
{ name: 'Item 4' }
]
}
]
});
(By the way next time keep searching, this is the question/answer that most likely would have helped you most: sencha don't seeing the list in a panel)
Avoid using inline styling.
If you want the fieldset to stick to the top of the main panel always and the list to scroll, use layout:'fit' inside the main panel config and add docked: 'top' at the fieldset config.
If you want both of them to scroll, remove main panel layout (which will take layout:'auto'), put scrollable:true in main panel config and add scrollable:false in list config. Like this:
config: {
title: 'Train Enquiry',
scrollable : true,
items: [{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
}]
},{
xtype: 'homepagelist',
scrollable: false, // no scrolling for the list
config: {
itemTpl: '<div class="myContent">'+
'<div><b>{status}</b> </div>' +
'</div>',
store: 'Homes',
onItemDisclosure: true
}
}]
}
Get the code here: http://www.senchafiddle.com/#x8rZo#fRzwt
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 ...