Skip to content

Commit

Permalink
Added the ability to order both items and groups.
Browse files Browse the repository at this point in the history
  • Loading branch information
@wnielson
wnielson committed Mar 27, 2012
1 parent 3057b13 commit c9f96c3
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 10 deletions.
82 changes: 79 additions & 3 deletions app/view/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ Ext.define("SlideNavigationExample.view.Main", {
* modified the width.
*/
list: {
maxDrag: 250,
maxDrag: 400,
width: 200,
items: [{
xtype: 'toolbar',
docked: 'top',
Expand All @@ -58,6 +59,15 @@ Ext.define("SlideNavigationExample.view.Main", {

},

/**
* Example of how to re-order the groups.
*/
groups: {
'Group 1': 1,
'Group 2': 3,
'Group 3': 2
},

/**
* These are the default values to apply to the items within the
* container.
Expand All @@ -66,6 +76,7 @@ Ext.define("SlideNavigationExample.view.Main", {
style: 'background: #fff',
xtype: 'container'
},

items: [{
title: 'Item 1',
group: 'Group 1',
Expand Down Expand Up @@ -164,12 +175,77 @@ Ext.define("SlideNavigationExample.view.Main", {
},{
title: 'Item 8',
group: 'Group 3',
order: 0,
items: [{
xtype: 'toolbar',
title: 'Item 7',
title: 'Item 8',
docked: 'top'
},{
html: '<h1>Item 8</h1>'
xtype: 'container',
scrollable: 'vertical',
style: 'margin: auto !important; text-align: center;',
defaults: {
style: "float: left; margin: 10px; box-shadow: "+
"#999 0px 0px 6px 2px; border: 1px solid #888; "+
"overflow: hidden;",
height: 170,
width: 110
},
items: [{
html: '<img class="image-wrap" src="http://content6.flixster.com/movie/11/13/43/11134356_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content9.flixster.com/movie/11/16/11/11161107_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content8.flixster.com/movie/11/16/10/11161098_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content6.flixster.com/movie/11/15/75/11157588_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content9.flixster.com/movie/11/16/13/11161343_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content6.flixster.com/movie/11/16/12/11161272_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content7.flixster.com/movie/11/16/24/11162445_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content8.flixster.com/movie/11/15/92/11159214_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content8.flixster.com/movie/11/16/03/11160390_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content8.flixster.com/movie/11/16/05/11160598_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content8.flixster.com/movie/11/16/09/11160942_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content7.flixster.com/movie/11/15/25/11152577_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content8.flixster.com/movie/11/16/09/11160962_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content6.flixster.com/movie/11/16/02/11160244_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content9.flixster.com/movie/11/16/25/11162555_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content9.flixster.com/movie/11/15/83/11158339_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content6.flixster.com/movie/11/15/65/11156544_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content7.flixster.com/movie/11/15/66/11156693_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content6.flixster.com/movie/11/15/90/11159072_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content9.flixster.com/movie/11/16/26/11162639_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content6.flixster.com/movie/11/16/26/11162672_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content8.flixster.com/movie/11/15/92/11159258_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content6.flixster.com/movie/11/15/84/11158472_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content7.flixster.com/movie/11/15/65/11156581_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content9.flixster.com/movie/11/15/16/11151659_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content8.flixster.com/movie/11/15/81/11158182_pro.jpg" />'
},{
html: '<img class="image-wrap" src="http://content9.flixster.com/movie/11/15/90/11159075_pro.jpg" />'
}]
}]
}]
}
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>SlideNavigationExample</title>

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

<style type="text/css">
/**
Expand Down
48 changes: 42 additions & 6 deletions ux/slidenavigation/View.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,28 @@ Ext.define('Ext.ux.slidenavigation.View', {
/**
* @cfg {Array} items An array of items to put into the navigation list.
* The items can either be Ext components or special objects with a "handler"
* key, which should be a function to execute when selected.
* key, which should be a function to execute when selected. Additionally, you
* can define the order of the items by defining an 'order' parameter.
*/
items: [],

/**
* @cfg {Object} groups Mapping of group name to order. For example,
* say you have defined two groups; "Group 1" and "Group 2". By default
* these will be presented in the list in that order, since
* 'Group 1' > 'Group 2'. This option allows you to change the ordering,
* like so:
*
* groups: {
* 'Group 1': 2
* 'Group 2': 1
* }
*
* You should use integers, starting with 1, as the ordering value.
* By default groups are ordered by their name.
*/
groups: {},

/**
* @cfg {Object} defaults An object of default values to apply to any Ext
* components created from those listed in ``items``.
Expand Down Expand Up @@ -97,8 +115,11 @@ Ext.define('Ext.ux.slidenavigation.View', {
*/
me.store = Ext.create('Ext.data.Store', {
model: me.getModel(),
sorters: 'group',
groupField: 'group'
sorters: 'order',
grouper: {
property: 'group',
sortProperty: 'groupOrder'
}
});

/**
Expand Down Expand Up @@ -162,7 +183,8 @@ Ext.define('Ext.ux.slidenavigation.View', {
*/
addItems: function(items) {
var me = this,
items = Ext.isArray(items) ? items : [items];
items = Ext.isArray(items) ? items : [items],
groups = me.config.groups;

Ext.each(items, function(item, index) {
if (!Ext.isDefined(item.index)) {
Expand Down Expand Up @@ -273,14 +295,28 @@ Ext.define('Ext.ux.slidenavigation.View', {
* already, and returns the name of the model for use in the store.
*/
getModel: function() {
model = 'SlideNavigationPanelItem';
var model = 'SlideNavigationPanelItem',
groups = this.config.groups;

if (!Ext.ModelManager.get(model)) {
Ext.define(model, {
extend: 'Ext.data.Model',
config: {
idProperty: 'index',
fields: ['index', 'title', 'group']
fields: [
'index', 'title', 'group',
{
name: 'order',
defaultValue: 1
},{
name: 'groupOrder',
convert: function(value, record) {
// By default we group and order by group name.
group = record.get('group');
return groups[group] || group;
}
}
]
}
});
}
Expand Down

0 comments on commit c9f96c3

Please sign in to comment.