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 }
]
});
Related
I am trying to return a filtered list in a mobx store but I cant figure out how the filter function properly works. I have a array that looks like this
#observable files = ([
{
id: '1',
fileType: 'Document',
files: [
{
name: 'test1',
size: '64kb',
date: '2018-01-19'
},
{
name: 'test2',
size: '94kb',
date: '2018-01-19'
}
]
},
{
id: '2',
fileType: 'List',
files: [
{
name: 'test3',
size: '64kb',
date: '2018-01-19'
},
{
name: 'test4',
size: '94kb',
date: '2018-01-19'
},
{
name: 'test5',
size: '94kb',
date: '2018-01-19'
}
]
} and so on...
I want to be able to filter on all names this.files[x].files[x].name
and then return the result. If I set the "What to put here" to this.files[0].files[0].name I am able to filter on the first entry of name. But how can i filter dynamically on all names?
#observable filter = ""
#computed get filteredFiles(){
var matchesFilter = new RegExp(this.filter, "i")
var filtered = this.files.filter(file => !this.filter || matchesFilter.test(What to put here?))
return filtered
}
Change matchesFilter.test(What to put here?) to
file.files.some(nestedfile=>matchesFilter.test(nestedFile.name))
if you want to also filter the inner list of files to only those that match then you need to .map the array
var filtered = this.files
.filter(file =>
!this.filter || file.files.some(nestedfile => matchesFilter.test(nestedFile.name)))
.map(file => ({ ...file,
files: file.files.filter(nesstedFile => matchesFilter.test(nestedFile.name))
}));
I use kendo ui grid with angular. I want the grid to be updated with every change in the array (of any property). Meaning, if my data is:
this.rowData = [{ id: "1", name: "A", age: "16" }, { id: "2", name: "B", age: "42" }];
and the age is changed from 16 to 17 I want the grid to be updated automatically.
I understand that I can use ObservableArray and when updating the observable the grid will be updated but I don't want the entire application to know the observable. I want to be able to update the original rowData and affect the grid. Any suggestions of how I do that?
I thought that adding a template to a row or a specific column with angular binding will help but it didn't, here is an example of it:
function Controller(GridConstants) {
this.rowData = [{ id: "1", name: "A", age: "16" }, { id: "2", name: "B", age: "42" }];
this.gridDataSource = new kendo.data.DataSource({
data: new kendo.data.ObservableArray(this.rowData),
schema: {
model: { id: "id" }
}
});
this.gridOptions = {
dataSource: this.gridDataSource,
selectable: "row",
columns: [
{
field: "name",
title: "Name"
},
{
field: "age",
title: "Age",
template: "<label>{{dataItem.age}}</label>"
}
],
selectable: "single"
};
}
You can try ng-bind instead:
template: "<label ng-bind='dataItem.age'></label>"
var rowDataObservable = new kendo.data.ObservableArray(this.rowData);
...
data: rowDataObservable,
...
//and you need work with rowDataObservable, this will work
rowDataObservable[0].age = 17;
Suppose if i have created a grid store like this
var store = Ext.create('Ext.data.ArrayStore', {
fields:['id','title', 'director', 'released', 'genre','tagline', 'price', 'available'],
data: [
[
1,
"Office Space",
"Mike Judge",
"1999-02-19",
1,
"Work Sucks",
"19.95",
1
],
[
3,
"Super Troopers",
"Jay Chandrasekhar",
"2002-02-15",
1,
"Altered State Police",
"14.95",
1
]
]
});
when i run it on browser i could not see anything because it has already been saved in the browser's memory , we need to display it to the the grid to see those data.
if i am editing the grid in the browser using editors plugin, so how can i see the changes made to the grid store? how to see it ?
You can add storeId to the store and then you can use the following global function:
Ext.StoreManager.lookup('storeId');
with this function you can always get the store from anywhere.
the gridpanel has the edit( editor, e, eOpts ) event which can be used after editing is complete.
Example:
var store = Ext.create('Ext.data.ArrayStore', {
storeId: 'gridStore',
(...)
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
(...),
listeners: {
edit: function(editing, e, eOpts) {
var record = e.record;
console.log('Changes on this record: ', e.record.getChanges());
console.log('Original value: ', (editing.ptype == 'cellediting' ? e.originalValue : e.originalValues));
console.log('New value: ', (editing.ptype == 'cellediting' ? e.value : e.newValues));
}
}
});
//for save on a toolbar
var button = Ext.create('Ext.button.Button', {
text: 'Save',
(...),
handler: function() {
var gridStore = Ext.StoreManager.lookup('gridStore');
console.log('all added, but not synchronized records: ', gridStore.getNewRecords());
console.log('all edited, but not synchronized records: ', gridStore.getUpdatedRecords());
console.log('all modified(added and edited), but not synchronized records:', gridStore.getModifiedRecords());
console.log('all removed, but not synchronized records:', gridStore.getRemovedRecords());
}
});
I'd say it depend.
First, to display you store in a grid, it should be something like this (simplified), following your code:
var grid = Ext.create('Ext.grid.Panel', {
title: 'Test',
store: store,
columns: [
{ text: 'title', dataIndex: 'title' },
{ text: 'director', dataIndex: 'director', flex: 1 }
],
height: 200,
width: 400
});
var MyWindow = Ext.create('widget.window',{width:400,height:200,items:[grid]});
MyWindow.show();
You assigned your store to a local variable "store". Normaly, if you use that store in a grid, and you make changes in that grid, it should reflect in the store.
When you make it editable with the editable grid plugin, changes are directly writen in the store, so this should work:
var currentStoreContent = store.data.items;
or, from the grid:
var currentStoreContent = grid.getStore().data.items
I'm trying to render a table view with four columns, 'name', 'birthday', 'gender', 'married', but
a) they columns aren't showing up at all
b) I'm not even sure if I am passing them correctly, because when I console.log table.options the columns property is rendered as "empty":
Object {columns: Array[0], emptyContent: "no entries", onItemClick: function, sortable: false, onSort: null}
I've tried this:
var table = new Backbone.UI.TableView({
model: people,
columns: [
{ title: "Name", content: 'name' },
{ title: "Gender", content: "gender" } },
{ title: "Birthday", content: "birthday" } },
{ title: "Married", content: "married" } }
]
});
And this:
var table = new Backbone.UI.TableView({
model: people,
options: {
columns: [
{ title: "Name", content: 'name' },
{ title: "Gender", content: "gender" },
{ title: "Birthday", content: "birthday" },
{ title: "Married", content: "married" }
]
}
});
The source code change is adding the options as mu is too short said. Change the initialize method of the Backbone.UI.TableView object to be the following within the source code:
initialize : function(options) { //add parameter
Backbone.UI.CollectionView.prototype.initialize.call(this, arguments);
$(this.el).addClass('table_view');
this._sortState = {reverse : true};
this.options = _.extend({}, this.options, options); //Add this line
}
I'm sure there might be a better place to put this but I'm just going through tutorials to learn some advanced backbone stuff considering the documentation does not match the current version I would shy away from using the library in production as of right now. Hopefully it is fixed in the future.
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');