how to use third party extension in sencha touch

Question

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

score 2 · Answer 1 · answered Nov 11 '14 at 08:55

2

It is Ext.require(['Ext.ux.field.DateTimePicker']);.

DateTimePicker -> ux/field/DateTimePicker

DateTime -> ux/picker/DateTime

I wasted 6 hours to find this issue.

answered Nov 11 '14 at 08:55

user3144730

21
4

score 1 · Accepted Answer · answered Jan 09 '13 at 10:14

1

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

answered Jan 09 '13 at 10:14

A1rPun

16,287
7
57
90

There are two subfolders inside `ux` i.e. `auth` and `auth2`. So do I need put this inside one of those subfolders? There is no `picker` subfolder inside `ux`. – Om3ga Jan 09 '13 at 11:08
make one :)! This is because the extension uses Ext.ux.picker as namespace. – A1rPun Jan 09 '13 at 12:30
@A1rPun could you please check my update above. I am having problem with `Ext.requires`. – Om3ga Jan 10 '13 at 06:53
Check the link in my answer. you are using Ext.require wrong, use it like this before you define something `Ext.require(['Ext.ux.picker.DateTimePicker']);` – A1rPun Jan 10 '13 at 08:14
I did it what you said please check my updated code but it does not work either. I also checked that link in your answer since I am new to sencha touch so it is difficult to understand this without proper example. – Om3ga Jan 10 '13 at 08:29
I can understand that. Try to learn from the docs :) but on your problem: **place Ext.require on top of your page** after Ext.onready – A1rPun Jan 10 '13 at 08:48
You mean I should use it before `Ext.define()`? If yes then I use that way but it shows this error `Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: widget.datetimepickerfield` – Om3ga Jan 10 '13 at 08:50
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/22503/discussion-between-a1rpun-and-x4ph4r) – A1rPun Jan 10 '13 at 08:56

how to use third party extension in sencha touch

2 Answers2