filter option in a grid - extjs

i use a filter option in a grid where i can select per column what i want to filter. For the options i need to do this:
Ext.ux.ajax.SimManager.init({
delay: 300,
defaultSimlet: null
}).register({
'filterEvents': {
data: [
['Dag 1', 'Dag 1'],
['Dag 2', 'Dag 2']
],
stype: 'json'
}
});
dagenFilter = Ext.create('Ext.data.Store', {
fields: ['id', 'text'],
proxy: {
type: 'ajax',
url: 'filterEvents',
reader: 'array'
}
});
But because the filter options need to be dynamic and not static i want to load the options from a service. The output of that json looks like this
{
"dagen": [{
"name": "Dag 1",
"reference": "Dag 1"
}, {
"name": "Dag 2",
"reference": "Dag 2"
}, {
"name": "Dag 3",
"reference": "Dag 3"
}, {
"name": "Dag 4",
"reference": "Dag 4"
}]
}
but i am not sure how to do this.


If by "filter option in a grid" you are referring to FiltersFeature the answer is easy. A ListFilter can be backed by a DataStore.
Take a look at the options config of ListFilter here. Specifically, store and phpMode might also be relavant. Here is an example of one:
{
header: 'List Filter Column',
dataIndex: 'list_data',
width: 120,
filter: {
type: 'list',
store: Ext.getStore('FilterOptions'),
phpMode: true
}
}

Related

How do I turn a sanity io document field that is an array of objects to an array of strings

I have a recipes.js document that has a tag field:
{
name: 'tags',
title: 'Tags',
type: 'array',
of: [{ type: 'reference', to: { type: 'tags' } }],
options: {
layout: 'tags',
},
},
it references another document called tags.js:
export default {
name: 'tags',
type: 'document',
title: 'Tags',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
],
};
I am trying to add the tags to each recipe as an array of strings in graphql. such as:
"tags": ['dinner', 'lunch', 'ribs']
but instead, I get an array of objects:
"tags": [
{
"title": "breakfast"
},
{
"title": "pancakes"
},
{
"title": "food"
}
]
How can I tell sanity all I want is each one to be added in as a string so it is an array of strings and not objects.

Sanity's GraphQL API does not support transforming the data structure into something else. If you want to do that, you will have to use GROQ.

Antd tree table grouped by column value

I need to implement tree table in my react application. that has grouped by an object property value.
The object is as follows
{
"SP": [
{
"DisplayName": "audi",
"Name": "r8",
"Type": "2012"
},
{
"DisplayName": "audi",
"Name": "rs5",
"Type": "2013"
}
],
"Code": [
{
"DisplayName": "ford",
"Name": "mustang",
"Type": "2012"
},
{
"DisplayName": "ford",
"Name": "fusion",
"Type": "2015"
}
],
"Message": [
{
"DisplayName": "kia",
"Name": "optima",
"Type": "2012"
}
]
}
And my table should be as the following image
I have used antd in my project and I tried to implement this functionality with antd table and could not implement as I want. I need the filter functionality too.
Can anyone suggest a solution

You need to restructure your dataSource witch children prop:
function NestedTables() {
return (
<Flexbox>
<Table
size="small"
indentSize={0}
columns={columns}
dataSource={source}
/>
</Flexbox>
);
}
When your source is:
const source = [
{
key: '1',
Code: 'SP',
children: [
{
key: '11',
Code: '5001',
DisplayName: 'audi',
Name: 'r8',
Type: '2012'
},
{
key: '12',
Code: '313',
DisplayName: 'audi',
Name: 'rs5',
Type: '2013'
}
]
},
{
key: '2',
Code: 'Code',
children: [
{
key: '21',
Code: '243',
DisplayName: 'ford',
Name: 'mustang',
Type: '2012'
},
{
key: '22',
Code: '503431',
DisplayName: 'ford',
Name: 'fusion',
Type: '2015'
}
]
},
{
key: '3',
Code: 'Message',
children: [
{
key: '31',
Code: '4311',
DisplayName: 'kia',
Name: 'optima',
Type: '2012'
}
]
}
];
And defined columns filters:
const columns = [
{
title: 'Code',
dataIndex: 'Code',
key: 'Code',
filters: [
{ text: 'SP', value: 'SP' },
{ text: 'Code', value: 'Code' },
{ text: 'Message', value: 'Message' }
],
onFilter: (value, record) => record.Code.indexOf(value) === 0
},
{
title: 'Display Name',
dataIndex: 'DisplayName',
key: 'DisplayName',
filters: [
{ text: 'audi', value: 'audi' },
{ text: 'ford', value: 'ford' },
{ text: 'kia', value: 'kia' }
],
onFilter: (value, record) =>
record.children.filter(child => child.DisplayName === value).length > 0
},
{ title: 'Name', dataIndex: 'Name', key: 'Name' },
{ title: 'Type', dataIndex: 'Type', key: 'Type' }
];
Demo:

EXTJS 5.1 VERY SIMPLE TreeStore from JSON

I have looked around but I still don't understand how to create treestore properly.
I have this very simple json that I get from a server:
{
"Results": [
{
"name": "John",
"age": 23,
"cars": [
{
"name": "Clio",
"brand": "Renault"
},
{
"name": "Class S",
"brand": "Mercedes"
}
]
},
{
"name": "Michel",
"age": 42,
"cars": [
{
"name": "Qashqai",
"brand": "Nissan"
}
]
}
]
}
I have my two models:
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [ 'name', 'age']
});
Ext.define('Car', {
extend: 'Ext.data.Model',
fields: [ 'name', 'brand']
});
Now I know that I have to create a tree store, but in all example that I have seen, there is always a "children" property in the json, which I don't have.
How to create a tree store with the following json?
Thanks a lot in advance :) !!

You could always build the correct formatted object for the data like the following:
Ext.application({
name: 'Fiddle',
launch: function () {
var myTreeData = {
"Results": [{
"name": "John",
"age": 23,
"cars": [{
"name": "Clio",
"brand": "Renault"
}, {
"name": "Class S",
"brand": "Mercedes"
}]
}, {
"name": "Michel",
"age": 42,
"cars": [{
"name": "Qashqai",
"brand": "Nissan"
}]
}]
},
modifiedData = {
expanded: true,
children: []
};
myTreeData.Results.forEach(function (result) {
var newChildrenArray = [];
result.cars.forEach(function (car) {
var newChild = {
text: car.name,
leaf: true
};
newChildrenArray.push(newChild);
});
var person = {
text: result.name,
leaf: (newChildrenArray.length > 0 ? false : true),
children: newChildrenArray
};
modifiedData.children.push(person);
});
var store = Ext.create('Ext.data.TreeStore', {
root: modifiedData
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
}
});
Demo here: https://fiddle.sencha.com/#fiddle/j05

Sencha Touch. NestedList move, insert, remove items

My question is about how to move, insert and remove items in NestedList
I have a NestedList like this:
// MODEL
Ext.define('MyApp.model.Comments', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'text', type: 'string'}
]
}
});
// NESTEDLIST
Ext.define('MyApp.view.Comments', {
requires: [
'Ext.data.TreeStore'
],
config: {
id: 'comments',
store: {
type: 'tree',
root: {},
model: 'MyApp.model.Comments',
proxy: {
type: 'ajax',
actionMethods: {read: 'POST'},
url: './comments.php',
timeout: 4000,
enablePagingParams: false,
extraParams: {
action: 'get-comments'
}
}
},
displayField: 'text',
detailCard: {
xtype: 'container',
layout: 'vbox',
items: [
{
id: 'comment-text-field',
flex: 1
}
]
},
listeners: {
leafitemtap: function(el, list, index, target, record) {
var detailCard = el.getDetailCard(),
text = record.data.text,
commentField = detailCard.query("#comment-text-field");
var textHtml = '<b>text: </b>' + text;
if (commentField) {
commentField[0].setHtml(textHtml);
}
},
destroy: function(el) {
el.getDetailCard().destroy();
}
}
}
});
// './comments.php' response
[
{
"text": "New comments",
"children": [
{
"text": "NestedList provides a miller column interface to navigate between",
"leaf": true
},
{
"text": "The absolute bottom position of this Component; must be a valid CSS length value",
"leaf": true
}
]
},
{
"text": "Checked comments",
"children": [
{
"text": "Whether or not this Component is absolutely centered inside its Container",
"leaf": true
},
{
"text": "Component is absolutely centered inside its Container",
"leaf": true
},
{
"text": "More comments",
"leaf": true
}
]
}
]
It works fine but i need to move, remove and add items in NestedList.
F.e. when i open one of "New comments" (leaf item is opened and leafitemtap fired), opened item should be removed from "New comments" and inserted into "Checked comments".
I see 2 ways to do it:
Send request to update comments.php response AND update store via Sencha functionality
Send request to update comments.php response AND reload comments.php each time when some items are clicked to update NestedList
Of course 1st way is better, but I have no idea how to do at least one of them.
Hope you will help me, thsnk's!

Well, looks like there is no convenient way to do that. Here is comment on official forum:
http://www.sencha.com/forum/showthread.php?205097-How-to-create-a-Nested-List-with-dynamic-loading-of-each-node

How to customise extjs remote extensible calendar example with MVC application?

I have downloaded 'extensible-1.6.0-b1', I'm trying to understand the remote example to customise it with my application. I'm coding with extjs 4.0.7.
I want to know how to intgrate the example in mvc application? Is there an example with clear architecture: store+model+controller?
Edit:
This is the code I'm using now:
Ext.define('Webdesktop.view.calendar.Calendar', {
extend : 'Ext.tab.Panel',
alias : 'widget.calendar_calendar',
//autoShow : true,
paths: {
'Extensible': 'extensible-1.6.0-b1/src',
'Extensible.example': 'extensible-1.6.0-b1/examples'
},
requires:([
'Ext.Viewport',
'Ext.layout.container.Border',
'Ext.data.proxy.Rest',
'Extensible.calendar.data.MemoryCalendarStore',
'Extensible.calendar.data.EventStore',
'Extensible.calendar.CalendarPanel'
]),
initComponent: function() {
var me = this;
var calendarStore = Ext.create('Extensible.calendar.data.MemoryCalendarStore', {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'app/data/calendars.json',
noCache: false,
reader: {
type: 'json',
root: 'calendars'
}
}
});
var eventStore = new Ext.data.JsonStore({
autoLoad: true,
fields: [
{name: 'EventId', mapping:'id', type:'int'},
{name: 'CalendarId', mapping: 'cid', type: 'int'},
{name: 'Title', mapping: 'title'},
{name: 'StartDate', mapping: 'start', type: 'date', dateFormat: 'c'},
{name: 'EndDate', mapping: 'end', type: 'date', dateFormat: 'c'}
],
proxy : {
type : 'ajax',
api : {
read : GLOBAL_USER_PROFILE.apiUrl + '_module/calendar/_action/loadEvent'
},
extraParams : {
_module : 'calendar',
_action : 'loadEvent',
_db : '2d3964b9...e53a82'
},
reader : {
type : 'json',
root : 'evts'
},
writer : {
type : 'json',
encode : true
}
},
listeners: {
'write': function(store, operation){
var title = Ext.value(operation.records[0].data[Extensible.calendar.data.EventMappings.Title.name], '(No title)');
switch(operation.action){
case 'create':
Extensible.example.msg('Add', 'Added "' + title + '"');
break;
case 'update':
Extensible.example.msg('Update', 'Updated "' + title + '"');
break;
case 'destroy':
Extensible.example.msg('Delete', 'Deleted "' + title + '"');
break;
}
}
}
});
var cp = Ext.create('Extensible.calendar.CalendarPanel', {
id: 'calendar-remote',
region: 'center',
eventStore: eventStore,
calendarStore: calendarStore,
title: 'Remote Calendar'
});
Ext.apply(me, {
items : {
xtype : 'panel',
activeItem : 0,
layout: {
type: 'fit'
},
border : false, //FIXME: see class comment, bug
defaults : {
closable : false, //FIXME: see class comment, bug
border : false //FIXME: see class comment, bug
},
title : 'الاستقبال',
closable : true,
bodyPadding : 0,
items: [
cp
]
}
});
me.callParent();
}
});
The json returned:
{
"evts":[{
"EventId":"1",
"CalendarId":"0",
"Title":"$data",
"StartDate":"Mon May 13 2013 09:21:57 GMT+0100",
"EndDate":"Mon May 13 2013 09:21:57 GMT+0100",
"Duration":"0",
"Location":"",
"Notes":"",
"Url":"",
"IsAllDay":"0",
"Reminder":""
},{
"EventId":"2",
"CalendarId":"0",
"Title":"$data",
"StartDate":"Mon May 13 2013 09:21:57 GMT+0100",
"EndDate":"Mon May 13 2013 09:21:57 GMT+0100",
"Duration":"0",
"Location":"",
"Notes":"",
"Url":"",
"IsAllDay":"0",
"Reminder":""
}]
}
But events are not displayed in the calendar, and I have this error in Firebug:
TypeError: data[M.StartDate.name] is null

I had the same problem i just solved it yesterday, it's about the format of your date that's incorrect take this may that help you :
so this is my view :
Ext.define('Congectis.view.CalendarTry', {
extend: 'Ext.panel.Panel',
alias: 'widget.calendartry',
requires: [
'Ext.data.proxy.Rest',
'Extensible.calendar.data.MemoryCalendarStore',
'Extensible.calendar.CalendarPanel',
'Extensible.calendar.data.EventStore'
],
autoShow: true,
layout: 'fit',
Store: ['Evts'],
initComponent: function () {
var calendarStore = Ext.create('Extensible.calendar.data.MemoryCalendarStore', {
autoLoad: true,
proxy: {
type: 'ajax',
url: '../../../../../MVC/eLeave/data/event2.json',
noCache: false,
reader: {
type: 'json',
root: 'calendars'
}
}
});
var eventstore = Ext.create('Extensible.calendar.data.EventStore', {
autoLoad: true,
fields: [
{name: 'EventId', mapping: 'EventId', type: 'int'},
{name: 'CalendarId', mapping: 'CalendarId', type: 'int'},
{name: 'Title', mapping: 'Title'},
{name: 'StartDate', mapping: 'StartDate', type: 'date', dateFormat: 'm-d-Y'},
{name: 'EndDate', mapping: 'EndDate', type: 'date', dateFormat: 'm-d-Y'}
],
proxy: {
type: 'ajax',
url: '../../../../../MVC/eLeave/data/event1.json',
noCache: false,
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json',
nameProperty: 'mapping'
},
listeners: {
exception: function (proxy, response, operation, options) {
var msg = response.message ? response.message : Ext.decode(response.responseText).message;
Ext.Msg.alert('Server Error', msg);
}
}
},
//option for generically messaging after CRUD persistence has succeeded.
listeners: {
'write': function (store, operation) {
var title = Ext.value(operation.records[0].data[Extensible.calendar.data.EventMappings.Title.name], '(No title)');
switch (operation.action) {
case 'create':
Extensible.example.msg('Add', 'Added "' + title + '"');
break;
case'update':
Extensible.example.msg('Update', 'Updated "' + title + '"');
break;
case'destroy':
Extensible.example.msg('Delete', 'Deleted "' + title + '"');
break;
}
}
}
});
this.items = [{
xtype: 'extensible.calendarpanel',
eventStore: eventstore,
calendarStore: calendarStore,
title: 'Calendrier des conges',
name: 'eLeave-calendar',
height: 500,
width: 500
}];
//Extensible.calendar.data.CalendarModel.reconfigure();
this.callParent(arguments);
}
});
This is my json store
{
"success": true,
"message": "Loaded data",
"data": [{
"id": 1001,
"cid": 1,
"start": "2015-03-18T10:00:00-07:00",
"end": "2015-03-28T15:00:00-07:00",
"title": "Vacation",
"notes": "Have fun"
}, {
"id": 1002,
"cid": 2,
"start": "2015-04-07T11:30:00-07:00",
"end": "2015-04-07T13:00:00-07:00",
"title": "Lunch with Matt",
"loc": "Chuy's",
"url": "http:\/\/chuys.com",
"notes": "Order the queso"
}, {
"id": 1003,
"cid": 3,
"start": "2015-04-07T15:00:00-07:00",
"end": "2015-04-07T15:00:00-07:00",
"title": "Project due"
}, {
"id": 1004,
"cid": 1,
"start": "2015-04-07T00:00:00-07:00",
"end": "2015-04-07T00:00:00-07:00",
"title": "Sarah's birthday",
"ad": true,
"notes": "Need to get a gift"
}, {
"id": 1005,
"cid": 2,
"start": "2015-03-26T00:00:00-07:00",
"end": "2015-04-16T23:59:59-07:00",
"title": "A long one...",
"ad": true
}, {
"id": 1006,
"cid": 3,
"start": "2015-04-12T00:00:00-07:00",
"end": "2015-04-13T23:59:59-07:00",
"title": "School holiday"
}, {
"id": 1007,
"cid": 1,
"start": "2015-04-07T09:00:00-07:00",
"end": "2015-04-07T09:30:00-07:00",
"title": "Haircut",
"notes": "Get cash on the way",
"rem": 60
}, {
"id": 1008,
"cid": 3,
"start": "2015-03-08T00:00:00-08:00",
"end": "2015-03-10T00:00:00-07:00",
"title": "An old event",
"ad": true
}, {
"id": 1009,
"cid": 2,
"start": "2015-04-05T13:00:00-07:00",
"end": "2015-04-05T18:00:00-07:00",
"title": "Board meeting",
"loc": "ABC Inc.",
"rem": 60
}, {
"id": 1010,
"cid": 3,
"start": "2015-04-05T00:00:00-07:00",
"end": "2015-04-09T23:59:59-07:00",
"title": "Jenny's final exams",
"ad": true
}, {
"id": 1011,
"cid": 1,
"start": "2015-04-09T19:00:00-07:00",
"end": "2015-04-09T23:00:00-07:00",
"title": "Movie night",
"note": "Don't forget the tickets!",
"rem": 60
}]
}
The problem was with your date format, wish that helped you, good luck
`

Resources