Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 95 lines (59 sloc) 2.925 kb
79015a5 @wnielson Updated component to use 'Ext.ux' namespace convention.
authored
1 Slide Navigation
2 ================
6180669 @wnielson Merged in gh-pages.
authored
3
4 This is an attempt to make a Facebook-like navigation panel for Sencha Touch 2.
10bd142 @wnielson Update README.rst
authored
5 To see a current working demo, visit `this page`_ on a mobile device. To see the
6 navigation menu in the example, "flick" the toolbar (at the top) to the right; the
7 opposite action can be used to close the menu.
8
6e5800b @wnielson Update README.rst
authored
9 .. _`this page`: http://wnielson.github.com/sencha-SlideNavigation/build/SlideNavigationExample/production/
6180669 @wnielson Merged in gh-pages.
authored
10
1b9b864 @wnielson Update README
authored
11 This is a work in progress and still needs quite a bit of work, but it is usable.
79015a5 @wnielson Updated component to use 'Ext.ux' namespace convention.
authored
12
13 Getting Started
14 ---------------
15
00cb041 @wnielson Update README.rst
authored
16 Using the SlideNavigation view in your project is now easier than before. All you need
17 to do is place the 'ux' folder somewhere within your application, then add the following
18 to your app (at the top of 'app.js' is a good place)::
79015a5 @wnielson Updated component to use 'Ext.ux' namespace convention.
authored
19
20 Ext.Loader.setConfig({enabled:true});
21 Ext.Loader.setPath('Ext.ux', './ux');
22
00cb041 @wnielson Update README.rst
authored
23 Adjust './ux' to wherever you actually placed the 'ux' folder.
24
4d97496 @wnielson Update README.rst
authored
25 Note: If you are using this with other components that also use the 'Ext.ux' namespace,
26 simply place the 'ux/slidenavigation' folder into the same location that you've placed
27 the other 'Ext.ux' components.
00cb041 @wnielson Update README.rst
authored
28
58a3a10 @wnielson Update README.rst
authored
29 Then in whatever component you wish to use the view, add::
79015a5 @wnielson Updated component to use 'Ext.ux' namespace convention.
authored
30
31 requires = [
32 'Ext.ux.slidenavigation.View',
33 ]
34
00cb041 @wnielson Update README.rst
authored
35 or simply extend the 'Ext.ux.slidenavigation.View' class.
79015a5 @wnielson Updated component to use 'Ext.ux' namespace convention.
authored
36
58a3a10 @wnielson Update README.rst
authored
37 For a more complete example, see `app/view/Main.js`.
79015a5 @wnielson Updated component to use 'Ext.ux' namespace convention.
authored
38
8cb29f4 @wnielson Fixed #31: Added note about css includes in README.
authored
39 You will also need to make sure that you have included the appropriate css in order for
40 the component to display correctly. In your SASS style sheet, make sure to include
41 `sencha-list`:
42
43 @include sencha-list
44
e00c77f @wnielson Updated component to work with Sencha Touch 2.1.
authored
45 Building with Sencha Command
46 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
47
48 In order for the ``sencha build`` command to work properly, you need to let it know where
49 to find the component. This can be done easily by opening the following file::
50
51 .sencha/app/sencha.cfg
52
53 Update the ``app.classpath`` variable to point to the ``ux`` directory, like so::
54
55 app.classpath=${app.dir}/app.js,${app.dir}/app,path/to/ux
56
57
79015a5 @wnielson Updated component to use 'Ext.ux' namespace convention.
authored
58 Building the Example Application
59 --------------------------------
60
e2262d2 @wnielson Fixed #18 - Updated build instructions for Sencha Touch 2.1 and Sench…
authored
61 To build the example you need to make sure you have the `Sencha Cmd`_ installed
62 (>= v3.0.0.250) and Sencha Touch 2.1 extracted into a directory named `touch`.
63 Then, run the following command (from the directory that this README is located)::
79015a5 @wnielson Updated component to use 'Ext.ux' namespace convention.
authored
64
e2262d2 @wnielson Fixed #18 - Updated build instructions for Sencha Touch 2.1 and Sench…
authored
65 sencha app build
79015a5 @wnielson Updated component to use 'Ext.ux' namespace convention.
authored
66
e2262d2 @wnielson Fixed #18 - Updated build instructions for Sencha Touch 2.1 and Sench…
authored
67 This will produce the example app in the `build/SlideNavigationExample/production` directory.
74d7ab2 @wnielson Added more Android support.
authored
68
a85ccd9 @wnielson Added missing URL in README
authored
69 .. _`Sencha Cmd`: http://www.sencha.com/products/sencha-cmd/download
74d7ab2 @wnielson Added more Android support.
authored
70
71 Notes
72 -----
73
74 So far this has been tested on:
75
d826f29 @wnielson Update README
authored
76 * iOS 6 (iPhone)
58a3a10 @wnielson Update README.rst
authored
77 * iOS 5 (iPhone and iPad)
78 * Android 4.0.3
79 * Android 3.2 (tablet)
80 * Android 2.3.3
10bd142 @wnielson Update README.rst
authored
81
82 Documentation
83 -------------
84
85 You can read the docs online here_.
86
cfb039d @wnielson Update README.rst
authored
87 .. _here: http://wnielson.github.com/sencha-SlideNavigation/docs/#!/api/Ext.ux.slidenavigation.View
10bd142 @wnielson Update README.rst
authored
88
e6695f7 @wnielson Update README.rst
authored
89 License
90 -------
91
6ef9001 @wnielson Fixed #7. Stop auto-focus of elements beneath slideButton.
authored
92 This code is released under the MIT license. See the LICENSE file for the actual license.
93
e2262d2 @wnielson Fixed #18 - Updated build instructions for Sencha Touch 2.1 and Sench…
authored
94
Something went wrong with that request. Please try again.