This question already has answers here:
Getting a random value from a JavaScript array
(28 answers)
Closed 11 months ago.
This post was edited and submitted for review 10 months ago and failed to reopen the post:
Original close reason(s) were not resolved
I need to make a computed function in Vue 3 that randomly selects an id, and shows all of its contents.
This is the object:
export const data = [
{id: "1", albumname: "b", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'c', keysavail:[{key: "Am", route2: "/"}]}, { song : 'check2.2' }]},
{id: "2", albumname: "c", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'a' }, { song : 'check2.2' }]},
{id: "3", albumname: "a", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'b' }, { song : 'check2.2' }]},
{id: "4", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "5", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "6", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "7", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "8", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "9", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "10", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "11", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "12", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "13", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "14", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "15", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "16", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "17", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]}]
I suppose that I will need to use .sort, but I'm not sure where to start. I would really appreciate some help!
I am well aware that there are numerous answers to this in JavaScript. However, I would like to know how this is done in a Vue computed property!
To select a random element from your data you can do something like this:
function getRandomElement(data) {
const index = Math.floor(Math.random() * (data.length))
const randomElement = data[index];
return randomElement;
}
If you want, you can put all your logic into a computed property, but be aware that it will not provide a different value unless data (considered as a component property) changes.
<script>
export default {
data() {
return {
data: [...]
}
},
computed: {
randomElement() {
const index = Math.floor(Math.random() * (this.data.length))
const randomElement = this.data[index];
return randomElement;
}
}
}
</script>
<template>
<div>
<p>Album: {{randomElement.albumname}}</p>
<p>Artist: {{randomElement. artist}}</p>
...
<ul>
<li v-for="(song,index) in randomElement.songs" :key="index">
{{song.song}}
</li>
</ul>
</div>
</template>
To update the random element every time a button is pressed, you can do something like this:
<script>
export default {
data() {
return {
data: [
{id: "1", albumname: "b", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'c', keysavail:[{key: "Am", route2: "/"}]}, { song : 'check2.2' }]},
{id: "2", albumname: "c", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'a' }, { song : 'check2.2' }]},
{id: "3", albumname: "a", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'b' }, { song : 'check2.2' }]},
{id: "4", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "5", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "6", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "7", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "8", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "9", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "10", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "11", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "12", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "13", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "14", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "15", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "16", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "17", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]}
],
randomElement: null
}
},
methods: {
updateRandomElement() {
const index = Math.floor(Math.random() * (this.data.length))
this.randomElement = this.data[index];
}
}
}
</script>
<template>
<div>
<button #click="updateRandomElement">Update random element</button>
<div v-if="randomElement">
<p>Album: {{randomElement.albumname}}</p>
<p>Artist: {{randomElement. artist}}</p>
<ul>
<li v-for="(song,index) in randomElement.songs" :key="index">
{{song.song}}
</li>
</ul>
</div>
</div>
</template>
Is that works?
const data = [
{id: "1", albumname: "b", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'c', keysavail:[{key: "Am", route2: "/"}]}, { song : 'check2.2' }]},
{id: "2", albumname: "c", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'a' }, { song : 'check2.2' }]},
{id: "3", albumname: "a", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'b' }, { song : 'check2.2' }]},
{id: "4", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "5", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "6", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "7", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "8", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "9", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "10", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "11", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "12", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "13", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "14", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "15", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "16", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "17", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]}]
const getRandom = Math.floor(Math.random() * data.length);
const getObject = data.find( el => getRandom == el.id);
console.log(getObject);
You can use a library called toxic, not well known but it has a built in feature for using this.
<script src="https://toxic-js.techdeck.repl.co/toxic.js"></script>
now you can use:
var array = [1, 2, 3];
var random = array.random();
or
var random = [1, 2, 3].random();
Related
I am working on my website which will have my CV.
So I have an array of objects with hard and soft skills
skills: [
{ id: "1", type: "hard", title: "Technical skills" },
{ id: "2", type: "hard", title: "Computer skills" },
{ id: "3", type: "hard", title: "Microsoft Office skills" },
{ id: "4", type: "hard", title: "Analytical skills" },
{ id: "5", type: "hard", title: "Marketing skills" },
{ id: "6", type: "hard", title: "Presentation skills" },
{ id: "7", type: "hard", title: "Management skills" },
{ id: "8", type: "hard", title: "Project management skills" },
{ id: "9", type: "hard", title: "Writing skills" },
{ id: "10", type: "hard", title: "Language skills" },
{ id: "11", type: "hard", title: "Design skills" },
{ id: "12", type: "soft", title: "Leadership Skills" },
{ id: "13", type: "soft", title: "Teamwork" },
{ id: "14", type: "soft", title: "Communication Skills" },
{ id: "15", type: "soft", title: "Problem-Solving Skills" },
{ id: "16", type: "soft", title: "Work Ethic" },
{ id: "17", type: "soft", title: "Flexibility/Adaptability" },
{ id: "18", type: "soft", title: "Interpersonal Skills" },
],
And so I have two li's. So I need to display only hard skills in the first li and only soft skills in the second li.
Yes I know it'd be much easier if I just make 2 arrays and cycle through them for each one of li's, but I want to kinda challenge myself and filter the array. Obviously filter by the "type". So the return has to be an array, so I can cycle through it to display the data.
You can for example use two computed:
computed: {
hardSkills() {
return this.skills.filter(skill => skill.type === 'hard');
},
softSkills() {
return this.skills.filter(skill => skill.type === 'soft');
}
}
You could create the 2 arrays with a simple filter like this
const hardSkills = skills.filter(skill => skill.type === 'hard')
const softSkills = skills.filter(skill => skill.type === 'soft')
Then, go to your template and loop on those in your template.
I am trying to make some of checkboxes checked and disabled in jqxTreeGrid in below code:
$("#treegrid_portfolio").jqxTreeGrid(
{
source: dataAdapter,
pageable: true,
pagerMode: 'advanced',
pageSizeMode: 'root',
pageSize: 5,
pageSizeOptions: ['1', '2', '3', '5', '10'],
columnsResize: true,
sortable: true,
filterable: true,
theme: "custom",
filterMode: 'advanced',
altRows: false,
checkboxes: true,
columnsReorder: true,
hierarchicalCheckboxes: true,
width: getWidth("TreeGrid"),
/*width: "100%",*/
ready: function () {
$("#treegrid_portfolio").jqxTreeGrid('expandRow', '1');
$("#treegrid_portfolio").jqxTreeGrid('expandRow', '2');
}
,
columns: [
{
text: "ID", dataField: "formattedID", width: 120, pinned: true, cellclassname: "requestIdCls", resizable: false
}
,
{
text: '', datafield: 'alert', cellsrenderer: linkrendererAlert, width: 60, pinned: true, cellclassname: "alert_column", cellsAlign: 'center', filterable: false, resizable: false
}
,
{
text: "Portfolio Items Name", dataField: "PortfolioItem_Name", width: 200
}
,
{
text: "Agile Central Project Name", dataField: "AC_ProjectName", width: 200
}
]
}
);
Is it possible to make the same on grid ready function. I have done some research on the jqwidget. But didn't got any solution or clues. Please help me any one.
You need to make below changes also just put id attribute for each of your column data .Then put the id for selecting checkbox to set true.
follow this link i have get a fiddle for you Invoke the uncheckRow method.
var data = [{
"id": "1",
"name": "Corporate Headquarters",
"budget": "1230000",
"location": "Las Vegas",
"children": [{
"id": "2",
"name": "Finance Division",
"budget": "423000",
"location": "San Antonio",
"children": [{
"id": "3",
"name": "Accounting Department",
"budget": "113000",
"location": "San Antonio"
}, {
"id": "4",
"name": "Investment Department",
"budget": "310000",
"location": "San Antonio",
children: [{
"id": "5",
"name": "Banking Office",
"budget": "240000",
"location": "San Antonio"
}, {
"id": "6",
"name": "Bonds Office",
"budget": "70000",
"location": "San Antonio"
}, ]
}]
}, {
"id": "7",
"name": "Operations Division",
"budget": "600000",
"location": "Miami",
"children": [{
"id": "8",
"name": "Manufacturing Department",
"budget": "300000",
"location": "Miami"
}, {
"id": "9",
"name": "Public Relations Department",
"budget": "200000",
"location": "Miami"
}, {
"id": "10",
"name": "Sales Department",
"budget": "100000",
"location": "Miami"
}]
}, {
"id": "11",
"name": "Research Division",
"budget": "200000",
"location": "Boston"
}]
}];
var source = {
dataType: "json",
dataFields: [{
name: "name",
type: "string"
}, {
name: "budget",
type: "number"
}, {
name: "id",
type: "number"
}, {
name: "children",
type: "array"
}, {
name: "location",
type: "string"
}],
hierarchy: {
root: "children"
},
localData: data,
id: "id"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
}
});
// create jqxTreeGrid.
$("#treeGrid").jqxTreeGrid({
source: dataAdapter,
altRows: true,
width: 680,
theme:'energyblue',
checkboxes: true,
ready: function () {
$("#treeGrid").jqxTreeGrid('expandRow', '1');
$("#treeGrid").jqxTreeGrid('expandRow', '2');
},
columns: [{
text: "Name",
align: "center",
dataField: "name",
width: 300
}, {
text: "Budget",
cellsAlign: "center",
align: "center",
dataField: "budget",
cellsFormat: "c2",
width: 250
}, {
text: "Location",
dataField: "location",
cellsAlign: "center",
align: "center"
}]
});
$("#jqxbutton").jqxButton({
theme: 'energyblue',
height: 30
});
$("#treeGrid").jqxTreeGrid('checkRow',2);
The last line of code
$("#treeGrid").jqxTreeGrid('checkRow',2); is reason to check the checkbox true while loading.
Please makesure if any help required.Hope it may help.
To check rows on grid ready function use checkRow method, and lockRow will disable editing of the row and give the row gray style.
3 or 8 are Unique ID which identifies the row Id (data field in data source).
ready: function () {
$("#treeGrid").jqxTreeGrid('checkRow', '3');
$("#treeGrid").jqxTreeGrid('lockRow', '3');
$("#treeGrid").jqxTreeGrid('checkRow', '8');
$("#treeGrid").jqxTreeGrid('lockRow', '8');
},
To disable checkboxes you can use rowUncheck event to prevent uncheck by checking the row again.
$('#treeGrid').on('rowUncheck', function (event) {
$("#treeGrid").jqxTreeGrid('checkRow', '3');
$("#treeGrid").jqxTreeGrid('checkRow', '8');
});
$("#treeGrid").jqxTreeGrid({
// ......
});
Hi I am trying to use Select2 (multiselect) with Durandal (http://jsfiddle.net/anasnakawa/6XvqX/381/),
but the popup does not work below is part of my VM and HTML, here I am trying to bind a list of states to an input it should work as an auto complete but there seems to a issue showing the selection popup, can someone please help
define(['durandal/app', 'services/datacontext', 'plugins/router', 'services/bindinghandlers'],
function (app, datacontext, router) {
var withs = ko.observableArray(),
states = [
{ id: "AL", text: "Alabama" },
{ id: "AK", text: "Alaska" },
{ id: "AZ", text: "Arizona" },
{ id: "AR", text: "Arkansas" },
{ id: "CA", text: "California" },
{ id: "CO", text: "Colorado" },
{ id: "CT", text: "Connecticut" },
{ id: "DE", text: "Delaware" },
{ id: "FL", text: "Florida" },
{ id: "GA", text: "Georgia" },
{ id: "HI", text: "Hawaii" },
{ id: "ID", text: "Idaho" },
{ id: "IL", text: "Illinois" },
{ id: "IN", text: "Indiana" },
{ id: "IA", text: "Iowa" },
{ id: "KS", text: "Kansas" },
{ id: "KY", text: "Kentucky" },
{ id: "LA", text: "Louisiana" },
{ id: "ME", text: "Maine" },
{ id: "MD", text: "Maryland" },
{ id: "MA", text: "Massachusetts" },
{ id: "MI", text: "Michigan" },
{ id: "MN", text: "Minnesota" },
{ id: "MS", text: "Mississippi" },
{ id: "MO", text: "Missouri" },
{ id: "MT", text: "Montana" },
{ id: "NE", text: "Nebraska" },
{ id: "NV", text: "Nevada" },
{ id: "NH", text: "New Hampshire" },
{ id: "NJ", text: "New Jersey" },
{ id: "NM", text: "New Mexico" },
{ id: "NY", text: "New York" },
{ id: "NC", text: "North Carolina" },
{ id: "ND", text: "North Dakota" },
{ id: "OH", text: "Ohio" },
{ id: "OK", text: "Oklahoma" },
{ id: "OR", text: "Oregon" },
{ id: "PA", text: "Pennsylvania" },
{ id: "RI", text: "Rhode Island" },
{ id: "SC", text: "South Carolina" },
{ id: "SD", text: "South Dakota" },
{ id: "TN", text: "Tennessee" },
{ id: "TX", text: "Texas" },
{ id: "UT", text: "Utah" },
{ id: "VT", text: "Vermont" },
{ id: "VA", text: "Virginia" },
{ id: "WA", text: "Washington" },
{ id: "WV", text: "West Virginia" },
{ id: "WI", text: "Wisconsin" },
{ id: "WY", text: "Wyoming" }
];
var vm = {
withs: withs,
states: states,
};
return vm;
});
<select multiple="true" data-bind="options: states, optionsValue: 'id', optionsText: 'text', selectedOptions: withs, select2: {}" style="width: 300px"></select>
Register select2 in the Require.js configuration inside main.js:
requirejs.config({
paths: {
'select2': 'path/to/select2'
}
});
Define it in your view model:
define(['select2'], function (select2) {
// ...
});
Don't forget to declare it. You'll have to use the attached callback:
var vm = {
withs: withs,
states: states,
attached: function() {
$('select').select2();
}
};
I have a store where I want to predefine a few sets of sorters. For the first, I defined the sort order by band rank, lastName.
{
property: 'rank',
direction: 'ASC'
},
{
property: 'lastName',
direction: 'ASC'
}
For my second, I want the sorter to be by year, band, lastName:
{
property: 'year',
direction: 'ASC'
},
{
property: 'band',
direction: 'ASC'
},
{
property: 'lastName',
direction: 'ASC'
}
How can I swap out the first sorter for the second on my Store, then swap it back as needed?
Here's the rest of the code:
BandMemberStore.js:
Ext.define('Sencha.store.BandMemberStore', {
extend: 'Ext.data.Store',
requires: [],
config: {
model: 'Sencha.model.BandMember',
autoLoad: true,
defaultRootProperty: 'items',
proxy: {
type: 'ajax',
url: 'bands.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
sorters : [
{
property: 'rank',
direction: 'ASC'
},
{
property: 'lastName',
direction: 'ASC'
}
]
},
load: function () {
this.callParent(arguments);
}
});
The model:
Ext.define('Sencha.model.BandMember' , {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'rank', type: 'int'},
{name: 'band', type: 'string'},
{name: 'year', type: 'int'},
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{
name: 'fullName',
type: 'string',
convert: function (value, record) {
firstName = record.data.firstName;
lastName = record.data.lastName;
fullName = firstName + " " + lastName;
return fullName;
}
}
]
},
load: function () {
this.callParent(arguments);
}
});
app.js:
Ext.Loader.setConfig({enabled: true});
Ext.application({
name: "Sencha",
models: ['BandMember'],
stores: ['BandMemberStore'],
views: [],
controllers: [],
launch: function () {
console.log("Launching");
var aList = Ext.create("Ext.List", {
fullscreen: true,
store: 'BandMemberStore',
itemTpl: "{rank} / {year} / {band} / {lastName}, {firstName} - {fullName}"
});
Ext.Viewport.add(aList);
}
});
bands.json:
{"items": [
{ "rank": 3, "band": "Eagles" , "year": "1971", "firstName": "Glenn", "lastName": "Fry" },
{ "rank": 3, "band": "Eagles" , "year": "1971", "firstName": "Don", "lastName": "Henley" },
{ "rank": 3, "band": "Eagles" , "year": "1971", "firstName": "Joe", "lastName": "Walsh" },
{ "rank": 3, "band": "Eagles" , "year": "1971", "firstName": "Timothy", "lastName": "Schmit" },
{ "rank": 2, "band": "Beatles" , "year": "1960", "firstName": "John", "lastName": "Lennon" },
{ "rank": 2, "band": "Beatles" , "year": "1960", "firstName": "Paul", "lastName": "McCartney" },
{ "rank": 2, "band": "Beatles" , "year": "1960", "firstName": "George", "lastName": "Harrison" },
{ "rank": 2, "band": "Beatles" , "year": "1960", "firstName": "Ringo", "lastName": "Starr" },
{ "rank": 1, "band": "Rolling Stones" , "year": "1962", "firstName": "Mick", "lastName": "Jaggar" },
{ "rank": 1, "band": "Rolling Stones" , "year": "1962", "firstName": "Keith", "lastName": "Richards" },
{ "rank": 1, "band": "Rolling Stones" , "year": "1962", "firstName": "Charlie", "lastName": "Watts" },
{ "rank": 1, "band": "Rolling Stones" , "year": "1962", "firstName": "Ron", "lastName": "Wood" },
]}
var sorters1 = [ {
property: 'rank',
direction: 'ASC'
},
{
property: 'lastName',
direction: 'ASC'
}],
sorters2 = [ {
property: 'year',
direction: 'ASC'
},
{
property: 'band',
direction: 'ASC'
},
{
property: 'lastName',
direction: 'ASC'
}],
store = Ext.getStore('YourStoreIdHere');
//use first sorters
store.sort(sorters1);
//use second sorters
store.sort(sorters2);
//or you can just change sorters by
store.setSorters(sorters2);
I just created a small app with Sencha touch List and Json reader. There are more then 30 records but it is only showing 2 data records.
Here are the codes:
Ext.regModel('Story', {
idProperty: 'story_id',
fields: [
{name: "story_id", type: "int"},
{name: "id", type: "int"},
{name: "category_id", type: "int"},
{name: "story_content", type: "string"},
{name: "image", type: "string"},
{name: "story_posted_on", type: "date"},
{name: "story_modified_on", type: "date"},
{name: "active_status", type: "int"}
]
});
Ext.regStore('StoryStore', {
model: 'Story',
sorters: [{
property: 'story_posted_on',
direction: 'DESC'
}],
autoLoad: true,
proxy: {
type: 'ajax',
url: '../backend/index.php?r=stories/getStories',
},
reader: {
type: 'json',
}
});
App.views.FMJList = new Ext.List({
id: 'FMJList',
store: 'StoryStore',
itemTpl: '<div class="story">'+
'<div class="story_content">'+
'<tpl if="image">'+
'<div class="story_img" style="background-image: url(http://localhost/app/uploads/stories/{image});"></div>'+
'</tpl>'+
'<div class="story_content">{story_content}</div>'+
'<div class="story_display_name">{id}</div>'+
'</div>'+
'</div>'
});
Any thoughts on that? Thanks in advance.
Here is the Json response:
[
{
story_id: "193",
id: "4",
category_id: "74",
story_content: "testing",
image: "1328009566.png",
story_liked: "0",
story_empathy: "0",
story_deserve: "0",
story_posted_on: "2012-01-31 07:32:46",
story_modified_on: "2012-02-01 05:21:11",
active_status: "2"
},
{
story_id: "194",
id: "4",
category_id: "74",
story_content: "test",
image: "",
story_liked: "0",
story_empathy: "0",
story_deserve: "0",
story_posted_on: "2012-02-01 12:48:43",
story_modified_on: "2012-02-01 05:19:16",
active_status: "2"
},
{
story_id: "195",
id: "4",
category_id: "74",
story_content: "face",
image: "",
story_liked: "0",
story_empathy: "0",
story_deserve: "0",
story_posted_on: "2012-02-01 06:59:24",
story_modified_on: "2012-02-01 06:59:24",
active_status: "1"
},
{
story_id: "196",
id: "4",
category_id: "74",
story_content: "testing image",
image: "",
story_liked: "0",
story_empathy: "0",
story_deserve: "0",
story_posted_on: "2012-02-01 07:07:59",
story_modified_on: "2012-02-01 07:10:29",
active_status: "2"
},
{
story_id: "197",
id: "1",
category_id: "74",
story_content: "update image",
image: "",
story_liked: "0",
story_empathy: "0",
story_deserve: "0",
story_posted_on: "2012-02-01 07:11:49",
story_modified_on: "2012-02-01 07:11:49",
active_status: "1"
},
{
story_id: "198",
id: "1",
category_id: "74",
story_content: "testing",
image: "1328094802.jpg",
story_liked: "0",
story_empathy: "0",
story_deserve: "0",
story_posted_on: "2012-02-01 07:13:22",
story_modified_on: "2012-02-01 07:15:09",
active_status: "2"
},
{
story_id: "199",
id: "4",
category_id: "74",
story_content: "teste",
image: "1328178474.jpg",
story_liked: "0",
story_empathy: "0",
story_deserve: "0",
story_posted_on: "2012-02-02 10:27:54",
story_modified_on: "2012-02-02 10:27:54",
active_status: "1"
},
{
story_id: "200",
id: "4",
category_id: "74",
story_content: "test",
image: "",
story_liked: "0",
story_empathy: "0",
story_deserve: "0",
story_posted_on: "2012-02-02 10:32:18",
story_modified_on: "2012-02-02 10:32:18",
active_status: "1"
},
{
story_id: "201",
id: "4",
category_id: "74",
story_content: "test again",
image: "",
story_liked: "0",
story_empathy: "0",
story_deserve: "0",
story_posted_on: "2012-02-02 10:32:40",
story_modified_on: "2012-02-02 10:32:40",
active_status: "1"
}]
figured out the problem is actually the idProperty: 'story_id'. idProperty by default is set id and it's unique, the idProperty is not overriding the default value I think. Anyone know a way to fix?