Sencha Touch with GameThrive.com

Montag, 17. November 2014
Hey Touchers,

some of you might know GameThrive.com. For those who don't: it's a completly free push notification service. This weekend GaemThrive published a guide for Phonegap. I had to apply some changes so it's working with Sencha. This is how you will get GameThrive working with Sencha Touch:

1. Install the external preconditions from step 1 and / or 2 HERE

2. Add the following plugins.

3. Add this to your launch function and replace the app_id (iOS) or senderId(Android) in the jsonData Object:



This is it. You will find a full Sencha Architect example to download HERE.

Questions and improvements are welcome!


Source:
http://documentation.gamethrive.com/v1.0/docs/phonegap-sdk-installation
Read more ...

-- FIX -- Sencha Touch does not center Map correctly

Dienstag, 4. November 2014
Some of you may already have faced this issue. Centering Google Maps does not always work how it should, especially If you use markers. Here is how to fix this issue:


First I we need a map, for example this one here:



Now comes the important part. You need to add a listener on your map for the painted event. When the painted event is fired we do also need a timeout to set the center. This can be really small.




This should to it, the map will now be centered correctly.
Read more ...

Sencha Touch change theme dynamically / programmatically

Dienstag, 2. September 2014
Here's an example how to change the Sencha Touch theme within your coding.

Demo: LINK

Source: LINK

The most important part is this function:




I know there is improvement to be done while the new css is beeing applied but I think you can do it on your own ;)


Read more ...

Ext.ProgressIndicator outside of a Ajax.request

Donnerstag, 21. August 2014
It's a long time since my last tutorial. But I think I got another useful example to show.
Maybe some already know the new ProgressIndicator in Sencha Touch 2.3.x. You can simply attach it to a Ajax.request as the progress option to show the download/upload progress to the users of your app.
I wanted to use this also for other use-cases such as the FileTransfer class in Cordova / Phonegap. Even if your now bound to this example I did the a showcase with the FileTransfer.download method :)

DEMO LINK

ZIP LINK


Read more ...

!!! UPDATED !!! Sencha Touch Grid: Percentage based width

Dienstag, 1. Juli 2014
As many of you I was wandering why Sencha didn't include the possibility to set a column width to a specified 25% of the screen. So here is a how to enable this feature by yourself.

DEMOhttps://dl.dropboxusercontent.com/u/2056172/KeepAlive/GridPrecentageWidth/ExampleProject/index.html

Full Project: https://dl.dropboxusercontent.com/u/2056172/KeepAlive/GridPrecentageWidth/GridColumnPercentage.zip

Full Tutorial:

First we need a sample grid and set the  width of the columns to a percentage value, for example '25%'

Ext.define('ExampleProject.view.SampleGrid', {
    extend: 'Ext.grid.Grid',
    alias: 'widget.samplegrid',

    requires: [
        'Ext.grid.column.Column'
    ],

    config: {
        height: '100%',
        id: 'samplegrid',
        store: 'MyStore',
        title: 'MyGrid',
        columns: [
            {
                xtype: 'column',
                itemId: 'column1',
                width: '40%',
                dataIndex: 'data1',
                text: 'Column1'
            },
            {
                xtype: 'column',
                itemId: 'column2',
                width: '25%',
                dataIndex: 'data2',
                text: 'Column2'
            },
            {
                xtype: 'column',
                itemId: 'column3',
                width: '25%',
                dataIndex: 'data3',
                text: 'Column3'
            }
        ],
        listeners: [
            {
                fn: 'onGridPainted',
                event: 'painted'
            },
            {
                fn: 'onGridWidthChange',
                event: 'widthchange'
            }
        ]
    
    }
)};

All we need to to now is to call a function on the painted event which will let us render the percentage value to a pixel value and overwrite the width on the column.

So add a painted listener because we need to set the new size when the grid is painted:


onGridPainted: function(element, eOpts) {
        this.renderColumnPercentage(element);
},

And now calculate the pixels from the percentage value:

var grid = this,
    
    columnArr = grid.getColumns(),
    
    numberOfCols = columnArr.length,
    
    clientWidth = element.getAttribute('clientWidth');

columnArr.forEach(
    function(column, index, array) {
        
        var perWidth = column.getWidth(); // Percentage or Pixel width --> '25%' || '123'
        
        if (!Ext.isNumeric(perWidth) && perWidth) { // Checking for a percentage value
            
            perWidthNum = perWidth.substr(0,perWidth.length-1) / 100; // Numeric Width --> 0.25
            pxWidth = clientWidth * perWidthNum; // Width in Pixel --> 123
            
        }
        
        // Header width
        column.bodyElement.setWidth(pxWidth);
        column.refreshSizeState();
        
        // Each column has its own class
        if (! column.getCellCls()) {
            column.setCellCls(createCellCssClass(pxWidth));
        } else {
            // Query doms for a class --> 1 Class = 1 Column
            var elements = Ext.query('.' + column.getCellCls()),
                newClass = createCellCssClass(pxWidth),
                oldClass = column.getCellCls();
            
            // Loop doms and replace old class with new one
            Ext.Array.each(elements, function(ele, index, elementsItSelf) {
                
                ele.classList.remove(column.getCellCls());
                ele.classList.add(newClass);
                
            });
            
            column.setCellCls(newClass);
            
        }
        
    }
);

function createCellCssClass(pxWidth) {
    
    var className = 'cell-' + 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
    });
    
    var css = document.createElement('style');
    css.type = 'text/css';
    
    var styles = '.' + className + ' { width: ' + pxWidth + 'px !important; }';
    
    if (css.styleSheet)
        css.styleSheet.cssText = styles;
    else
        css.appendChild(document.createTextNode(styles));
    
    document.getElementsByTagName("head")[0].appendChild(css);

    return className;
}

The width is set on the elements level to prevent loosing the percentage value on the column level.

Last we need to call the same function when widthchanged is fired on the grid itself because this will need resizing for all columns.
Just add a listener to perform the resizing again:

onGridWidthChange: function(component, value, oldValue, eOpts) {
        this.renderColumnPercentage(component.bodyElement);
},


Read more ...

Shorthanders

Dienstag, 8. April 2014
As I often see many developer write way to much code even if the do not have to. Here are my tipps for you to safe lines of coding :)

Read more ...

Sencha Touch Grind-Printer

Montag, 31. März 2014
Maybe someone of you already had the wish to print a grid easily from within a Sencha Touch application.

Requirements:

  • Cordova
  • Cordova printer plugin: https://github.com/FRD49/phonegap-print-plugin


Here is a short javascript source written by myself to archive this. Documentation is in the code itself. Columns without a dataindex will not be printed!

Read more ...