Sencha Touch 2 - JavaScript Framework
Release Notes: Release Notes: February 26, 2012
Version Number: 2.2.0.b1
We have added some configurations to List which will help improve performance. The new useSimpleItems (name may change) configuration uses a much lighter DOM structure to accommodate a basic List. In addition having an infinite list is now optional and will be turned off by default. This is a change from Touch 2.1.
The default List options have been changed from Touch 2.1 to improve the performance of basic lists used commonly in applications. Developers can now better tune these configs to their specific needs.
Developers may want to maintain a platform specific UI. To help facilitate this, we are adding in a new option to the app.json configuration which allows you to whitelist specific files against the platforms of your chosing. The following is an example which allows different CSS files to be loaded for different platforms. The platform detection is done in the microloader and we expect to continue to enhance this functionality in the future.
In addition, there is a new theme property which is used within the framework to identify which theme (CSS file)
is being currently used. Various themes in Touch 2.2 (Windows and BlackBerry) are applied to features such as MessageBox.
"css": [
{
"path": "../../resources/css/base.css",
"update": "delta"
},
{
"path": "resources/css/sencha-touch.css",
"platform": ['chrome', 'safari', 'ios'],
"theme": "Default",
"update": "delta"
},
{
"path": "resources/css/android.css",
"platform": ['android'],
"theme": "Android",
"update": "delta"
},
{
"path": "resources/css/bb.css",
"platform": ['blackberry'],
"theme": "Blackberry",
"update": "delta"
},
{
"path": "resources/css/wp.css",
"platform": ['ie10'],
"theme": "Windows",
"update": "delta"
}
]
Release Notes: Release Notes: February 5, 2013
Version Number: 2.1.1
Release Notes: Release Notes: December 21, 2012
Version Number: 2.2.0.alpha
This alpha release is our first with a non-webkit brower: IE10. As more browsers support the CSS features we need (primarily a solid Flexible Box Layout), we welcome the oppertunity to support them. IE10 also provides Pointer Events which has been integrated as well.
Supporting other browsers also means that any remaining specific webkit CSS and javascript will have to go. The main impact will be with webkit-masks which we are moving to font-faces.
As the CSS can be quite different between platforms, we are doing some internal restructuring of our SASS and providing our developers with some new options to help keep the CSS size manageable.
Developers may want to maintain a platform specific UI. To help facilitate this, we are adding in a new option to the app.json configuration which allows you to whitelist specific files against the platforms of your chosing. The following is an example which allows different CSS files to be loaded for different platforms. The platform detection is doin in the microloader and we expect to continue to enhance this functionality in the future.
"css": [
{
"path": "../../resources/css/base.css",
"update": "delta"
},
{
"path": "resources/css/sencha-touch.css",
"platform": ['chrome', 'safari', 'ios'],
"update": "delta"
},
{
"path": "resources/css/android.css",
"platform": ['android'],
"update": "delta"
},
{
"path": "resources/css/bb.css",
"platform": ['blackberry'],
"update": "delta"
},
{
"path": "resources/css/wp.css",
"platform": ['ie10'],
"update": "delta"
}
]
The organization of themes has greatly improved in Sencha Touch 2.2. We have abstracted our default theme into a 'base' which consists of only the basic colors and layout of all components. The new 'default' theme and any new themes are then built on top of that base. This transition allowed us to review every line of SASS and remove any existing cruft that was no longer needed.
We have also moved away from -webkit-mask icons and instead are using the Pictos Font. The existing pictos-iconmask mixin has been deprecated and been replaced with the new icon mixin. With this change, you also no longer need to add iconMask as a config to your buttons/tabs.
As we are still in alpha, the update process for the new SASS is manual. This will be automated with forthcoming enhancements to the Command tooling.
Updating to the Sencha Touch 2.2 SASS should be straightforward. All variables will still work, however you will need to update your @import calls to require the new base theme:
@import 'sencha-touch/default/all';2.2:
@import 'sencha-touch/base';
@import 'sencha-touch/base/all';
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';
Alternatively, you can just include the base.css file in resources/css into your app.json file, and only include the Sencha Touch default theme:
"css": [
{
"path": "../../resources/css/base.css",
"update": "delta"
},
{
"path": "resources/css/app.css",
"update": "delta"
}
]
app.scss:
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';
The way component mixins are required has also changed slightly and dramatically speeds up the SASS compile time.
They are no longer included via mixin, but via @import:
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
2.2:
@import 'sencha-touch/default/panel';
@import 'sencha-touch/default/buttons';
@import 'sencha-touch/default/sheet';
And finally, when using icons, you no longer need to include iconMask in your JS:
The first item to bring in from our Fastbook side project, we have added the AnimationQueue class and have begun integrating it into the framework. It will take some time to have this fully integrated.
We are continuously trying to improve the performance of the List in Sencha Touch. We are planning on doing this in multiple stages. In Touch 2.1 the infinite List rendered the minimum amount of items needed to fill the visible area of the List. Then while scrolling it updated the content of List items according to where you where in the List and moved every single one of those items individually to the correct location. In 2.2 alpha we changed this slightly to a system where we only move the container the items are in and then when needed translate 1 individual item from the top to the bottom (when scrolling down) or from the bottom to the top (when scrolling up) of the list items within that container. This makes it so that in any given frame we only translate a maximum of 2 items on the screen.
Release Notes: Release Notes: November 6, 2012
Version Number: 2.1.0
Release Notes: Release Notes: October 12, 2012
Version Number: 2.1.0-rc2
We are now preparing for the final GA release of Touch 2.1. Until then we will be focusing on bug fixing, documentation, and performance tweaks.
A DOM change was made to ListItems to improve performance by removing a level of box nesting. If you use a header with a custom height you will need to set that height in the sass For example:
.x-list-normal {
&.x-list-grouped .x-list-header-wrap .x-dock-horizontal {
padding-top: 26px;
}
}
In addition if you were targeting ".x-list-item .x-dock-vertical", this will change to ".x-list-item .x-dock-horizontal".
Release Notes: Release Notes: October 3, 2012
Version Number: 2.1.0-rc1
We are now preparing for the final GA release of Touch 2.1. Until then we will be focusing on bug fixing, documentation, and performance tweaks.
Release Notes: Release Notes: September 10, 2012
Version Number: 2.1.0-b3
The new List component is included with this release. This implementation replaces the old one for lists and is no longer bound one-to-one between a store and DOM elements. This means that the length of the list will no longer have a bearing on it's scrolling performance. In addition, lists can use components if you specify them with an itemConfig and itemTpl will be converted to an itemConfig dynamically if you specify one. Due to these changes, the DOM structure was altered for lists and you may need to change some css selectors to add appropriate styling for your lists. Typically you need to change the selector from '.x-list-item' to '.x-list-item > .x-dock-vertical > .x-dock-body' for any padding or margins you may have added. We have change the TouchTweets example from using a component based DataView to the new List very easily and should be a good example of using the new List component with dynamic large lists.
We are releasing an update to Sencha Command and the Native Packager. This includes many bugfixes and
enhancements including:
The Native packages are also now plugin based and includes an API for developers to write their own
plugins.
We continue to add more to charting, and this release includes some of the labeling, grouped bar charts, axis titles, and more. We want the next release for charting to be feature complete so expect the last chart types and missing functionality to be added soon.
Once again, thank you for all the reported issues, we have fixed many bugs for this release and continue to work hard on them. The major changes are now in place and we are continuing to work on performance enhancements and bug fixes until the release is ready.
change event when toggled or when the value is changed.
Release Notes: Release Notes: August 7, 2012
Version Number: 2.1.0-b2
Thank you for all the feedback on the first release, this beta for Touch 2.1 is includes many performance enhancements to Layouts and DOM events as well as additional drawing and charting enhancements.
Release Notes: Release Notes: July 19, 2012
Version Number: 2.1.0-b1
This is the initial beta for Touch 2.1 which is focused on the new charting package as well as bug fixes. The charting package has had a major rewrite and includes SVG support on devices which can support it. Most devices perform faster with Canvas and will use that engine by default. We will be adding more charting types and other missing functionality in charts throughout the beta cycle. The next release will be more focused on performance enhancements with updates to the layouts and events.
Release Notes: Release Notes: June 28, 2012
Version Number: 2.0.2
Release Notes: Release Notes: April 23, 2012
Version Number: 2.0.1
Special Notes:
If you are using a LocalStorage proxy, from now on your Model's identifier strategy must generate unique id's. We suggest you use the included UUID strategy by adding identifier: 'uuid' to your Model definition. Any existing Models you have saved to LocalStorage will need to have this added. A warning will be thrown for any Model configured with a LocalStorage proxy that doesn't have a unique id generating strategy.
The change event in Ext.field.Select has been changed to return the new and old values and not records. This is to make it more consistent with all other form fields.
The change event in Ext.field.Slider has been changed event now passes the Slider component
Removed the default Ext.MessageBox requirement, added a proper error when Ext.Msg is used without Ext.MessageBox the requirement
Refactored NavigationBar. NavigationBar now extends TitleBar and has ellipsis support. Animations in NavigationView on Android are now supported
Optimized Card Layout with extra absolute position wrapper, improves performance in complex applications and when docking items to the left/right
Implemented a new default ui for the radio field
Revamped Command, removed all binaries (now reside in SDK Tools installations entirely)
Release Notes: Release Notes: March 30, 2012
Version Number: 2.0.1.RC
Special Notes:
The change event in Ext.field.Select has been changed to return the new and old values and not records. This is to make it more consistent with all other form fields.
The change event in Ext.field.Slider has been changed event now passes the Slider component
Removed the default Ext.MessageBox requirement, added a proper error when Ext.Msg is used without Ext.MessageBox the requirement
Refactored NavigationBar. NavigationBar now extends TitleBar and has ellipsis support. Animations in NavigationView on Android are now supported
Optimized Card Layout with extra absolute position wrapper, improves performance in complex applications and when docking items to the left/right
Implemented a new default ui for the radio field
Revamped Command, removed all binaries (now reside in SDK Tools installations entirely)
Release Notes: Release Notes: March 6, 2012
Version Number: 2.0.0
Release Notes: Release Notes: February 28, 2012
Version Number: 2.0.0.RC2
Special Notes:
The SASS $base-color in the default theme has been changed to Triton blue. If you want to continue to use the 1.x $base-color, you set it to `#354F6E` in your SASS theme file.
Release Notes: Release Notes: February 21, 2012
Version Number: 2.0.0.RC
Release Notes: Release Notes: February 13, 2012
Version Number: 2.0.0.beta3
Special Notes:
Application dependency logic has been tweaked to allow more versatility in specifying dependencies from packages outside your application. As of this release any combination of local and external dependencies should be possible, but you'll need use Ext.Loader.setPath to specify where external dependencies can be found. See the updated Application class docs for sample usage.
Release Notes: Release Notes: February 8, 2012
Version Number: 2.0.0.beta2
Android 4 transitions are hampered by a bug reported to the Android team. Help get its attention by starring the issue.
Notes:
Navigation View has been updated so the 'stack' is now based on the items config/collection. This means that if you define more than 1 item in a navigation view, the last item will always be the active item. The animation methods have also been removed from Navigaiton View. Instead, you should change the animation using the view.getLayout().setAnimation() setter instead, just like you would on a Ext.Container.
The signature returned in the callback configuration of Ext.util.JSONP#request has changed. Previously it only returned the JSON object. It now returns the success value (Boolean) as the first argument and then the JSON object as the second argument. The class has also been deprecated
The sencha-touch-debug.js shipped with Beta 2 now includes deprecated compatibility methods. Please remember that in order to use the smaller build without compatibility, you will need to fix any deprecation warnings you receive during development
Release Notes: Release Notes: February 1, 2012
Version Number: 2.0.0.beta1
Note: if you have been using the preview Preview Release builds of Sencha Touch, be aware that B1 ships with an updated set of built JavaScript files. There are now five builds in total, all of which are described in the builds and building guide.
As of beta 1 most people will need to update their PRx app to use sencha-touch-debug.js while developing, then switch to sencha-touch.js in production.
Release Notes: Release Notes: January 23, 2012
Version Number: 2.0.0.pr4
| Class | Event | Passed Arguments |
| Ext.carousel.Indicator | next | {Object} this, {Object} eOpts |
| Ext.carousel.Indicator | previous | {Object} this, {Object} eOpts |
| Ext.Container | activate | {Object} this, {Object} newActiveItem, {Object} oldActiveItem, {Object} eOpts |
| Ext.Container | add | {Object} this, {Object} item, {Number} index, {Object} eOpts |
| Ext.Container | deactivate | {Object} this, {Object} newActiveItem, {Object} oldActiveItem, {Object} eOpts |
| Ext.Container | remove | {Object} this, {Object} item, {Number} index, {Object} eOpts |
| Ext.Container | renderedchange | {Object} this, {Object} item, {Boolean} rendered, {Object} eOpts |
| Ext.data.Store | addrecords | {Ext.data.Store} store, {Ext.data.Model[]} records, {Object} eOpts |
| Ext.data.Store | beforesync | {Ext.data.Store} store, {Object} options, {Object} eOpts |
| Ext.data.Store | removerecords | {Ext.data.Store} store, {Ext.data.Model[]} records, {Number[]} indices, {Object} eOpts |
| Ext.data.Store | updaterecord | {Ext.data.Store} store, {Ext.data.Model[]} record, {Number} newIndex, {Number} oldIndex, {Object} eOpts |
| Ext.data.Store | refresh | {Ext.data.Store} store, {Ext.util.Collection} data, {Object} eOpts |
| Ext.dataview.element.Container | itemdoubletap | {Ext.dataview.element.Container} this, {Ext.Element} item, {Number} index, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.element.Container | itemswipe | {Ext.dataview.element.Container} this, {Ext.Element} item, {Number} index, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.element.Container | itemtap | {Ext.dataview.element.Container} this, {Ext.Element} item, {Number} index, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.element.Container | itemhold | {Ext.dataview.element.Container} this, {Ext.Element} item, {Number} index, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.element.Container | itemtouchend | {Ext.dataview.element.Container} this, {Ext.Element} item, {Number} index, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.element.Container | itemtouchmove | {Ext.dataview.element.Container} this, {Ext.Element} item, {Number} index, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.element.Container | itemtouchstart | {Ext.dataview.element.Container} this, {Ext.Element} item, {Number} index, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.component.Container | itemdoubletap | {Ext.dataview.component.Container} this, {Ext.dataview.DataItem} item, {Number} index, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.component.Container | itemswipe | {Ext.dataview.component.Container} this, {Ext.dataview.DataItem} item, {Number} index, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.component.Container | itemtap | {Ext.dataview.component.Container} this, {Ext.dataview.DataItem} item, {Number} index, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.component.Container | itemhold | {Ext.dataview.component.Container} this, {Ext.dataview.DataItem} item, {Number} index, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.component.Container | itemtouchend | {Ext.dataview.component.Container} this, {Ext.dataview.DataItem} item, {Number} index, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.component.Container | itemtouchmove | {Ext.dataview.component.Container} this, {Ext.dataview.DataItem} item, {Number} index, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.component.Container | itemtouchstart | {Ext.dataview.component.Container} this, {Ext.dataview.DataItem} item, {Number} index, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.DataView | itemdoubletap | {Ext.dataview.DataView} this, {Number} index, {Ext.Element/Ext.dataview.component.DataItem} target, {Ext.data.Model} record, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.DataView | itemswipe | {Ext.dataview.DataView} this, {Number} index, {Ext.Element/Ext.dataview.component.DataItem} target, {Ext.data.Model} record, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.DataView | itemtap | {Ext.dataview.DataView} this, {Number} index, {Ext.Element/Ext.dataview.component.DataItem} target, {Ext.data.Model} record, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.DataView | itemhold | {Ext.dataview.DataView} this, {Number} index, {Ext.Element/Ext.dataview.component.DataItem} target, {Ext.data.Model} record, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.DataView | itemtouchend | {Ext.dataview.DataView} this, {Number} index, {Ext.Element/Ext.dataview.component.DataItem} target, {Ext.data.Model} record, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.DataView | itemtouchstart | {Ext.dataview.DataView} this, {Number} index, {Ext.Element/Ext.dataview.component.DataItem} target, {Ext.data.Model} record, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.DataView | itemtouchmove | {Ext.dataview.DataView} this, {Number} index, {Ext.Element/Ext.dataview.component.DataItem} target, {Ext.data.Model} record, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.IndexBar | index | {Ext.dataview.IndexBar} this, {String} html, {Ext.dom.Element} target, {Object} eOpts |
| Ext.dataview.List | disclose | {Ext.dataview.List} this, {Ext.data.Model} record, {Element} target, {Number} index, {Ext.EventObject} e, {Object} eOpts |
| Ext.dataview.NestedList | beforeload | {Ext.dataview.NestedList} this, {Ext.data.Store} store, {Ext.data.Operation} operation, {Object} eOpts |
| Ext.dataview.NestedList | beforeselect | {Ext.dataview.NestedList} this, {Ext.dataview.List} list, {HTMLElement} node, {Array} selections, {Object} eOpts |
| Ext.dataview.NestedList | containertap | {Ext.dataview.NestedList} this, {Ext.dataview.List} list, {Ext.event.Event} e, {Object} eOpts |
| Ext.dataview.NestedList | itemdoubletap | {Ext.dataview.NestedList} this, {Ext.dataview.List} list, {Number} index, {Object} item, {Ext.event.Event}, e {Object} eOpts |
| Ext.dataview.NestedList | itemtap | {Ext.dataview.NestedList} this, {Ext.dataview.List} list, {Number} index, {Object} item, {Ext.event.Event}, e {Object} eOpts |
| Ext.dataview.NestedList | leafitemtap | {Ext.dataview.NestedList} this, {Ext.dataview.List} list, {Number} index, {Object} item, {Ext.event.Event}, e {Object} eOpts |
| Ext.dataview.NestedList | load | {Ext.dataview.NestedList} this, {Ext.data.Store} this, {Ext.util.Grouper[]} records, {Boolean} successful, {Ext.data.Operation} operation, {Object} eOpts |
| Ext.dataview.NestedList | selectionchange | {Ext.dataview.NestedList} this, {Ext.dataview.List} list, {Array} selections, {Object} eOpts |
| Ext.mixin.Selectable | beforeselectionchange | {Ext.mixin.Selectable} this, {Object} eOpts |
| Ext.picker.Slot | slotpick | {Ext.picker.Slot} this, {Mixed} value, {HTMLElement} node, {Object} eOpts |
| Ext.scroll.scroller.Abstract | refresh | {Ext.scroll.scroller.Abstract} this, {Object} eOpts |
| Ext.scroll.scroller.Abstract | scrollstart | {Ext.scroll.scroller.Abstract} this, {Object} eOpts |
| Ext.SegmentedButton | toggle | {Ext.SegmentedButton} this, {Ext.Button} button, {Boolean} isPressed, {Object} eOpts |
| Ext.slider.Slider | change | {Ext.slider.Slider} this, {Ext.slider.Thumb} thumb, {Number} newValue, {Number} oldValue, {Ext.event.Event} e, {Object} eOpts |
| Ext.slider.Slider | dragstart | {Ext.slider.Slider} this, {Ext.slider.Thumb} thumb, {Array} startValue, {Ext.event.Event} e, {Object} eOpts |
| Ext.slider.Slider | drag | {Ext.slider.Slider} this, {Ext.slider.Thumb} thumb, {Ext.event.Event} e, {Object} eOpts |
| Ext.slider.Slider | dragend | {Ext.slider.Slider} this, {Ext.slider.Thumb} thumb, {Array} endValue, {Ext.event.Event} e, {Object} eOpts |
| Ext.viewport.Default | maximize | {Ext.viewport.Viewport} this, {Object} eOpts |
| Ext.viewport.Default | ready | {Ext.viewport.Viewport} this, {Object} eOpts |
| Ext.viewport.Default | orientationchange | {Ext.viewport.Viewport} this, {String} newOrientation, {Number} width, {Number} height, {Object} eOpts |
| Ext.viewport.Default | resize | {Ext.viewport.Viewport} this, {Number} width, {Number} height, {Object} eOpts |
Release Notes: Release Notes: December 9, 2011
Version Number: 2.0.0.pr3
Release Notes: Release Notes: November 10, 2011
Version Number: 2.0.0.pr2
Release Notes: Release Notes: October 10, 2011
Version Number: 2.0.0.pr1