Rectangle 27 5

{
    xtype: 'textfield',
    cls: 'username',
    fieldLabel : 'Username', // works for ExtJS
    label : 'Username' // works for Sencha Touch
}
.username .x-form-text, .username .x-form-field {
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/1/12/User_icon_2.svg/48px-User_icon_2.svg.png) no-repeat left;
    background-size: contain;
    padding-left: 25px;
}
.username .x-form-field { /* Adding more padding for Sencha Touch only */
    padding-left: 50px;
}

@user2842237 This is the officially supported, builtin how-to-do-it!

extjs - How to add an image in textfield in sencha touch - Stack Overf...

extjs sencha-touch sencha-touch-2
Rectangle 27 2

Hey Guys i made it working using the below code. Anyways thanks.

var temp =  field.store.findRecord('productCode', field.getValue());                          
console.dir(temp.data.productName);

can you show me where did you put this code. I am getting error upon error.

extjs - How to get selected value in Sencha touch option field - Stack...

extjs extjs4 sencha-touch sencha-touch-2
Rectangle 27 2

You should try the Using Navigation View tutorial in sencha architect documentation... It gives a simple step by step guide for view navigation for an app. The navigation view also provides in built history support from sencha touch 2 onwards which also makes going back simple and easy

For example 3 containers each with their own navigation view children. How to add and destroy each container??

push adds container and pop destroys container... Sencha navigation view takes care of add and destroy simply ensure that each container has unique IDs

extjs - Changing views on button click in Sencha Touch - Stack Overflo...

sencha-touch extjs sencha-touch-2 sencha-architect
Rectangle 27 1

This is working as intended. Sencha build process looks for dependencies (via require) and loads them accordingly, getting you the smallest build necessary. Good practice is to always set your requires.

To get around this, if you really want to just include all classes, you can add standalone requires to the top of the app. Since Ext.Loader can accept wildcards, you can just do Ext.require('App.model.*') and it will load all the individual model files, for example.

extjs4.2 - Sencha Cmd 4: minify the javascript code of ExtJS and Sench...

sencha-touch extjs4.2 sencha-cmd
Rectangle 27 1

Sencha Touch 2.1 doesn't work with SDK Tools anymore. The documentation bundled with Sencha Touch 2.1 is not up-to-date. Here is the good documentation :

I'm still getting the error where the CMDtool doesn't recognize the folder as the SDK. And I dont have a clue why. Some sources say that the hidden (.senchasdk) files will help this but it doesn't. The folder I'm execute from is this one: dl.dropbox.com/u/5461608/senchaSDK.tiff. Is this right folder?

extjs - Installing Sencha Touch 2 framework - Stack Overflow

extjs touch
Rectangle 27 5

1) For simplicity's sake, I personally go with using the highest resolution/size for each overall platform (Android, iPhone, Blackberry). The phones will scale the images accordingly. It just makes things way simpler; the only reason in my mind to not do this is if you have a truly massive total image size and optimizing is the difference between >10mb. Any time a phone has to scale any images, there is apparently a small performance hit, but it's ultimately not noticeable at all to me.

2) Sencha supports retina display. As long as you use a sufficiently high resolution image, it will be scaled properly. Make sure to include retina display splash screens and app icons, of course.

Nope, all you need is the relative pixel size for each image (what you would declare normally, ie: "height:200px;width:100px"). Everything will be run in the background to determine what that ends up being with regard to image scaling.

You got it! Glad it was helpful :)

extjs - Working with images in Sencha Touch for different Resolution T...

extjs sencha-touch sencha-touch-2 sencha-architect
Rectangle 27 4

I know the question has been answered. But I just digged up a pretty natural way to pass data from controller to a view (using view's constructor). I use this in my integration of web desktop to my app.

In controller, pass data to the constructor of the view as followed:

loiTab = Ext.create('Iip.view.giips.admission.DetailedLoiTab', {closable: true, selectedLoiData: selected[0].data});

In the view, spin up a constructor as followed:

constructor: function(selectedLoiData) {
    Ext.applyIf(this, selectedLoiData);
    this.callParent();
},

The following method lives in the same file as the constructor. You can access selectedLoiData from any where in the view the constructor lives as followed:

initComponent: function(){
    console.log(this.selectedLoiData);
}

extjs - Passing data to another view from controller and set a label's...

extjs sencha-touch-2
Rectangle 27 2

This is very much like thumbnail gallery/list shown in Touch Style example bundled with Sencha touch library in examples folder. As @TDeBailleul said this can be done with DataView but if you feel that is little tricky or touch you can use template approach easily.

extjs - Creating Sencha touch 2 app dashboard - Stack Overflow

extjs sencha-touch sencha-touch-2
Rectangle 27 1

No, I hadn't, although that has worked in extjs apps in the past. I figured there is a much more elegant solution and have been told in the past to avoid that if you can. I was hoping to learn a better solution.

I guess I just meant as an alternative to Ext.query which doesn't return components. If you could share your source code on jsfiddle or something we might be able to dive deeper into it.

Thanks. I updated the original question with links to the important parts of the code

extjs - Sencha Touch: Dynamic chart labels in a MVC app - Stack Overfl...

sencha-touch extjs sencha-charts
Rectangle 27 0

This is working as intended. Sencha build process looks for dependencies (via require) and loads them accordingly, getting you the smallest build necessary. Good practice is to always set your requires.

To get around this, if you really want to just include all classes, you can add standalone requires to the top of the app. Since Ext.Loader can accept wildcards, you can just do Ext.require('App.model.*') and it will load all the individual model files, for example.

extjs4.2 - Sencha Cmd 4: minify the javascript code of ExtJS and Sench...

sencha-touch extjs4.2 sencha-cmd
Rectangle 27 0

onDisplayAuthority: function(list, record) {
    console.log('onDisplayAuthority');
    var authorityView = this.getAuthorityView();
    authorityStore = Ext.getStore('Authority');

    var authorityId = record.getData().id;
    var url = 'http://localhost:3000/api/authorities/' + authorityId + '.json';
    var proxy = {
        type: 'jsonp',
        url: url,
        reader: {
            type: 'json',
            rootProperty: "authority"
        }
    };

    authorityStore.setProxy(proxy);
    authorityStore.load({
        callback: function(records, operation, success) {
            // the operation object contains all of the details of the load operation
            var data = records[0].getData();
            authorityView.setRecord(records[0]);

            authorityView.getComponent("authorityViewBody").setData(data);
            authorityView.getComponent("titlebar").setTitle(data.title);
        },
        scope: this});      

    Ext.Viewport.animateActiveItem(authorityView, this.slideLeftTransition);
}

By placing the lines of code that set the data for authorityView within the callback from the #load method of the store, I was able to get access to the new record. I am not sure why I had to do it this way, and would appreciate comments. But, this approach does work.

extjs - How can i retrieve an index of records from the server into my...

extjs sencha-touch sencha-touch-2
Rectangle 27 0

The safest way which even works when you destroy the component completely when removing it (you should always do, it reclaims a lot of memory), is to declare the event handlers in the initialize function of that component, or its parent component, wherever you think suitable, for example:

initialize: function(){
    var me = this;
    me.add({
        xtype: 'list',
        grouped: true,
        indexBar: true,
        itemTpl: '{first} {last}',
        listeners: [
            {
                event: 'itemtap',
                fn: function(dataview, index, target, record, e){
                    // do something
                }
            }
        ]
    });
}

This is an example for itemtap event on a Ext.List. Let's adapt it to your case.

extjs - When buttons are removed they lose event handling in Sencha To...

extjs sencha-touch sencha-touch-2 sencha-touch-2.1
Rectangle 27 0

I am not sure if this could help but incase if you are looking to download a lower version of Sencha Cmd. The below link has it:

If you just scroll down, you can see a bunch of links that gives you Sencha Cmd 3.0.0.250 for different OS.

extjs - Cannot build Sencha Touch 2.1 app with Sencha Cmd 3.1.1.274 - ...

extjs sencha-touch sencha-touch-2.1 sencha-cmd sencha-command
Rectangle 27 0

Working fine after including following classes.

'Ext.chart.axis.Numeric',
          'Ext.chart.axis.Category',
          'Ext.chart.series.Line',
          'Ext.chart.interactions.PanZoom',
          'Ext.chart.series.Bar'

extjs - Sencha touch chart not working after packaging the code - Stac...

extjs sencha-touch sencha-charts
Rectangle 27 0

The magical way is... Docking ( outside the rest of the app, probably means you want to doc on the viewport ).

var button = Ext.create('Ext.Button', {
      text: 'Button',
      id: 'rightButton'
 });

 Ext.create('Ext.Container', {
     fullscreen: true,
     items: [
         {
              docked: 'top',
              xtype: 'titlebar',
              items: [
                  button
              ]
          }
     ]
 });

 Ext.create('Ext.Panel', {
     html: 'Floating Panel',
     left: 0,
     padding: 10
 }).showBy(button);

How to add interactive, dynamic components on a fixed location outside...

sencha-touch touch extjs sencha-touch-2 docking
Rectangle 27 0

I think it's your button listener, it seems that it might be being triggered on even the tab panel button taps. I would try giving your button a unique ID and then create a ref and an action to login based on that ID.

yes was indeed the tap listener. I used a ref and now it works fine. Thanks.

extjs - Sencha Touch: TabPanel with bottom TabBar not working when usi...

extjs sencha-touch sencha-touch-2 sencha-touch-2.1
Rectangle 27 0

Usually size of minified sencha file would be around 1M. And your application file (depend of course on the size of application) would be around same size 0.5-1.5M too.

There are more things to implement and I'll build it again and check the size, but that's I wanted know. Thank you!

extjs - what is the normal size for a sencha touch app? - Stack Overfl...

extjs sencha-touch sencha-touch-2 sencha-touch-2.1
Rectangle 27 0

You can use Phonegap/Apache Cordova for that. At our company we use sencha build to build our sencha app, use cordova to package it as a native one, installs it in the devices (iPhone/iPad/Android Phones/Android Tablets) and then test.

extjs - Testing Sencha touch apps - Stack Overflow

extjs sencha-touch-2
Rectangle 27 0

If you have a site working but your charts are not rendering, make sure that the chart's container as layout (layout: 'fit' or any other layout)

extjs - Using Sencha Touch charts within an MVC application - Stack Ov...

sencha-touch extjs sencha-charts
Rectangle 27 0

Getting any kind of SEO out of a Sencha app is impossible since it builds everything on the fly. Even if you use the history support in Sencha Touch, thats also done on the fly and has no effect on SEO.

For consumer-facing websites, Sencha is not the answer. For back-end (for maybe managing the shopping cart), its a different story.

html - ExtJs and Sencha Touch Search Engine Optimization - Stack Overf...

html extjs seo sencha-touch-2