i'm working with couchdb as database.. i need show the data in pagination grid..
i can handle the next page proccess... but i am stack in how to handle previous page
after hard trying,... i can show previous json like this :
http://localhost/myapp/_view/getAll?limit=2&startkey=10&skip=1&descending=true
and the response :
{
total_rows: 21,
offset: 12,
rows: [{
id: "fd899e87f9f682a4df71d9e2a9010b26",
key: 9,
value: {
_id: "fd899e87f9f682a4df71d9e2a9010b26",
_rev: "1-ce4ed0e621ae53996f323a8927bcf470",
$type: "siswa",
Nama: "test9",
Agama: "Islam",
Hobi: ["Membaca","Menulis"]
}
} , {
id: "fd899e87f9f682a4df71d9e2a9010622",
key: 8,
value: {
_id: "fd899e87f9f682a4df71d9e2a9010622",
_rev: "1-45c71654623d385bd95f6970c72dce50",
$type: "siswa",
Nama: "test8",
Agama: "Islam",
Hobi: ["Membaca","Menulis"]
}
}]
}
the shown data is in reverse format.
as you can see, the response json start with key 9, and then 8..
so, the solution is reverse back in extjs / UI..
how to reverse data from store in extjs 4 ?
in ext 3 i do that like this : this.store.reader.reversed = true; and then reload the store..
You can sort you store like this:
Ext.create('Ext.data.Store', {
sorters: [
{
property : 'key',
direction: 'ASC'
}
// ...
}
or call store.sort('key', 'ASC');
Related
I have a rails backend with the following relationships: a USER has many MOVES. a Move has many boxes. A Box has many items.
I have page that lists all of the boxes inside of a specific move and this page ALSO lists all of the items for that specific move. I have a search bar on this page that enables you to search for specific items. I am able to filter my items display, however, i cannot figure out how to filter my boxes BY the searching for the name of the items WITHIN them.
I have tried iterating over the array of Box objects, and then iterating over the key within each box that points to its array of items. I am able to get the filtered ITEMS, but I dont know how to translate that back to reflect the BOXES with those items.
For instance, in the console I tried:
var filteredBoxes = boxes.map((box) => {
return box.items.filter((i) => {
return i.name.includes(this.state.searchTerm)
})
})
But it keeps returning items, not the boxes im trying to filter.
This is how the JSON looks when I fetch my boxes. I used a serializer to list the items as well:
{
id: 1,
name: "Bedding",
category: "Bedroom",
move_id: 1,
move: {
id: 1,
name: "Leaving for College",
date: "2019-08-12",
user_id: 1
},
items: [
{
id: 1,
name: "Comforter",
image: "https://www.shopmarriott.com/images/products/v2/lrg/Marriott-down-duvet-comforter-MAR-112_1_lrg.jpg",
box_id: 1
},
{
id: 2,
name: "Throw Pillows",
image: "https://media.kohlsimg.com/is/image/kohls/3427815?wid=500&hei=500&op_sharpen=1",
box_id: 1
}
]
},
{
id: 2,
name: "Random Blankets",
category: "Den",
move_id: 1,
move: {
id: 1,
name: "Leaving for College",
date: "2019-08-12",
user_id: 1
},
items: [
{
id: 3,
name: "Pillows",
image: "https://www.greatsleep.com/on/demandware.static/-/Sites-tbp-master-catalog/default/dw9ff5c1cf/product-images/pillows/nautica/down-alt-pillow-2-pack-na-91644/nautica-down-alternative-pillow-2-pack_91644-icon-2500x2500.jpg",
box_id: 2
},
{
id: 4,
name: "Stuffed Animals",
image: "https://s7d9.scene7.com/is/image/JCPenney/DP0817201617082870M?resmode=sharp2&op_sharpen=1&wid=550&hei=550",
box_id: 2
}
]
},
{
id: 3,
name: "Cleaning Supplies",
category: "Kitchen",
move_id: 1,
move: {
id: 1,
name: "Leaving for College",
date: "2019-08-12",
user_id: 1
},
items: [
{
id: 5,
name: "Pillows",
image: "https://www.greatsleep.com/on/demandware.static/-/Sites-tbp-master-catalog/default/dw9ff5c1cf/product-images/pillows/nautica/down-alt-pillow-2-pack-na-91644/nautica-down-alternative-pillow-2-pack_91644-icon-2500x2500.jpg",
box_id: 3
},
{
id: 6,
name: "Stuffed Animals",
image: "https://s7d9.scene7.com/is/image/JCPenney/DP0817201617082870M?resmode=sharp2&op_sharpen=1&wid=550&hei=550",
box_id: 3
}
]
}
you just have to iterate boxes, and so filter items. Based on these filtered items you may choose to return or not a box to the list.
const data = [{
id:1,
name:"Bedding",
category:"Bedroom",
move_id:1,
move:{
id:1,
name:"Leaving for College",
date:"2019-08-12",
user_id:1
},
items:[
{
id:1,
name:"Comforter",
image:"https://www.shopmarriott.com/images/products/v2/lrg/Marriott-down-duvet-comforter-MAR-112_1_lrg.jpg",
box_id:1
},
{
id:2,
name:"Throw Pillows",
image:"https://media.kohlsimg.com/is/image/kohls/3427815?wid=500&hei=500&op_sharpen=1",
box_id:1
}
]
},
{
id:2,
name:"Random Blankets",
category:"Den",
move_id:1,
move:{
id:1,
name:"Leaving for College",
date:"2019-08-12",
user_id:1
},
items:[
{
id:3,
name:"Pillows",
image:"https://www.greatsleep.com/on/demandware.static/-/Sites-tbp-master-catalog/default/dw9ff5c1cf/product-images/pillows/nautica/down-alt-pillow-2-pack-na-91644/nautica-down-alternative-pillow-2-pack_91644-icon-2500x2500.jpg",
box_id:2
},
{
id:4,
name:"Stuffed Animals",
image:"https://s7d9.scene7.com/is/image/JCPenney/DP0817201617082870M?resmode=sharp2&op_sharpen=1&wid=550&hei=550",
box_id:2
}
]
},
{
id:3,
name:"Cleaning Supplies",
category:"Kitchen",
move_id:1,
move:{
id:1,
name:"Leaving for College",
date:"2019-08-12",
user_id:1
},
items:[
{
id:5,
name:"Pillows",
image:"https://www.greatsleep.com/on/demandware.static/-/Sites-tbp-master-catalog/default/dw9ff5c1cf/product-images/pillows/nautica/down-alt-pillow-2-pack-na-91644/nautica-down-alternative-pillow-2-pack_91644-icon-2500x2500.jpg",
box_id:3
},
{
id:6,
name:"Stuffed Animals",
image:"https://s7d9.scene7.com/is/image/JCPenney/DP0817201617082870M?resmode=sharp2&op_sharpen=1&wid=550&hei=550",
box_id:3
}
]
}];
const searchTerm = "Animals"
// function to filter sub-items
const filterItems = items => items.filter((i) => searchTerm ? i.name.includes(searchTerm) : i.name);
const filteredBoxes = data.map(boxes => {
//filter sub-items
const items = filterItems(boxes.items);
//in case there is any item, return that boxes
if (items.length) {
return Object.assign({}, boxes, { items })
}
// in case there is nothing, return false
return false;
}).filter(Boolean); // filter the boxes list removing the false values
console.log('filteredBoxes', filteredBoxes);
I'm reading the Redux Reducers docs and don't get how normalizing the state would work. The current state in the example is this:
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: 'Consider using Redux',
completed: true,
},
{
text: 'Keep all state in a single tree',
completed: false
}
]
}
Can you provide an example of what the above would look like if we followed the below?
For
example, keeping todosById: { id -> todo } and todos: array inside
the state would be a better idea in a real app, but we’re keeping the
example simple.
This example is straight from Normalizr.
[{
id: 1,
title: 'Some Article',
author: {
id: 1,
name: 'Dan'
}
}, {
id: 2,
title: 'Other Article',
author: {
id: 1,
name: 'Dan'
}
}]
Can be normalized this way-
{
result: [1, 2],
entities: {
articles: {
1: {
id: 1,
title: 'Some Article',
author: 1
},
2: {
id: 2,
title: 'Other Article',
author: 1
}
},
users: {
1: {
id: 1,
name: 'Dan'
}
}
}
}
What's the advantage of normalization?
You get to extract the exact part of your state tree that you want.
For instance- You have an array of objects containing information about the articles. If you want to select a particular object from that array, you'll have to iterate through entire array. Worst case is that the desired object is not present in the array. To overcome this, we normalize the data.
To normalize the data, store the unique identifiers of each object in a separate array. Let's call that array as results.
result: [1, 2, 3 ..]
And transform the array of objects into an object with keys as the id(See the second snippet). Call that object as entities.
Ultimately, to access the object with id 1, simply do this- entities.articles["1"].
You can use normalizr for this.
Normalizr takes JSON and a schema and replaces nested entities with their IDs, gathering all entities in dictionaries.
For example,
[{
id: 1,
title: 'Some Article',
author: {
id: 1,
name: 'Dan'
}
}, {
id: 2,
title: 'Other Article',
author: {
id: 1,
name: 'Dan'
}
}]
can be normalized to
{
result: [1, 2],
entities: {
articles: {
1: {
id: 1,
title: 'Some Article',
author: 1
},
2: {
id: 2,
title: 'Other Article',
author: 1
}
},
users: {
1: {
id: 1,
name: 'Dan'
}
}
}
}
i have 2 select boxes,which is getting the data using ng-options and hardcoded.
the second select box should show the data based on the selected data in first selectbox. this is the plunker.
https://plnkr.co/edit/r1S1e61H3RfH3uYGYTBP?p=preview
can anyone please help me.
$scope.data = [{
cities: [{
id: 1,
title: 'Mysore'
}, {
id: 2,
title: 'Bangalore'
}, {
id: 3,
title: 'Delhi'
}, {
id: 4,
title: 'Mumbai'
}],
maps: [{
id: 1,
title: 'Zoo',
city_id: 1
}, {
id: 2,
title: 'Palace',
city_id: 1
}, {
id: 3,
title: 'Beach',
city_id: 4
}]
}];
You can pass the selected city's id from 1st drop down as a filter to 2nd drop down like below
<select name="mapSelect" required="true" ng-options="map as map.title for map in data[0].maps | filter:{'city_id':citySelect.selectedOption.id}" ng-model="mapSelect.selectedOption"></select>
Let's say I have the data source as following:
var data = [
{
id: 1,
name: 'name1',
parentId: null,
children: [
{
id: 2,
name: 'name2',
parentId: 1
}
]
},
{
id: 3,
name: 'name3',
parentId: null,
children: [
{
id: 4,
name: 'name4',
parentId: 3
}
]
}
]
And the code snippets like following:
var basic_grid_store = Ext.create('Ext.data.TreeStore', {
storeId: 'basic_grid_store',
model: 'TestModel',
root: {
children: []
}
});
console.log(data);
// the data structure is correct at this time
basic_grid_store.setRootNode({children: data);
console.log(data);
// the data structure is incorrect at this time, in which the `children` attribute for each item was gone.
I could not find any documentation for this, can someone tell why TreeStore modified my data source since it should not happen?
Yeah, it does change the original array. I cannot answer why this behavior, you would need to ask Ext architects/developers, but what you can try is:
basic_grid_store.setRootNode({children:Ext.clone(data)});
I have been trying to figure out why I am not able to update the Sencha Touch picker data field (see the code at the end of post) using setData method. I created an array called slotsdata where I defined my data. The data look exactly like this:
{text: '50 KB/s', value: 50},
{text: '100 KB/s', value: 100},
{text: '200 KB/s', value: 200},
{text: '300 KB/s', value: 300}
When I tried to set the data using setData()
picker.setData(slotsdata);
No error are displayed but picker does not display any data.
When I tried to update the data like this:
slots: [
{
name : 'picker_slot1',
title: 'slot1',
data: [slotsdata]
}
]
It does not work. No errors in the console. The picker is empty.
The only way I can update is using this syntax:
slots: [
{
name : 'picker_slot1',
title: 'slot1',
data: slotsdata
}
]
I would like to be able to update my picker data using method #1. Can anyone help me with this issue. Any help will be appreciated.
This is the code:
myFunction: function(){
var data = this.getData();
var slotsdata = [];
var pickerData = data.dosage.split(',');
for( var i = 0; i < pickerData.length; i++ ){
slotsdata.push({text: pickerData[i], value: pickerData[i]})
}
var picker = Ext.create('Ext.Picker', {
slots: [
{
name : 'picker_slot1',
title: 'slot1',
data: slotsdata
}
]
});
//this does not work
//picker.setData(slotsdata);
}
You can use setSlots() method of picker class like:
picker.setSlots({
name: 'limit_speed',
title: 'Speed',
data: [
{ text: '50 KB/s', value: 50 },
{ text: '100 KB/s', value: 100 }
]
});