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
`
Related
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
Is it possible to use associations while loading nested GeoJson to FeatureStore via vectorLayer?
Ext.define('Employee', {
extend: 'Ext.data.Model',
proxy: {
type: 'memory',
reader: {
type: 'json',
idProperty: 'id'
}
},
fields: [ { name: 'name', type: 'string' } ]
});
Ext.define('Company', {
extend: 'Ext.data.Model',
proxy: {
type: 'memory',
reader: {
type: 'json',
idProperty: 'id'
}
},
fields: [ { name: 'name', type: 'string' } ],
hasMany: { model: 'Employee', name: 'employees' }
});
var jsonData = {
companies: [
{
name: 'Foo',
employees: [
{ name: 'Jack' },
{ name: 'Joe' }
]
},
{
name: 'Bar',
employees: [
{ name: 'Jim' }
]
}
]
};
Ext.define('CompaniesExt', {
extend: 'Ext.data.Store',
model: 'Company',
data: jsonData,
storeId: 'CompaniesExt',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'companies'
}
}
});
Ext.define('CompaniesGeoExt', {
extend: 'GeoExt.data.FeatureStore',
model: 'Company',
storeId: 'CompaniesGeoExt'
});
// data from json
var jsonStore = Ext.create('CompaniesExt');
// data from geoJson
var map = new OpenLayers.Map({ allOverlays: true });
var geoJsonStore = Ext.create('CompaniesGeoExt');
var layer = new OpenLayers.Layer.Vector('Companies', {
storeName: 'CompaniesGeoExt',
strategies: [
new OpenLayers.Strategy.Fixed(),
],
protocol: new OpenLayers.Protocol.HTTP({
url: "/companies.geojson",
format: new OpenLayers.Format.GeoJSON(),
})
});
map.addLayers([layer]);
geoJsonStore.bind(layer);
So, the first jsonStore works as expected, the employeesStore gets populated for each company. The second geoJsonStore does not. Employees data remain in raw.data and the sub-stores don't ge populated on load.
Is it supposed to work this way, or am I missing something?
Here's the contents of companies.geojson:
{
"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "point",
"coordinates": [ 0, 0 ]
},
"type": "feature",
"properties": {
"name": "Foo",
"employees": [
{ "name": "Jack" },
{ "name": "Joe" }
]
}
},
{
"geometry": {
"type": "point",
"coordinates": [ 1, 1 ]
},
"type": "feature",
"properties": {
"name": "Bar",
"employees": [
{ "name": "Jim" }
]
}
}
]
}
It seems, that the easiest way is to rewrite data after loading features, for example on "featuresadded" event:
rewriteEmployees: function(event){
// which store
var store = event.features[0].layer.store;
// for each item do the rewrite
store.each(
function(r){
if (r.raw.data.emplyees)
r.raw.data.employees.forEach(function(e){
r.employees().add(e);
});
r.employees().commitChanges();
}
);
},
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
}
}
My problem consists of not being able to retrieve data through associations.
After running setup() from console i would expect firstTurbine.getPlant() to return the associated plant, yet it returns undefined.
I've spent alot of time looking for a solution I'm probably not looking the right place.
Relevant code is attached below:
Ext.regApplication({
name: "app",
launch: function() {
//app.views.viewport = new app.views.Viewport();
}
});
app.models.Plant = Ext.regModel("Plant", {
fields: [
{name: "id", type: "int"},
{name: "name", type: "string"},
{name: "notes", type: "auto"}
],
proxy: {type: 'localstorage', id:'plantStorage'}
});
app.models.Turbine = Ext.regModel("Turbine", {
fields: [
{name: "id", type: "int"},
{name: "plant_id", type: "int"},
{name: "name", type: "string"},
{name: "notes", type: "auto"}
],
proxy: {type: 'localstorage', id:'turbineStorage'},
belongsTo: 'Plant'
});
app.stores.plants = new Ext.data.Store({
model: "Plant",
autoLoad: true,
data : [
{id: 1, name: 'Plant1', notes: ["Note1", "Note2"]},
{id: 2, name: 'Plant2', notes: ["Note1", "Note2"]},
{id: 3, name: 'Plant3', notes: ["Note1", "Note2"]}
]
});
app.stores.turbines = new Ext.data.Store({
model: "Turbine",
autoLoad: true,
data: [
{id: 11, "plant_id": 1, name: "T41", notes: ["Turbine note 1", "Turbine note 2"]},
{id: 12, "plant_id": 1, name: "T13", notes: ["Turbine note 1", "Turbine note 2"]}
]
});
function setup(){
firstPlant = app.stores.plants.getAt(0);
if(!firstPlant){
firstPlant = Ext.ModelMgr.create({name:"TestPlant1", id: 1}, "Plant");
app.stores.plants.add(firstPlant);
app.stores.plants.sync();
}
firstTurbine = app.stores.turbines.getAt(0);
if(!firstTurbine){
firstTurbine = Ext.ModelMgr.create({name:"T31", id: 30, plant_id: 1}, "Turbine");
app.stores.turbines.add(firstTurbine);
app.stores.turbines.sync();
}
return {firstTurbine: firstTurbine, firstPlant: firstPlant};
}
The getter function created by the belongsTo association takes a callback function as argument. The callback function will have the related object as its first argument.
turbine.getPlant(function(Plant){
console.log(Plant);
});
I will attach a full working example since this have cost me alot of headache and might have aswell for others.
first the json data:
{
"plants": [{
"id": 1,
"name": "Plant1",
"notes": ["Note1", "Note2"]
}],
"turbines": [
{
"id": 11,
"plant_id": 1,
"name": "T41",
"notes": ["Turbine note 1", "Turbine note 2"]
}]
}
And the javascript:
Ext.regApplication({
name: "app",
launch: function() {}
});
app.models.Plant = Ext.regModel("Plant", {
fields: ["id", "name", "notes"],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'plants'
}
}
});
app.models.Turbine = Ext.regModel("Turbine", {
fields: ["id", "plant_id", "name", "notes"],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'turbines'
}
},
belongsTo: 'Plant'
});
app.stores.plants = new Ext.data.Store({
model: "Plant"
});
app.stores.turbines = new Ext.data.Store({
model: "Turbine",
autoLoad: {
callback: function(records) {
var turbine = records[0];
turbine.getPlant(function(Plant){
console.log(Plant);
});
}
}
});
I am using this article of architecture http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/
Here is my Application.ResellerGrid.js
Application.ResellerGrid = Ext.extend(Ext.grid.GridPanel, {
border:false
,cityname : ''
,columndataindex : ''
,fromdate:''
,todate : ''
,initComponent:function() {
var config = {
store:new Ext.data.GroupingStore({
// store configs
autoDestroy: true,
autoLoad :false,
url: 'api/index.php?_command=getresellers&city='+this.cityname+'&columndataindex='+this.columndataindex
+'&fromdate='+this.fromdate+'&todate='+this.todate
,
storeId: 'getresellerscount',
// reader configs
root: 'reseller',
idProperty: 'mobile',
fields: [
{name: 'parentname'},
{name: 'firstname'},
{name: 'lastname'},
{name: 'mobile'},
{name: 'email'},
{name: 'tmecode'},
{name: 'tmename'},
{name: 'updatedon'},
{name: 'apptype'},
{name: 'alloctype'},
{name: 'empparent'},
{name: 'irodeferred'}
]
,sortInfo:{field: 'parentname', direction: "ASC"}
,groupField:'parentname'
})
,columns: [
{
id :'parentname',
header : 'Parent Name',
width : 120,
sortable : true,
dataIndex: 'parentname'
},
{
id :'firstname',
header : 'First Name',
width : 120,
sortable : true,
dataIndex: 'firstname'
},
{
id :'lastname',
header : ' Last Name',
width : 100,
sortable : true,
dataIndex: 'lastname'
},
{
id :'mobile',
header : 'Mobile',
height : 50,
width : 100,
sortable : true,
dataIndex: 'mobile'
},
{
id :'email',
header : 'E-Mail',
width : 100,
sortable : true,
dataIndex: 'email'
},
{
id :'tmecode',
header : ' TME Code',
width : 100,
sortable : true,
dataIndex : 'tmecode'
},
{
id :'updatedon',
header : ' updatedon',
width : 100,
sortable : true,
dataIndex: 'updatedon'
},
{
id :'empparent',
header : ' empparent',
width : 100,
sortable : true,
dataIndex: 'empparent'
},
{
id :'alloctype',
header : ' alloctype',
width : 100,
sortable : true,
dataIndex: 'alloctype'
},
{
id :'apptype',
header : ' apptype',
width : 100,
sortable : true,
dataIndex: 'apptype'
}
]
,view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
,plugins :[]
,viewConfig :{forceFit:true}
,tbar :[]
,bbar :[]
,height : 250
,width : 860
,title : 'Reseller Grid'
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.ResellerGrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
,onRender:function() {
this.store.load();
Application.ResellerGrid.superclass.onRender.apply(this, arguments);
} // eo function onRender
});
Ext.reg('ResellerGrid', Application.ResellerGrid);
Here is my json response
{
"reseller": [{
"firstname": "anusha",
"lastname": "",
"mobile": "9739949891",
"email": "",
"tmecode": "010739",
"tmename": "Deepa S",
"updatedon": "2011-03-18 13:17:22",
"apptype": "1",
"alloctype": "2",
"empparent": "Bangalore",
"parentname": "HEMARLI"
}, {
"firstname": "IBRAZ",
"lastname": "",
"mobile": "9740834768",
"email": "",
"tmecode": "010739",
"tmename": "Deepa S",
"updatedon": "2011-03-18 17:52:04",
"apptype": "1",
"alloctype": "2",
"empparent": "Bangalore",
"parentname": "HEMARLI"
}, {
"firstname": "manjunath",
"lastname": "",
"mobile": "7829407211",
"email": "umesthrekha29#yahoo.com",
"tmecode": "012574",
"tmename": "Geetha S",
"updatedon": "2011-03-19 17:12:17",
"apptype": "1",
"alloctype": "2",
"empparent": "Bangalore",
"parentname": "HEMARLI"
}]
}
data in my grid is not showing why ?
Done by adding jsonreader , grouping store doesn't work without jsonreader .