We Keep Coding

What is the proper way to filtering ViewModel stores and implement to ExtJS Panel?

Through ViewModel stores I'm getting this JSON data;
{
"success": true,
"msg": "OK",
"count": 2,
"data": [
{
"firstname": "BLA",
"lastname": "BLALA",
"isactive": true,
...
},
{
"firstname": "BLAAA",
"lastname": "BLALAAA",
"isactive": false,
...
}
I have two grids on one panel and one of them will load data only with isactive: true field, other grid will load only with false. So where and how I need to filtering store to load specified data to grids?
Here is VM;
Ext.define('MyApp.view.ListingVM', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.listing',
requires: [...],
reference: 'loyaltyvm',
stores: {
// Should I define the filter on here?
bonusTrans: {
storeId: 'bonusTrans',
// reference: 'bonusTrans',
model: 'MyApp.model.BonusTrans',
autoLoad: true,
session: true,
pageSize: MyApp.Globals.LIST_PAGE_SIZE
}
}
});
This is panel's grid sample where defined both of Grids. I've tried several way to get store and filtering but couldn't be succes;
getColumns: function () {
var me = this;
var panelItems = [
{
xtype: 'container',
layout: {type: 'hbox', align: 'stretch', pack: 'start'},
items: [
xtype: 'bonustrans',
flex: 1,
title: 'Current Bonus',
getListCols: function () {
var me = this;
debugger;
// var activeStore = Ext.getStore('bonusTrans');
// var activeStore = me.viewModel.get('bonusTrans');
// var view = me.getView();
// var vm = view.getViewModel();
// var vm.getStore('bonusTrans')
// var activeStore = me.getViewModel().getStore('bonusTrans');
var activeStore = me.getViewModel('loyaltyvm').getStores('bonusTrans');
activeStore.filter('isactive', 'true');
var listCols = [
{
xtype: 'firstnamecol',
flex: 1
},
{
xtype: 'checkoutcol'
},
{
xtype: 'bonustotalcol'
}
];
return listCols;
}
//... other Grid is just defined below of this line and it should loads data only with 'isactive' field is false.

Use chained stores, fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
new Ext.container.Viewport({
layout: {
type: 'hbox',
align: 'stretch'
},
viewModel: {
stores: {
everything: {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json'
}
},
active: {
type: 'chained',
source: '{everything}',
filters: [{
property: 'active',
value: true
}]
},
inactive: {
type: 'chained',
source: '{everything}',
filters: [{
property: 'active',
value: false
}]
}
}
},
items: [{
flex: 1,
xtype: 'gridpanel',
title: 'Active',
bind: '{active}',
columns: [{
dataIndex: 'name'
}]
}, {
flex: 1,
xtype: 'gridpanel',
title: 'Inactive',
bind: '{inactive}',
columns: [{
dataIndex: 'name'
}]
}]
});
}
});

The way of chained stores is surely the best,
here you can see a working fiddle on classic
and here is the code:
Ext.application({
name: 'Fiddle',
launch: function () {
var storeAll = Ext.create('Ext.data.Store', {
storeId: 'storeAll',
fields: [{
name: 'firstname'
}, {
name: 'lastname'
}, {
name: 'active'
}],
data: [{
firstname: 'test1',
lastname: 'test1',
active: true
}, {
firstname: 'test2',
lastname: 'test2',
active: true
}, {
firstname: 'test3',
lastname: 'test3',
active: false
}]
}),
chainedStoreActive = Ext.create('Ext.data.ChainedStore', {
source: storeAll,
filters: [{
property: 'active',
value: true
}]
}),
chainedStoreNoActive = Ext.create('Ext.data.ChainedStore', {
source: storeAll,
filters: [{
property: 'active',
value: false
}]
});
Ext.create({
xtype: 'viewport',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'gridpanel',
title: 'grid ALL',
store: storeAll,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}, {
xtype: 'gridpanel',
title: 'grid active',
store: chainedStoreActive,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}, {
xtype: 'gridpanel',
title: 'grid inactive',
store: chainedStoreNoActive,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}],
renderTo: Ext.getBody()
});
}
});
The global or the "allelements" store, need to be a global store, the chained ones can be created in a viewmodel of a view.

Adding a Button to VUE datatables

I looking to add a button to each row in a datatable component in VUE 2
Currently data is feeding from axios request as per below
axios.get('workers/viewall').then(response => this.workerslist = response.data);
Added a prop in the Datatable.vue to give customButtons = True
customButtons: {
default: true
},
And added the below to my Vue file
customButtons: {
hide: false,
icon: 'search',
onclick: function (user_id) {
this.$router.push({
name: 'edit_worker',
params: {user_id: user_id}
});
},
},
Which is put into the data component here:
data: function () {
return {
workerslist: [],
and then column data is as follows:
columndata: [{
label: 'ID',
field: 'id',
numeric: true,
html: false,
},{
label: 'First name',
field: 'fname',
numeric: true,
html: false,
}, {
label: 'Surname',
field: 'sname',
numeric: false,
html: false,
}, {
label: 'Date of Birth',
field: 'dob',
numeric: false,
html: false,
}, {
label: 'Gender',
field: 'gender',
numeric: true,
html: false,
}, {
label: 'Trade',
field: 'trade',
numeric: false,
html: false,
}, {
label: 'Nationality',
field: 'nationality',
numeric: false,
html: true,
}, {
label: 'Telephone',
field: 'telephone',
numeric: false,
html: true,
}, {
label: 'Mobile',
field: 'mobile',
numeric: false,
html: true,
}, {
label: 'Created',
field: 'created_at',
numeric: false,
html: true,
},{
label: 'Edit',
field: 'edit',
numeric: false,
html: true,
}],
It just has to put a button to have a click through at the end of each row

ExtJS 4.2 - How to map array to a model field and display dynamically on a grid column?

I have this json data:
{
id: 1,
name: 'something',
description: 'somethingsomething',
customers: [{
id: 1,
username: 'cust1'
}, {
id: 2,
username: 'cust2'
}]
}
While I have no problems displaying the first three fields on the gridpanel, I however have an issue retrieving the array object for the customers field. My model goes like this:
fields: [
'id', {
name: 'name',
sortType: Ext.data.SortTypes.asUCString
},
'permanent', {
name: 'description',
Type: Ext.data.SortTypes.asUCString
}, {
name: 'customers',
Type: Ext.data.SortTypes.asUCString
}, {
name: 'username',
Type: Ext.data.SortTypes.asUCString,
mapping: 'customers[0].username'
}
]
When I try to access customers[0].username, it only retrieves the ones on that specified index. Removing the index number returns undefined as I assume it is looking for what index to return from. How do I properly retrieve all of customers: [] and display it to my grid where it is structured as:
{
xtype: 'gridpanel',
store: oStore,
viewConfig: {
loadMask: false,
enableTextSelection: true
},
hideHeaders: false,
bodyBorder: true,
columns: [{
text: 'Customer',
dataIndex: 'username',
flex: 1
}, {
header: '',
xtype: 'actioncolumn',
itemId: 'remove-player-btn',
width: 50,
sortable: false,
resizable: false,
menuDisabled: true,
items: [{
icon: 'resources/img/x.png',
tooltip: 'Remove Player',
scope: oMe
}],
editor: {
xtype: 'text',
name: 'deleteRow'
}
}]
}

You can use convert function available in model.This convert function is used for some calculation purpose & map response data for our needs.For example I will map username as below:
fields: [
{
name:'username',
convert:function(value,model)
{
return model.data.customers.username;
}
}
]
Use same technique for id field.Reply if any issues.

KendoUI Grid footer extras from returned JSON

I have the following JSON being returned from my PHP script to populate my Kendo grid:
data: [{id:1, sku:-, theName:Two tier wedding veil, basePrice:77.00, dimensions:-, weight:-,…},…]
querytime: "0.0000"
rowcount: 4
Which works great. As you can see I have added an extra parameter called "querytime".
How do I access that on the JS side of things so I can append that to the footer of the grid?
I have tried:
console.log($('#productGrid').data("kendoGrid").dataSource);
To try and find where my extra parameter is located but to no avail.
How can I access my customer parameter?
var columns = [
{
field: 'dateRaw',
title: 'Date added',
width: '90px',
template: '<span class="data" data-menu-id="1" data-item-id="#=id#" data-item-type="products"><abbr title="At #=time#">#=dateFormatted#</abbr></span>'
},
{
field: 'sku',
title: 'SKU',
width: '120px'
},
{
field: 'theName',
title: 'Name'
},
{
field: 'dimensions',
title: 'Dimensions',
//width: '120px'
},
{
field: 'weight',
title: 'Weight',
width: '80px'
},
{
field: 'basePrice',
title: 'Price',
width: '60px',
format: '{0:n}'
}]
$('#productGrid').kendoGrid({
rowTemplate: '',
dataSource: {
transport: {
read: {
type: 'POST',
dataType: 'json',
url: 'Ajax',
data: {
call: 'Product->productGrid'
}
}
},
schema: {
data: 'data',
querytime: 'querytime',
total: 'rowcount',
model: {
id: 'id',
fields: {
dateRaw: {
type: 'date'
},
id: {
type: 'number'
},
sku: {
type: 'string'
},
basePrice: {
type: 'number'
}
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
error: function(e) {
modalError(e.errorThrown + "<br/>" + e.status + "<br/>" + e.xhr.responseText)
}
},
height: 700,
autoBind: false,
filterable: true,
sortable: true,
pageable: true,
columns: columns
})

you are pretty close:
querytime is available inside the options object of your dataSource:
$('#productGrid').data('kendoGrid').dataSource.options.querytime

What is wrong with my DropDown editor for a jqxGrid column?

I have this jqxGrid setup:
var paymentSource = {
datatype: "json",
datafields: [
{ name: 'Id', type: 'number' },
{ name: 'Name', type: 'string' }
],
url: "#Url.Action("GetPaymentSchemes")"
};
var paymentAdapter = new $.jqx.dataAdapter(paymentSource, { autoBind: true });
var gridSource =
{
datatype: "json",
datafields: [
{ name: 'Name', type: 'string' },
{ name: 'PaymentSchemeId', type: 'number' },
{ name: 'IsActive', type: 'boolean' },
{ name: 'Remarks', type: 'string' }
],
url: "#Url.Action("GetParkades")"
};
var gridDataAdapter = new $.jqx.dataAdapter(gridSource);
$("#index-grid").jqxGrid(
{
theme: theme,
width: 900,
source: gridDataAdapter,
editable: true,
columns: [
{ text: "Name", datafield: "Name", width: 300 },
{
text: 'Payment Scheme',
datafield: 'PaymentSchemeId',
displayfield: 'Name',
columntype: 'dropdownlist',
createeditor: function(row, value, editor) {
editor.jqxDropDownList({ source: paymentAdapter, displayMember: 'Name', valueMember: 'Id' });
}
},
{ text: "Active", datafield: "IsActive", width: 50, columntype: 'checkbox' },
{ text: "Operator Remarks", datafield: "Remarks" }
]
});
The "Payment Scheme" column shows the same text value as the "Name" column when the page loads. When I double click "Payment Scheme", I get the correctly populated dropdown, but when I select a value, and leave the cell to end editing, the "Name" column now shows the same text as the "Payment Scheme" column. Do the two Name fields in different sources and adapters conflict? What is up here?