update countries example
This commit is contained in:
parent
2e5205fabe
commit
fa28e8abe6
1 changed files with 51 additions and 1 deletions
|
@ -418,17 +418,33 @@ Ox.load(['UI', 'Geo'], function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
...
|
This renders the list.
|
||||||
*/
|
*/
|
||||||
function renderList() {
|
function renderList() {
|
||||||
return ui.view == 'grid'
|
return ui.view == 'grid'
|
||||||
|
/*
|
||||||
|
For grid view, we use Ox.IconList.
|
||||||
|
*/
|
||||||
? Ox.IconList({
|
? Ox.IconList({
|
||||||
|
/*
|
||||||
|
The border radius of the icons, in px.
|
||||||
|
*/
|
||||||
borderRadius: 16,
|
borderRadius: 16,
|
||||||
|
/*
|
||||||
|
Signals that all icons have the same ratio, in this case `1`.
|
||||||
|
*/
|
||||||
fixedRatio: 1,
|
fixedRatio: 1,
|
||||||
|
/*
|
||||||
|
A function that takes item data, sort option and icon size, and
|
||||||
|
returns an object with the icon's image URL, width, height,
|
||||||
|
title and info. Info is the "subtitle", and we'll display the
|
||||||
|
formatted value of the current sort key.
|
||||||
|
*/
|
||||||
item: function(data, sort, size) {
|
item: function(data, sort, size) {
|
||||||
var key = sort[0].key == 'name' ? 'code' : sort[0].key,
|
var key = sort[0].key == 'name' ? 'code' : sort[0].key,
|
||||||
column = Ox.getObjectById(columns, key),
|
column = Ox.getObjectById(columns, key),
|
||||||
info = (column.format || Ox.identity)(data[key]);
|
info = (column.format || Ox.identity)(data[key]);
|
||||||
|
Ox.print('DDD', data)
|
||||||
return {
|
return {
|
||||||
height: size,
|
height: size,
|
||||||
id: data.id,
|
id: data.id,
|
||||||
|
@ -439,25 +455,55 @@ Ox.load(['UI', 'Geo'], function() {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
items: items,
|
items: items,
|
||||||
|
// FIXME
|
||||||
keys: ['flag', 'name'],
|
keys: ['flag', 'name'],
|
||||||
|
/*
|
||||||
|
Maximum number of items that can be selected.
|
||||||
|
*/
|
||||||
max: 1,
|
max: 1,
|
||||||
|
/*
|
||||||
|
Since the total number of items isn't very large, we don't need
|
||||||
|
pagination, so we set `pageLength` to a larger number.
|
||||||
|
*/
|
||||||
pageLength: 1000,
|
pageLength: 1000,
|
||||||
query: query,
|
query: query,
|
||||||
|
/*
|
||||||
|
This enables "select-as-you-type". When the list has focus, the
|
||||||
|
user can just type a few letters, and if they match the
|
||||||
|
beginning of an item's `name` property, that item will be
|
||||||
|
selected.
|
||||||
|
*/
|
||||||
selectAsYouType: 'name',
|
selectAsYouType: 'name',
|
||||||
selected: ui.selected,
|
selected: ui.selected,
|
||||||
|
/*
|
||||||
|
The icon size, in px.
|
||||||
|
*/
|
||||||
size: 128,
|
size: 128,
|
||||||
sort: Ox.clone(ui.sort, true),
|
sort: Ox.clone(ui.sort, true),
|
||||||
|
/*
|
||||||
|
The unique key. Whenever the list fires a `select` event, it
|
||||||
|
will reference this as the item's unique id.
|
||||||
|
*/
|
||||||
unique: 'code'
|
unique: 'code'
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
init: init,
|
init: init,
|
||||||
select: select
|
select: select
|
||||||
})
|
})
|
||||||
|
/*
|
||||||
|
For list view, we use Ox.TableList.
|
||||||
|
*/
|
||||||
: Ox.TableList({
|
: Ox.TableList({
|
||||||
|
/*
|
||||||
|
The list columns, as defined earlier.
|
||||||
|
*/
|
||||||
columns: columns,
|
columns: columns,
|
||||||
columnsMovable: true,
|
columnsMovable: true,
|
||||||
columnsRemovable: true,
|
columnsRemovable: true,
|
||||||
columnsVisible: true,
|
columnsVisible: true,
|
||||||
|
/*
|
||||||
|
The other options are similar as above.
|
||||||
|
*/
|
||||||
items: items,
|
items: items,
|
||||||
max: 1,
|
max: 1,
|
||||||
pageLength: 1000,
|
pageLength: 1000,
|
||||||
|
@ -471,6 +517,10 @@ Ox.load(['UI', 'Geo'], function() {
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
init: init,
|
init: init,
|
||||||
select: select,
|
select: select,
|
||||||
|
/*
|
||||||
|
As the TableList has its own UI for sorting, we also bind to its
|
||||||
|
`sort` event.
|
||||||
|
*/
|
||||||
sort: sort
|
sort: sort
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue