Sencha Touch

Sencha Touch - это HTML 5 фреймворк, созданный специально для мобильных устройств. Он может использоваться разработчиками для создания пользовательских интерфейсов для мобильных приложений, которые будут выглядеть как нативные приложения. Sencha Touch полностью базируется на стандартах HTML 5, CSS 3 и JavaScript. Основной целью применения данного фреймворка является быстрое создание мобильных приложений для устройств, использующих операционные системы Android, iOS, Blackberry и Kindle Fire. Будучи JavaScript-фреймворком Sencha Touch состоит из UI-виджетов и Data-библиотек. Используя Data-библиотеки ваше приложение может получать данные с сервера, используя AJAX-запросы и JSONP.

ExtJS Каркас

// Вкладки и каркас

var tabpanel = Ext.create('Ext.tab.Panel', {
    items: [
        {
            title: 'Отчеты',
            layout: 'border',
            items: [
                {
                    xtype: 'panel',
                    region: 'north',
                    border: false,
                    items: [toolbar]
                },
                {
                    xtype: 'panel',
                    region: 'center',
                    layout: 'border',
                    width: '50%',
                    border: false,
                    items: [
                        {
                            xtype: 'panel',
                            region: 'center',
                            layout: 'fit',
                            items: [user_table]
                        },
                        {
                            xtype: 'panel',
                            region: 'south',
                            bodyStyle: 'background-color: #dfe8f5;',
                            split: true,
                            items: [user_data_form]
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    region: 'east',
                    layout: 'border',
                    width: '50%',
                    border: false,
                    split: true,
                    items: [
                        {
                            xtype: 'panel',
                            region: 'center',
                            layout: 'fit',
                            items: [comments_table]
                        },
                        {
                            xtype: 'panel',
                            region: 'south',
                            bodyStyle: 'background-color: #dfe8f5;',
                            split: true,
                            items: [comment_data_form]
                        }
                    ]
                }
            ]
        },
        {
            title: 'Демонстрационная вкладка',
            html: 'Просто демонстрационный текст.'
        }
    ]
});

Ext.onReady(function(){
                   
    Ext.QuickTips.init();

    Ext.create('Ext.Viewport', {
        layout:'fit',
        items: [tabpanel]
    });

});

Sencha Architect

Sencha Architect - это настольное приложение для Windows, которое поможет вам создавать интерфесы Ext JS и Sencha Touch быстрее, чем ранее, благодаря простой и удобной системе перетаскивания компонентов Ext JS.

Мощный визуальный редактор Sencha Architect 2 позволяет создавать полный версии приложений Ext JS, состоящие из списков, кнопок, форм, таблиц и каруселей.

Вы можете создавать приложения на основе Sencha Touch 2 и Ext JS 4 простым перетаскиванием компонентов по экрану редактора.

Редактор поддерживает разработку приложений для мобильных устройств, использующих системы iOS и Android.

Внимание! Sencha Architect предназначен только для работы с Ext JS 4 и Sencha Touch 2.x.

ExtJS Cheat Sheet Basic

DOM

1  Ext.onReady(function () { }); //callback to execute when the DOM is ready
2  var myDiv = Ext.get('divId'); //retrieve a Ext.Element
3  var combo = Ext.getCmp('colorsCombo'); //retrieve a Ext.Component
4  Ext.getBody(); //return the body of the document as an Ext.Element
5  Ext.getDom(id) ; //return the DOM node as HTMLElement
6
7  //Dom Query to return an Array of Ext.Element, includes selector/XPath processing
8  var nodes = Ext.query('div'); //Ext.query('.msg'); for all elements with msg class
9  Ext.each(nodes, function (item, index, allItems) {
10   document.write(index + '<br/>');
11 });

JSON and URL encoding

1 Ext.USE_NATIVE_JSON = true;
2 JSON Encoding: var objectJson  = Ext.encode(myObject);
3 JSON Decoding: var myObject = Ext.decode(objectJson);
4
5 var encodedUrl = Ext.urlEncode(selectedColors); //URL Encoding
6 var decodedUrl = Ext.urlDecode(encodedUrl); //URL Decode

Reflection

1 Ext.type(myObject); //Determine object type: array, object, number
2 Ext.isArray(myObject);  Ext.isNumber(myObject); Ext.isString(myObject);
   
Array functions

1 var position = myArray.indexOf('Duck');  //find an object in an array
2 //0 is the first element, -1 is not found
3 myArray.remove('Dog'); //remove an object from an array

String functions
   
1  var newString = String.escape(myString);
2  var newString = beforeTrim.trim();
3  var newString = String.format('You have {0} messages', msgCount);
4  var newString = Ext.util.Format.uppercase(myString);
5  //Other functions with one argument:  Ext.util.Format.lowercase(),
6  //Ext.util.Format.capitalize(),  Ext.util.Format.stripScripts(),
7  //Ext.util.Format.nl2br(), Ext.util.Format.usMoney()
8  var newString = Ext.util.Format.ellipsis(myString, 20);
9  var newString = Ext.util.Format.substr(myString, 0, 5);
10 var newString = Ext.util.Format.leftPad('23', 4, '0');

Value checking
   
1 Ext.num(myObject, 0); //provide a default value it's not a number
2 var allowZeroLen = false; //this is the default and you can omit
3 Ext.value(myObject, 'default', allowZeroLen); //provide a default value for the string
4 var constrained = number1.constrain(25, 50); //force it in the range

Dates
   
1 var now = new Date();
2 var formatted = now.format('Y-m-d');
3 var aDate = Date.parseDate('2010-12-09', 'Y-m-d');
4 var inRange = now.between(lowDate, highDate);

Примеры ExtJS 4 на Английском языке

ext4all.com