I'm working with Extensible Calendar and trying to make a Custom ajax Store work with this , but I get this error when the Store Load
so the Calendar does not show the date, here's some code
Ext.apply(Extensible.calendar.data.EventMappings, {
StartDate: {name: 'fecha_reservacion', mapping: 'fecha_reservacion', type: 'date', dateFormat: 'c'},
});
Extensible.calendar.data.EventModel.reconfigure();
var eventStore = Ext.create('Ext.data.Store', {
fields: [
{name: 'id', type: 'int'},
{name: 'fecha_reservacion', type: 'date', dateFormat: 'c'},
],
proxy: {
type: 'ajax',
url: '/reservacion/get',
reader: {
type: 'json'
}
},
autoLoad: true
});
Ext.create('Extensible.calendar.CalendarPanel', {
eventStore: eventStore,
calendarStore: calendarStore,
renderTo: 'content',
title: 'Custom Event Mappings',
width: 800,
height: 700,
});
Your mapping is wrong name: 'fecha_reservacion' should be name: 'StartDate'
Ext.apply(Extensible.calendar.data.EventMappings, {
StartDate: {name: 'fecha_reservacion', mapping: 'fecha_reservacion', type: 'date', dateFormat: 'c'},
// add here all your fields
});
and you have to add the mappings for the other fields too.
Related
I'm currently migrating Extjs 4.2 to Extjs 6.2 and I'm simply trying to save a record. My code works just fine in ExtJs 4.2, but it fails in ExtJs 6.2 when trying to create. The problem is that the value of data changes in Extjs 6.2 after passing it to Model. Please see attached picture.
PICTURE 1:
Take a look at value of data BEFORE hitting the Model (Line 371)
PICTURE 2:
Value of data AFTER hitting the Model (Line 371)
You noticed that the value of data changes. Well this doesn't happen in ExtJs 4.2 and I want it to behave the same way in ExtJs 6.2.
Here's my code:
folder.js
if (folderNameIsValid(s))
{
// create the new folder
var data = {
typeId : me.typeId,
name : s,
loaded : true
};
if (me.clientId) data.clientId = me.clientId;
if (me.userId) data.userId = me.userId;
if (me.recordId) data.recordId = me.recordId;
if (me.empId) data.employeeId = me.empId;
if (pn !== rn) data.parentFolderId = pn.get('folderId');
var node = Ext.create('App.model.FolderTreeNodeDisplay', data);
node.save({
callback : function()
{
pn.appendChild(node);
pn.expand();
sm.select(node);
}
});
}
Here's code for Model:
Ext.define('App.model.FolderTreeNodeDisplay',
{
extend : 'Ext.data.Model',
idProperty: 'folderId',
fields : [
{name: 'folderId', type: 'int', useNull: false},
{name: 'typeId', type: 'int', useNull: true},
{name: 'recordId', type: 'int', useNull: true},
{name: 'employeeId', type: 'int', useNull: true},
{name: 'userId', type: 'int', useNull: true},
{name: 'clientId', type: 'int', useNull: true},
{name: 'permanent', type: 'string', defaultValue: 'N'},
{name: 'fixed', type: 'string', defaultValue: 'N'},
{name: 'active', type: 'string', defaultValue: 'Y'},
{name: 'name', type: 'string', convert: Ext.htmlDecode},
{name: 'parentFolderId', type: 'int', useNull: true},
// domain fields
{name: 'createdBy', type: 'string', persist: false},
{name: 'creationDate', type: 'date', dateFormat: 'c', useNull: true, persist: false},
{name: 'lastUpdatedBy', type: 'string', persist: false},
{name: 'lastUpdatedDate', type: 'date', dateFormat: 'c', useNull: true, persist: false},
// node fields
{name: 'iconCls', type: 'string', persist: false},
{name: 'leaf', persist: false},
{name: 'expanded', persist: false},
{name: 'parentId', persist: false}
],
proxy: {
type: 'rest',
api: {
create : '/rs/rest/folder/create'
},
reader: {
rootProperty: 'data'
}
}
});
My question is:
What do I need to change/update in my Model so the value of data remains the same after hitting Line 371 and NOT pull all of the random data that you see in picture 2
Any ideas on what I'm missing or need to change in my Model? Thank you so much in advance!
You haven't specified a URL for the proxy. The default in the framework is to use the model name.
I have the following JSON
{"pic":[{"id":"10","title":"Perro","descripcion":"Un lindo perrito","puntos":"300","ext":"jpeg","image_time":"2014-07-28 03:58:31","data":"","URL":"pug.jpeg"},{"id":"12","title":"Pugs","descripcion":"\u00danete a la fuerza","puntos":"123","ext":"jpeg","image_time":"2014-07-30 07:05:42","data":"","URL":"image.jpg"},{"id":"14","title":"burro","descripcion":"lindo burro","puntos":"678","ext":"png","image_time":"2014-07-30 16:25:44","data":"","URL":"1456105_475563429219279_7985916_n.png"}]}
And the following model:
Ext.define('hptest2.model.pic', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{name: 'id', type: 'int'},
{name: 'URL', type: 'String'},
{name: 'puntos', type: 'int'},
{name: 'title', type: 'String'},
{name: 'descripcion', type: 'String'},
{name: 'data', type: 'String'},
{name: 'ext', type: 'String'},
{name: 'image_time', type: 'String'},
]
}
});
And its store:
Ext.define('hptest2.store.pic', {
extend: 'Ext.data.Store',
config: {
model: 'hptest2.model.pic',
proxy: {
type: 'ajax',
url: 'data/pic.php'
},
reader: {
type: 'json',
rootProperty: 'pic'
}
}
});
But when I use a tpl on a view... I just can't access the data from the store
View:
{
title: 'Promociones',
iconCls: 'star',
items: [
{
xtype: 'panel',
store : 'pic',
tpl:new Ext.XTemplate('<div>{URL} with {puntos}</div>'),
}
]
}
The data is stored in raw but not in data
At console with Ext.getStore('pic') in data -> all -> data ... all my columns from my model appear as follow:
data: Object
URL: null
data: null
descripcion: null
ext: null
id: "ext-record-6"
image_time: null
puntos: null
title: null
but in data -> all -> data -> raw I am able to visualise all data that I wished I could access through my view
pic: Array[3]
0: Object
URL: "pug.jpeg"
data: ""
descripcion: "Un lindo perrito"
ext: "jpeg"
id: "10"
image_time: "2014-07-28 03:58:31"
puntos: "300"
title: "Perro"
__proto__: Object
1: Object
2: Object
When I attempt to find a record in an ArrayStore using Sencha Touch 2, no records are returned.
store.findExact('Symbol', 'GOOG')
returns -1.
As shown in the screenshot below,
store.getRange()
returns 44 records, and
store.first()
returns a record, but
store.first().get('Ask')
returns undefined.
Additionally, when I do
store.getAt(1).getData()
I get an object only containing the field 'id: "ext-record-2"'.
Why can I not retrieve records using store.findExact(), and why does record.get('column') return undefined?
Found the problem...
I was trying to reuse a model across ExtJS and Sencha Touch applications. Sencha Touch expects "fields" to be defined inside "config," whereas ExtJS does not.
ExtJS:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Symbol', type: 'string'},
{name: 'LastPrice', type: 'float'},
{name: 'Bid', type: 'float'},
{name: 'Ask', type: 'float'},
{name: 'Volume', type: 'int'},
{name: 'Close', type: 'float'}
]
});
Sencha Touch:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Symbol', type: 'string'},
{name: 'LastPrice', type: 'float'},
{name: 'Bid', type: 'float'},
{name: 'Ask', type: 'float'},
{name: 'Volume', type: 'int'},
{name: 'Close', type: 'float'}
]
}
});
A workaround:
var myModelConfig = {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Symbol', type: 'string'},
{name: 'LastPrice', type: 'float'},
{name: 'Bid', type: 'float'},
{name: 'Ask', type: 'float'},
{name: 'Volume', type: 'int'},
{name: 'Close', type: 'float'}
]
}
};
myModelConfig.fields = myModelConfig.config.fields;
Ext.define('MyModel', myModelConfig);
I have a checkbox grid panel in ExtJS which I want to post selected rows to a PHP function.
When an user click the button, the selected rows should be send to php then php get this rows by $_REQUEST as a parameter.
Could anybody point me right direction to post an array and decode in PHP?
The Model :
Ext.define('LabelModel', {
extend: 'Ext.data.Model',
fields:
[
{name: 'LABEL_ID', type: 'int'},
{name: 'STORE_NO', type: 'int'},
{name: 'DNR_NO', type: 'int'},
{name: 'DNR_DESCRIPTION', type: 'string'},
{name: 'DEPARTMENT', type: 'int'},
{name: 'ARTICLE_NO', type: 'int'},
{name: 'SUBSYS_ARTICLE_NO', type: 'int'},
{name: 'ARTICLE_DESCRIPTION', type: 'string'},
{name: 'ARTICLE_TYPE', convert: checkType},
{name: 'START_DATE', type: 'date', dateReadFormat: 'd.m.Y', submitFormat: 'd.m.Y'},
{name: 'END_DATE', type: 'date', dateReadFormat: 'd.m.Y', submitFormat: 'd.m.Y'},
{name: 'PRODUCT_PRICE', type: 'float'},
{name: 'UNIT_PRICE', type: 'float'},
{name: 'SHELF_PRICE', type: 'float'},
{name: 'LABEL_TEXT', type: 'string'},
{name: 'STATUS', type: 'string'},
{name: 'COLLI_CONTENT', type: 'int'},
{name: 'ACTUAL_STOCK', type: 'int'},
{name: 'PWHG', type: 'int'},
{name: 'PWG', type: 'int'},
{name: 'MP_NO', type: 'int', convert: checkType},
{name: 'INVOICE_TEXT', type: 'string', convert: checkType},
{name: 'LABEL_TYPE', type: 'string'},
{name: 'LABEL_SIGN', type: 'string', convert: checkType}
]
});
The Store :
var labels = Ext.create('Ext.data.JsonStore', {
model: 'LabelModel',
successProperty: 'success',
proxy: {
type: 'ajax',
url: 'lib/db/get-label-list.php',
timeout: 120000,
reader: {
type: 'json',
root: 'labelList',
idProperty: 'LABEL_ID'
}
}
});
Button Handler :
xtype: 'button',
width: 90,
text: 'GÖNDER',
cls: 'x-btn-gonder',
handler: function(){
var ppt = Ext.getCmp('labelType').getValue();
var sb = Ext.getCmp('basic-statusbar');
var count = Ext.getCmp('labelGrids').getSelectionModel().getCount();
var rows = Ext.getCmp('labelGrids').getSelectionModel().getSelection();
var cmb = Ext.getCmp('labelType');
if(ppt == null) {
dialog.show();
} else {
if(count > 0) {
for (var i = 0; i < count; i++)
{
console.log(rows[i].data.LABEL_TYPE, rows[i].data.LABEL_ID);
cmb.reset(); // clear combobox selected value after send to printer
}
// set statusbar text after print
sb.setStatus({
text: 'Etiketler yazıcıya gönderildi..!',
iconCls: 'x-status-saved',
clear: true
});
// remove checked items
Ext.select('.x-grid-row-selected').each(function (element) {
Ext.getCmp('labelGrids').getSelectionModel().deselectAll();
});
} else if(count == 0) {
sb.setStatus({
iconCls: 'x-status-error',
text: 'Lütfen yazdırmak istediğiniz etiketleri seçiniz!'
});
}
winPaper.hide();
}
}
I tried to code EXTJS Grid using jsp. I modify the EXTJS example to get data from jsp page, but the data is not loaded.
Could you please help ?
grid js
<script type="text/javascript">
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', './js/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager'
]);
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'data.jsp'
}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'threadid'
},
[
{name: 'title'},
{name: 'postid'},
{name: 'username'},
{name: 'lastpost'},
{name: 'excerpt'},
{name: 'userid'},
{name: 'dateline'},
{name: 'forumtitle'},
{name: 'forumid'},
{name: 'replycount'},
{name: 'lastposter'}
]),
baseParams: {
abc: 123
}
});
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'ExtJS.com - Browse Forums',
store: store,
disableSelection: true,
loadMask: true,
// grid columns
columns:[{
id: 'topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
sortable: false
},{
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: true
},{
text: "Replies",
dataIndex: 'replycount',
width: 70,
align: 'right',
sortable: true
},{
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 150,
sortable: true
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
renderTo: 'topic-grid'
});
// trigger the data store load
store.loadPage(1);
});
</script>
jsp, data.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%
String data = "{\"totalCount\":\"1\",\"topics\":[{\"title\":\"XTemplate with in EditorGridPanel\",\"threadid\":\"133690\",\"username\":\"kpr#emco\",\"userid\":\"272497\",\"dateline\":\"1305604761\",\"postid\":\"602876\",\"forumtitle\":\"Ext 3.x: Help\",\"forumid\":\"40\",\"replycount\":\"2\",\"lastpost\":\"1305857807\",\"lastposter\":\"kpr#emco\",\"excerpt\":\"Hi\"}]}";
out.println(data);
System.out.println(data);
%>
None of your json column titles seem to match up with your ExtJS model.
The model needs to have the same column names as the data so that it knows where to put the data.
UPDATE
I'm confounded by your store data model implementation. I've never seen it implemented as the second argument for a new JsonReader.
But because you are using baseParam config I assume that you are using ExtJS 3.x not 4.x and I am admittedly not very familiar with 3.x so that may be a legal data model implementation.
In ExtJS 4.x the data model is usually implemented as a separate object than the store, something like this:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'title', type: 'string'},
{name: 'postid', type: 'int'},
{name: 'username', type: 'string'},
{name: 'lastpost', type: 'int'},
{name: 'excerpt', type: 'string'},
{name: 'userid', type: 'int'},
{name: 'dateline', type: 'int'},
{name: 'forumtitle', type: 'string'},
{name: 'forumid', type: 'int'},
{name: 'replycount', type: 'int'},
{name: 'lastposter', type: 'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'data.jsp',
reader: {
type: 'json',
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid'
}
}
});
I am not sure how this works in other versions of ExtJS if you are actually using 3.x, you will have to check your own ExtJS documentation. Also as suggested, you should be seeing an error message in your browser's error console. That will tell you exactly what the problem is.