Skip to content

Commit

Permalink
Updated component to work with Sencha Touch 2.1.
Browse files Browse the repository at this point in the history 
This also includes a number of enhancements such as:

  * event support - see app/controller for example
  * automatic CSS styling be default

Note: This will no longer work as-is with older versions of
Sencha Touch.
  • Loading branch information
@wnielson
wnielson committed Dec 5, 2012
1 parent e6695f7 commit e00c77f
Show file tree
Hide file tree
Showing 25 changed files with 388 additions and 6,882 deletions.
14 changes: 14 additions & 0 deletions README.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,20 @@ or simply extend the 'Ext.ux.slidenavigation.View' class.

For a more complete example, see `app/view/Main.js`.

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::

.sencha/app/sencha.cfg

Update the ``app.classpath`` variable to point to the ``ux`` directory, like so::

app.classpath=${app.dir}/app.js,${app.dir}/app,path/to/ux



Building the Example Application
--------------------------------

Expand Down
30 changes: 21 additions & 9 deletions app.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
//<debug>
Ext.Loader.setPath({
'Ext': 'sdk/src',
'Ext': 'touch/src',
'Ext.ux': './ux'
});
//</debug>
Expand All @@ -9,22 +9,34 @@ Ext.application({
name: 'SlideNavigationExample',

requires: [
'Ext.Msg'
'Ext.MessageBox'
],

views: [
'Main'
],

controllers: [
'Main'
],

icon: {
57: 'resources/icons/Icon.png',
72: 'resources/icons/Icon~ipad.png',
114: 'resources/icons/[email protected]',
144: 'resources/icons/[email protected]'
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/[email protected]',
'144': 'resources/icons/[email protected]'
},

isIconPrecomposed: true,

startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},

phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',

launch: function() {
// Destroy the #appLoadingIndicator element
Expand Down
47 changes: 37 additions & 10 deletions app.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,28 @@
*/
"name": "SlideNavigationExample",

/**
* The file path to this application's front HTML document, relative to this app.json file
*/
"indexHtmlPath": "index.html",

/**
* The absolute URL to this application in development environment, i.e: the URL to run this application
* on your web browser during development, e.g: "http://localhost/myapp/index.html".
*
* This value is needed when build to resolve your application's dependencies if it requires server-side resources
* that are not accessible via file system protocol.
*/
"url": null,

/**
* List of all JavaScript assets in the right execution order.
* Each item is an object with the following format:
* {
* "path": "path/to/script.js" // Relative path to this app.json file
* "path": "path/to/script.js" // Path to file, if local file it must be relative to this app.json file
* "remote": true // (Optional)
* // - Defaults to undefined (falsey) to signal a local file which will be copied
* // - Specify true if this file is a remote file which will not to be copied
* "update": "delta" // (Optional)
* // - If not specified, this file will only be loaded once, and
* // cached inside localStorage until this value is changed.
Expand All @@ -19,10 +36,11 @@
*/
"js": [
{
"path": "sdk/sencha-touch.js"
"path": "touch/sencha-touch.js"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
}
],
Expand All @@ -31,7 +49,10 @@
* List of all CSS assets in the right inclusion order.
* Each item is an object with the following format:
* {
* "path": "path/to/item.css" // Relative path to this app.json file
* "path": "path/to/item.css" // Path to file, if local file it must be relative to this app.json file
* "remote": true // (Optional)
* // - Defaults to undefined (falsey) to signal a local file which will be copied
* // - Specify true if this file is a remote file which will not to be copied
* "update": "delta" // (Optional)
* // - If not specified, this file will only be loaded once, and
* // cached inside localStorage until this value is changed to either one below
Expand All @@ -55,8 +76,7 @@
* List of items in the CACHE MANIFEST section
*/
"cache": [
"index.html",
"resources/images/guide.jpg"
"index.html"
],
/**
* List of items in the NETWORK section
Expand All @@ -73,15 +93,22 @@
/**
* Extra resources to be copied along when build
*/
"extras": [
"resources": [
"resources/images",
"resources/icons",
"resources/loading"
"resources/startup"
],

/**
* File / directory name matchers to ignore when copying to the builds, must be valid regular expressions
*/
"ignore": [
"\.svn$"
],

/**
* Directory path to store all previous production builds. Note that the content generated inside this directory
* must be kept intact for proper generation of delta between updates
* must be kept intact for proper generation of deltas between updates
*/
"archivePath": "archive",

Expand All @@ -102,12 +129,12 @@
"product": "touch",
"minVersion": 3,
"debug": false,
"logger": "no"
"logger": false
},

/**
* Uniquely generated id for this application, used as prefix for localStorage keys.
* Normally you should never change this value.
*/
"id": "152440a0-7772-11e1-aa1c-bf802d67caea"
"id": "cfdd6666-d48b-4834-9e2d-6ae8ef18cd19"
}
49 changes: 49 additions & 0 deletions app/controller/Main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
Ext.define("SlideNavigationExample.controller.Main", {
extend: 'Ext.app.Controller',

config: {
refs: {
slideNav: 'slidenavigationview'
},

control: {
slideNav: {
open: function(nav, position, duration) {
console.log('Container open (position='+position+',duration='+duration+')');
},

close: function(nav, position, duration) {
console.log('Container close (position='+position+',duration='+duration+')');
},

select: function(nav, item, index) {
console.log('Selected item (index='+index+')');
},

opened: function(nav) {
console.log('Container opened');
},

closed: function(nav) {
console.log('Container closed');
},

slideend: function(nav) {
console.log('Container slideend');
},

slidestart: function(nav) {
console.log('Container slidestart');
},

dragstart: function(nav) {
console.log('Container dragstart');
},

dragend: function(nav) {
console.log('Container dragend');
}
}
}
}
});
2 changes: 1 addition & 1 deletion app/view/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ Ext.define("SlideNavigationExample.view.Main", {
centered: false,
width: 200,
left: 0
},
}

/**
* Here's an example of how to add a different type of
Expand Down
74 changes: 20 additions & 54 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,88 +3,54 @@
<head>
<meta charset="UTF-8">
<title>SlideNavigationExample</title>

<!-- Android debug -->
<!--<script src="http://10.0.2.2:8080/target/target-script-min.js#anonymous"></script>-->

<style type="text/css">
/**
* Example CSS for adding a drop shadow to the main container.
*/
.x-slidenavigation-container.x-dragging,
.x-slidenavigation-container.open {
/**
* The performance of this now seem acceptable. If you
* are experiencing a laggy sliding animation you can either
* a) Turn off the slide animation (set duration to 0), or
* b) Use the border-image method below
*/
box-shadow: 0 0 4px 1px #999;
-webkit-box-shadow: 0 0 4px 1px #999;
}


/**
/**
* Example of an initial loading indicator.
* It is recommended to keep this as minimal as possible to provide instant feedback
* while other resources are still being loaded for the first time
*/
html, body {
height: 100%;
background-color: #1985D0
}

#appLoadingIndicator {
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -50px;
width: 100px;
height: 20px;
}

#appLoadingIndicator > * {
background-color: #FFFFFF;
float: left;
height: 20px;
margin-left: 11px;
width: 20px;
margin-top: -15px;
text-align: center;
width: 100%;
height: 30px;
-webkit-animation-name: appLoadingIndicator;
-webkit-border-radius: 13px;
-webkit-animation-duration: 0.8s;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
opacity: 0.3
}

#appLoadingIndicator > :nth-child(1) {
-webkit-animation-delay: 0.18s;
}

#appLoadingIndicator > :nth-child(2) {
-webkit-animation-delay: 0.42s;
}

#appLoadingIndicator > :nth-child(3) {
-webkit-animation-delay: 0.54s;
#appLoadingIndicator > * {
background-color: #FFFFFF;
display: inline-block;
height: 30px;
-webkit-border-radius: 15px;
margin: 0 5px;
width: 30px;
opacity: 0.8;
}

@-webkit-keyframes appLoadingIndicator{
0% {
opacity: 0.3
opacity: 0.8
}

50% {
opacity: 1;
background-color:#1985D0
opacity: 0
}

100% {
opacity:0.3
opacity: 0.8
}
}
</style>
<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
</head>
<body>
<div id="appLoadingIndicator">
Expand Down
Loading

0 comments on commit e00c77f

Please sign in to comment.