CODEWITHSUNDEEP
javascriptsencha-touch
Thomas
Thomas

Reputation: 87

Sencha Touch 2 - Adding a textfield and updating its value

I have a rather easy issue I need a solution to. I've tried different options, but haven't got any good results. What I'm trying to do is, within a class, add a textfield and put a value via javascript in it.

For example, I got this code:

Ext.define('project.view.viewexample', {
extend: 'Ext.Panel',
xtype: 'gps',

config: {
    styleHtmlContent: true, 
    scrollabe: 'vertical',
    title: 'GPS',
    tpl: ''
},
constructor: function() {
    this.getPosition();
},
getPosition: function() {
    var geo = Ext.create('Ext.util.Geolocation', {
        autoUpdate: false,
        listeners: {
            locationupdate: function(geo) {
                alert('New latitude: ' + geo.getLatitude());
            },
            locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
                if(bTimeout){
                    alert('Timeout occurred.');
                } else {
                    alert('Error occurred.');
                }
            }
        }
    });
    geo.updateLocation();
}
});

What if I, want to create a textfield and instead of alerting the latitude-value updating the textfield with it. How would I do that?

  1. How to create the textfield with the structure I use above?
  2. How to call and modify it from the javascript?

Thanks in advance! Big cred to the one sitting on this knowledge!

Upvotes: 0

Views: 500

Answers (3)

greg.arnott
greg.arnott

Reputation: 1642

You have the structure in place, including one of the multitude of means of creating what you want written - yet it is an empty string.

Something like this should work:

config: {
    styleHtmlContent: true, 
    scrollabe: 'vertical',
    title: 'GPS',
    lat: '',
    tpl: '<div class="lat">New latitude: {lat}</div>'
},
constructor: function() {
    this.getPosition();
},
getPosition: function() {
    var geo = Ext.create('Ext.util.Geolocation', {
        autoUpdate: false,
        listeners: {
            locationupdate: function(geo) {
                this.lat = geo.getLatitude();
            },

The class (lat) in the template offers a means of styling via css.

Other means really depends on how you want it displayed - textbox, titlebar, floating box, text, etc. Do you want it there all the time, or only on new input?

Instead of "tpl", have:

items: [{
    xtype: 'label',
    html: '',
    itemId: 'latLabel'
}]

// listener updater:
panel.down('#latLabel').setHtml('New latitude: ' + geo.getLatitude());

There are so many other means of creating precisely what you're after. The Sencha Touch library is rich in tools for creating and/or updating elements that specifically meet your needs.

Hope this helps.

Upvotes: 0

SachinGutte
SachinGutte

Reputation: 7055

IMHO, instead of displaying message in textfield, a message box would be more appropriate. If you use sencha's msg box then you'll get a nice look too. So no need to use simple alert.

You can do this..

Ext.Msg.alert('Error', 'Timeout has been occurred.', function(){
     // stuff to do when use clicks on Ok button. Can listen to location again.
});

Just replace this with alert.

Upvotes: 1

Antonio Novoselnik
Antonio Novoselnik

Reputation: 141

Create textfield with jQuery in your constructor

$("#form").append('Lat: <input id="latitude" type="text" name="latitude">');

Update textfield

$("#form").find("#latitude").val(geo.getLatitude());

That is it :)

Upvotes: 0

Related Questions