Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

95 lines (59 sloc) 2.925 kb
Slide Navigation
This is an attempt to make a Facebook-like navigation panel for Sencha Touch 2.
To see a current working demo, visit `this page`_ on a mobile device. To see the
navigation menu in the example, "flick" the toolbar (at the top) to the right; the
opposite action can be used to close the menu.
.. _`this page`:
This is a work in progress and still needs quite a bit of work, but it is usable.
Getting Started
Using the SlideNavigation view in your project is now easier than before. All you need
to do is place the 'ux' folder somewhere within your application, then add the following
to your app (at the top of 'app.js' is a good place)::
Ext.Loader.setPath('Ext.ux', './ux');
Adjust './ux' to wherever you actually placed the 'ux' folder.
Note: If you are using this with other components that also use the 'Ext.ux' namespace,
simply place the 'ux/slidenavigation' folder into the same location that you've placed
the other 'Ext.ux' components.
Then in whatever component you wish to use the view, add::
requires = [
or simply extend the 'Ext.ux.slidenavigation.View' class.
For a more complete example, see `app/view/Main.js`.
You will also need to make sure that you have included the appropriate css in order for
the component to display correctly. In your SASS style sheet, make sure to include
@include sencha-list
Building with Sencha Command
In order for the ``sencha build`` command to work properly, you need to let it know where
to find the component. This can be done easily by opening the following file::
Update the ``app.classpath`` variable to point to the ``ux`` directory, like so::
Building the Example Application
To build the example you need to make sure you have the `Sencha Cmd`_ installed
(>= v3.0.0.250) and Sencha Touch 2.1 extracted into a directory named `touch`.
Then, run the following command (from the directory that this README is located)::
sencha app build
This will produce the example app in the `build/SlideNavigationExample/production` directory.
.. _`Sencha Cmd`:
So far this has been tested on:
* iOS 6 (iPhone)
* iOS 5 (iPhone and iPad)
* Android 4.0.3
* Android 3.2 (tablet)
* Android 2.3.3
You can read the docs online here_.
.. _here:!/api/Ext.ux.slidenavigation.View
This code is released under the MIT license. See the LICENSE file for the actual license.
Jump to Line
Something went wrong with that request. Please try again.