Full calender drag event not working event date after one week days - fullcalendar-scheduler

I have trying to implement auto scheduling employee in each days. I have tried to drag on employee on other day.
But i have face the issue on employee dragging not working current day after one week days.
Any ideas about my code, which place i have wrong.
full_calender = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listWeek,listDay'
},
views: {
listDay: { buttonText: 'List View' },
listWeek: { buttonText: 'Week View' },
month: { buttonText: 'Month View' },
},
defaultDate: default_date,
editable: true,
selectable: true,
selectHelper: true,
eventLimit: true, // allow "more" link when too many events
eventResourceEditable: true,
/*select: function (start, end) {
addSelectedEvent(start, end);
},*/
eventConstraint: {
start: moment().format('YYYY-MM-DD HH:mm'),
end: '2100-01-01' // hard coded goodness unfortunately
},
dragRevertDuration: 1000,
eventDrop: function(event, delta,revertFunc) {
//if (!confirm('Are you sure '+ event.title + ' Moved On '+event.start.format())) {
//updateDroppableEvent(event.id,event.start.format());
var data = {
'action_update_droppable_event' : 'yes',
'event_id' : event.id,
'move_date' : event.start.format(),
};
$.ajax({
URL : '',
method : 'POST',
data : data,
dataType: 'json',
success : function(res){
if(res.status == 'success'){
$('#calendar').fullCalendar( 'renderEvent', event );
}else{
alert(res.msg);
revertFunc();
//window.location.reload();
}
},
error : function(res){
//console.log(res);
}
});
},
eventSources: [
{
url: base_url + 'admin_dashboard/render_current_events',
//url: base_url + 'admin_dashboard/get_holiday_list',
type: 'POST',
data: {
zone_id: '<?php echo $_REQUEST['zone_id'] ?>',
custom_param2: 'somethingelse'
},
error: function () {
alert('there was an error while fetching events!');
}
}
],
/* Delete Event */
eventClick: function (calEvent, jsEvent, view) {
deleteSelectedEvent(calEvent);
},
eventAfterAllRender: function (view) {
//$(".fc-event-container a").append("<span class='event_edit_popup'><i class='icon-eye-open'></i></span>");
// events: base_url + 'admin_dashboard/get_holiday_list',
}
});

Related

jsgrid need functionality to upload and show image

I am using jsGrid for showing data from database. But I am stuck with a problem.
All text field or select field are rendering correctly. But I need to add a custom field with functionality to add image on edit (when no image added) a row and show image on the field while page load using jsGrid. I searched the web but not find any solution to solve my issue.
This is how it could be implemented:
var data = [
{ Name: "John", Img: "http://placehold.it/250x250" },
{ Name: "Jimmy", Img: "http://placehold.it/250x250" },
{ Name: "Tom", Img: "http://placehold.it/250x250" },
{ Name: "Frank", Img: "http://placehold.it/250x250" },
{ Name: "Peter", Img: "http://placehold.it/250x250" }
];
$("#dialog").dialog({
modal: true,
autoOpen: false,
position: {
my: "center",
at: "center",
of: $("#jsgrid")
}
});
$("#jsgrid").jsGrid({
autoload: true,
width: 350,
filtering: true,
inserting: true,
controller: {
loadData: function(filter) {
return !filter.Name
? data
: $.grep(data, function(item) { return item.Name.indexOf(filter.Name) > -1; });
// use ajax request to load data from the server
/*
return $.ajax({
method: "GET",
url: "/YourUrlToAddItemFilteringScript",
data: filter
});
*/
},
insertItem: function(insertingItem) {
var formData = new FormData();
formData.append("Name", insertingItem.Name);
formData.append("Img[]", insertingItem.Img, insertingItem.Img.name);
return $.ajax({
method: "post",
type: "POST",
url: "/YourUrlToAddItemAndSaveImage",
data: formData,
contentType: false,
processData: false
});
}
},
fields: [
{
name: "Img",
itemTemplate: function(val, item) {
return $("<img>").attr("src", val).css({ height: 50, width: 50 }).on("click", function() {
$("#imagePreview").attr("src", item.Img);
$("#dialog").dialog("open");
});
},
insertTemplate: function() {
var insertControl = this.insertControl = $("<input>").prop("type", "file");
return insertControl;
},
insertValue: function() {
return this.insertControl[0].files[0];
},
align: "center",
width: 120
},
{ type: "text", name: "Name" },
{ type: "control", editButton: false }
]
});
Checkout the working fiddle http://jsfiddle.net/tabalinas/ccy9u7pa/16/
According issue on GitHub: https://github.com/tabalinas/jsgrid/issues/107

How to show task revisions in custom grid?

I have a custom grid that displays open tasks filtered by (Owner = some-user#company.com).
I would like to include the last revision for each task in a custom grid, but the Revision column is not available on the settings dialog. How to traverse from Revision History to individual revisions?
It can't be done with a custom grid, but can be done with a custom code. Here is an app example that populates a grid based on a selection in the UserSearchComboBox , and then displays the last revision of a selected task on a click event.
You may copy the html file into a custom page from this github repo:
Here is the js file:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var context = this.getContext ();
var currentProject = context.getProject()._ref;
var panel = Ext.create('Ext.panel.Panel', {
layout: 'hbox',
itemId: 'parentPanel',
componentCls: 'panel',
items: [
{
xtype: 'rallyusersearchcombobox',
fieldLabel: 'SELECT USER:',
project: currentProject,
listeners:{
ready: function(combobox){
this._onUserSelected(combobox.getRecord());
},
select: function(combobox){
if (this.down('#c').html !== 'No task is selected') {
Ext.getCmp('c').update('No task is selected');
}
this._onUserSelected(combobox.getRecord());
},
scope: this
}
},
{
xtype: 'panel',
title: 'Tasks',
width: 600,
itemId: 'childPanel1'
},
{
xtype: 'panel',
title: 'Last Revision',
width: 600,
itemId: 'childPanel2'
}
],
});
this.add(panel);
this.down('#childPanel2').add({
id: 'c',
padding: 10,
maxWidth: 600,
maxHeight: 400,
overflowX: 'auto',
overflowY: 'auto',
html: 'No task is selected'
});
},
_onUserSelected:function(record){
var user = record.data['_ref'];
if(user){
var filter = Ext.create('Rally.data.QueryFilter', {
property: 'Owner',
operator: '=',
value: user
});
filter = filter.and({
property: 'State',
operator: '<',
value: 'Completed'
});
filter.toString();
Ext.create('Rally.data.WsapiDataStore', {
model: 'Task',
fetch: [ 'DragAndDropRank','FormattedID','Name','State','RevisionHistory'],
autoLoad: true,
filters : [filter],
sorters:[
{
property: 'DragAndDropRank',
direction: 'ASC'
}
],
listeners: {
load: this._onTaskDataLoaded,
scope: this
}
});
}
},
_onTaskDataLoaded: function(store, data) {
var customRecords = [];
Ext.Array.each(data, function(task, index) {
customRecords.push({
_ref: task.get('_ref'),
FormattedID: task.get('FormattedID'),
Name: task.get('Name'),
RevisionID: Rally.util.Ref.getOidFromRef(task.get('RevisionHistory')),
});
}, this);
this._updateGrid(store,data);
},
_updateGrid: function(store, data){
if (!this.down('#g')) {
this._createGrid(store,data);
}
else{
this.down('#g').reconfigure(store);
}
},
_createGrid: function(store,data){
var that = this;
var g = Ext.create('Rally.ui.grid.Grid', {
id: 'g',
store: store,
enableRanking: true,
columnCfgs: [
{text: 'Formatted ID', dataIndex: 'FormattedID'},
{text: 'Name', dataIndex: 'Name'},
{text: 'State', dataIndex: 'State'},
{text: 'Last Revision',
renderer: function (v, m, r) {
var id = Ext.id();
Ext.defer(function () {
Ext.widget('button', {
renderTo: id,
text: 'see',
width: 50,
handler: function () {
console.log('r', r.data);
that._getRevisionHistory(data, r.data);
}
});
}, 50);
return Ext.String.format('<div id="{0}"></div>', id);
}
}
],
height: 400,
});
this.down('#childPanel1').add(g);
},
_getRevisionHistory: function(taskList, task) {
this._task = task;
this._revisionModel = Rally.data.ModelFactory.getModel({
type: 'RevisionHistory',
scope: this,
success: this._onModelCreated
});
},
_onModelCreated: function(model) {
model.load(Rally.util.Ref.getOidFromRef(this._task.RevisionHistory._ref),{
scope: this,
success: this._onModelLoaded
});
},
_onModelLoaded: function(record, operation) {
record.getCollection('Revisions').load({
fetch: true,
scope: this,
callback: function(revisions, operation, success) {
this._onRevisionsLoaded(revisions, record);
}
});
},
_onRevisionsLoaded: function(revisions, record) {
var lastRev = _.first(revisions).data;
console.log('_onRevisionsLoaded: ',lastRev.Description, lastRev.RevisionNumber, lastRev.CreationDate );
this._displayLastRevision(lastRev.Description,lastRev.RevisionNumber, lastRev.CreationDate );
},
_displayLastRevision:function(desc, num, date){
Ext.getCmp('c').update('<b>' + this._task.FormattedID + '</b><br/><b>Revision CreationDate: </b>' + date +'<br /><b>Description:</b>' + desc + '<br /><b>Revision Number:</b>' + num + '<br />');
}
});

sencha touch~Reset extra param when load more event fire

I need to reassign extra param when load more even fire. But I dont have any idea
Here is my code
List.js
Ext.define('bluebutton.view.BlueButton.TestingList', {
extend: 'Ext.List',
xtype: 'testinglistcard',
requires: [
'Ext.field.Select',
'Ext.field.Search',
// 'bluebutton.view.BlueButton.MemberDetail',
'Ext.plugin.ListPaging',
'Ext.plugin.PullRefresh',
'Ext.dataview.Override'
],
config: {
styleHtmlContent: true,
scrollable: 'vertical',
indexBar: true,
singleSelect: true,
onItemDisclosure: true,
grouped: true,
variableHeights : false,
store : { xclass : 'bluebutton.store.BlueButton.Testing'},
itemHeight :100,
loadingText : 'loading',
id :'testinglist',
plugins: [
{ xclass: 'Ext.plugin.PullRefresh',
refreshFn: function() {
var transaction = Ext.ModelMgr.getModel('bluebutton.model.BlueButton.Testing');
var proxy = transaction.getProxy();
proxy.setExtraParam('refresh', 'true' );
Ext.getStore('testingstore').load();
},
},
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true,
loadNextPage: function() {
var transaction = Ext.ModelMgr.getModel('bluebutton.model.BlueButton.Testing');
var proxy = transaction.getProxy();
proxy.setExtraParam('refresh', );
Ext.getStore('testingstore').load();
}
},
],
masked: {
xtype: 'loadmask',
message: 'loading...'
}, // masked
emptyText: '<p class="no-search-results">No member record found matching that search</p>',
itemTpl: Ext.create(
'Ext.XTemplate',
'<div class="tweet-wrapper">',
'<table>',
'<tr>',
'<td>',
' <div class="tweet">',
' <h3>{invoiceId}</h3>',
' <h3>Name: {billNumber}</h3>',
' <h3>Point Avalaible : {invoiceDate} , Last Visited : {invoiceAmount}</h3>',
' </div>',
'</td>',
'</tr>',
'</table>',
'</div>'
),
},
});
Store.js
Ext.define('bluebutton.store.BlueButton.Testing', {
extend: "Ext.data.Store",
requires: ['bluebutton.model.BlueButton.Testing'],
config: {
grouper: {
groupFn: function (record) {
return record.get('invoiceId')[0];
}
},
model :'bluebutton.model.BlueButton.Testing',
storeId :'testingstore',
autoLoad: true,
pageSize: 5,
clearOnPageLoad: false,
}
});
Model.js
Ext.define('bluebutton.model.BlueButton.Testing', {
extend: 'Ext.data.Model',
config: {
idProperty: 'testingModel',
fields: [
{ name :'invoiceId'},
{ name: 'billNumber' },
{ name: 'invoiceDate' },
{ name: 'invoiceAmount' },
{ name :'downloadLink'},
{ name: 'refresh' },
],
proxy: {
type: 'rest',
url: 'http://192.168.251.108:8080/RESTFulExample/rest/json/metallica/invoicejsonPost',
reader: 'json',
actionMethods: {
create: 'POST',
read: 'GET',
update: 'PUT',
destroy: 'DELETE'
},
noCache: false, // get rid of the '_dc' url parameter
// extraParams: {
// userid: "test",
// // add as many as you need
// },
reader: {
type: 'json',
rootProperty: 'invoice'
},
writer: {
type: 'json',
},
}
}
});
I need to assign extra param "refresh" to true when i refresh the list. On the other hand, if the load more event fire i need to assign param refresh to false. Please give me solution. Thanks
I dont think you can do it the way you ask. But you can listen to the load event and change your refresh parameter there.
{
xtype: 'store',
//Your Code
listeners: {
load: function(store){
store.getProxy.setExtraParam('refresh', false);
}
}
}
Hope it helps

extjs 4 drag-n-drop between 2 grids without plugin?

I am implementing Extjs 4 ( MVC) example given here with rails 3.x.
I have the following structure:
in Public dir,
Manager
-> mainapp
- controller
-> Dragdrops.js
- model
-> Dragdrop.js
- store
-> FirstDragdrops.js
-> SecondDragdrops.js
- view
-dragdrop
-> DragdropList.js
View ( DragdropList.js ) has a panel that contains 2 grids.
/* -- View - Drag n Drop list grid -- */
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*'
]);
Ext.define('mainapp.view.dragdrop.DragdropList', {
extend: 'Ext.panel.Panel',
alias : 'widget.dragdroplist',
title : 'Drag Drop List',
layout: 'hbox',
initComponent: function() {
this.items = [
{
xtype: 'grid',
title: 'First Grid',
id: 'firstgrid',
store: 'FirstDragdrops',
flex: 1, enableDragDrop : true,
ddGroup: 'mydd',
ddText: 'Shift Row',
columns : [
{text: "Item Name", sortable: true, dataIndex: 'name'},
{text: "Quantity", sortable: true, dataIndex: 'qty'},
{text: "Amount", sortable: true, dataIndex: 'amt'}
],
singleSelect:true,
listeners: {
beforerowselect: function(sm,i,ke,row){
//grid.ddText = title_str(row.data.title, null, row);
},
selectionchange: function(){
alert("Row Selected! " + this.ddText);
//grid.ddText(row.data.title, null, row);
}
}
},
{
xtype: 'grid',
title: 'Second Grid',
id: 'secondgrid',
store: 'SecondDragdrops',
flex: 2,
singleSelect: true,
enableDragDrop : true,
stripeRows: true,
columns : [
{text: "Item Name", sortable: true, dataIndex: 'name'},
{text: "Quantity", sortable: true, dataIndex: 'qty'},
{text: "Amount", sortable: true, dataIndex: 'amt'}
]
}
]
this.callParent(arguments);
}
});
But I m not able to implement the drag and drop functionality in extjs 4 (WITHOUT PLUGIN).
Any suggestions??
I think this is not perfect way, but it works in my project:
Add listener to elements you want to drag or/adn drop:
listeners: {
render: initializeDD
}
Implement d&d configuretaion method (reordering of components in my case):
function initializeDD (v) {
var el = Ext.get(v.getEl().id);
el.on('dblclick', function() {
var component = Ext.ComponentManager.get(v.getEl().id).getComponent(0);
component.focus();
}, this);
v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
ddGroup: 'blankAttsReorder',
getDragData: function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10), d;
if (sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return v.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d,
originalid: v.getEl().id
};
}
},
getRepairXY: function() {
return this.dragData.repairXY;
}
});
v.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
ddGroup: 'blankAttsReorder',
getTargetFromEvent: function(e) {
return e.getTarget('.blankbuilder-attribute');
},
onNodeOver : function(target, dd, e, data){
// specific code there
var targetN = Ext.Array.indexOf(blank.items, Ext.ComponentManager.get(target.id), 0);
var sourceN = Ext.Array.indexOf(blank.items, Ext.ComponentManager.get(data.originalid), 0);
if (targetN!=sourceN) {
blank.move(sourceN, targetN);
}
return Ext.dd.DropZone.prototype.dropAllowed;
},
onNodeDrop : function(target, dd, e, data){
Ext.ComponentManager.get(target.id).getComponent(0).blur();
}
});
}
P. S. Example of drag one type of components to another type of components (contain some project specific code):
function initializeAttributeDragZone (v) {
v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
ddGroup: 'attsToBlank',
getDragData: function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10), d;
if (sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return v.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d,
attributeData: v.getRecord(sourceEl).data
};
}
},
getRepairXY: function() {
return this.dragData.repairXY;
}
});
}
// Добавляем возможность дропать атрибуты из списка на бланк
function initializeBlankDropZone (v) {
v.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
ddGroup: 'attsToBlank',
getTargetFromEvent: function(e) {
return e.getTarget('.blankbuilder-attribute-new');
},
onNodeEnter : function(target, dd, e, data){
Ext.fly(target).addCls('blankbuilder-attribute-new-hover');
},
onNodeOut : function(target, dd, e, data){
Ext.fly(target).removeCls('blankbuilder-attribute-new-hover');
},
onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},
onNodeDrop : function(target, dd, e, data){
// some code
}
});
}

Why is my Ext Grid not populating with Data?

I'm giving the code I've used..
Please help...
The JavaScript section looks like:
Ext.define('NewsInfo', {
extend: 'Ext.data.Model',
fields: [
{ name:'news_id', mapping:'news_id', type:'int' },
{ name:'news_title', mapping:'news_title', type:'string' },
{ name:'news_summary', mapping:'news_summary', type:'string' },
{ name:'news_description', mapping:'news_description', type:'string' },
{ name:'news_source', mapping:'news_source', type:'string' },
{ name:'published_on', mapping:'published_on', type:'date', dateFormat:'Y-m-d H:i:s' },
{ name:'on_skype', mapping:'on_skype', type:'string' },
{ name:'is_active', mapping:'is_active', type:'string' },
{ name:'updated_at', mapping:'updated_at', type:'date', dateFormat:'Y-m-d H:i:s' }
]/*,
validations: [{
type: 'length',
field: 'news_title',
min: 1
}, {
type: 'length',
field: 'news_summary',
min: 1
}, {
type: 'length',
field: 'news_description',
min: 1
}]*/
});
store = new Ext.data.JsonStore({
autoLoad: true,
model: 'NewsInfo',
sortInfo: { field:'news_title', direction:'ASC'},
idProperty: 'news_id',
remoteSort: true,
proxy: new Ext.data.HttpProxy({
url: $this._s_ajax_url + '/load_news_collection/true',
method: 'POST'
}),
reader: Ext.data.JsonReader({
url: $this._s_ajax_url + '/load_news_collection/true',
fields: [
{ name:'news_id', mapping:'news_id', type:'int' },
{ name:'news_title', mapping:'news_title', type:'string' },
{ name:'news_summary', mapping:'news_summary', type:'string' },
{ name:'news_description', mapping:'news_description', type:'string' },
{ name:'news_source', mapping:'news_source', type:'string' },
{ name:'published_on', mapping:'published_on', type:'date', dateFormat:'Y-m-d H:i:s' },
{ name:'on_skype', mapping:'on_skype', type:'string' },
{ name:'is_active', mapping:'is_active', type:'string' },
{ name:'updated_at', mapping:'updated_at', type:'date', dateFormat:'Y-m-d H:i:s' }
],
root: 'records',
totalProperty: 'row_count',
successProperty: 'success'
})
});
var columns = [
{
text : 'News ID',
width : 55,
sortable : true,
hideable : false,
dataIndex: 'news_id'
},
{
text : 'News Sinossi',
width : 235,
sortable : true,
hideable : true,
dataIndex: 'news_title'
},
{
text : 'Active',
width : 75,
sortable : true,
hideable : true,
dataIndex: 'is_active',
align : 'center',
renderer : function (s_val) {
if (s_val == 'YES')
{
return '<img src="' + $this.get_skin_url('images/icons/tick_circle.png') + '" alt="' + s_val + '" title="' + s_val + '" />';
}
return '<img src="' + $this.get_skin_url('images/icons/cross_circle.png') + '" alt="' + s_val + '" title="' + s_val + '" />';
}
},
{
text : 'Last Updated',
align : 'center',
width : 95,
sortable : true,
hideable : false,
renderer : Ext.util.Format.dateRenderer('d-M-Y'),
dataIndex: 'updated_at'
},
{
xtype : 'actioncolumn',
align : 'center',
hideable: false,
width : 70,
items : [{
icon : $this.get_skin_url('images/icons/pencil.png'), // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var obj_rec = store.getAt(rowIndex);
$('#div_news_grid_container').slideUp(800);
$('#div_editor_content').slideDown(800, function () {
$('#news_id').val(obj_rec.get('news_id'));
$('#news_title').val(obj_rec.get('news_title'));
$('#news_summary').val(obj_rec.get('news_summary'));
tinyMCE.get('news_description').setContent(obj_rec.get('news_description'));
});
}
}, {
icon : $this.get_skin_url('images/icons/view.png'), // Use a URL in the icon config
tooltip: 'View',
handler: function(grid, rowIndex, colIndex) {
var obj_rec = store.getAt(rowIndex);
var s_description = "<div style=\"background-color:white !important; height:100%; overflow:auto;\">\
" + obj_rec.get('news_description') + "\
</div>";
var s_description_html = "<div style=\"background-color:white !important; height:100%; overflow:auto;\">\
<pre>\
" + obj_rec.get('description_html') + "\
</pre>\
</div>";
Ext.create('Ext.window.Window', {
renderTo: "main-content",
title: "Description for " + obj_rec.get('title_text'),
closeAction: 'hide',
minimizable: false,
maximizable: false,
resizable: true,
modal: true,
layout: 'border',
height: 350,
width: 550,
items: [{
region: 'center',
xtype: 'tabpanel',
items: [{
title: 'Preview',
html: s_description
}, {
title: 'HTML',
html: s_description_html
}]
}]
}).show();
}
}, {
icon : $this.get_skin_url('images/icons/cross.png'), // Use a URL in the icon config
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var obj_rec = store.getAt(rowIndex);
var s_news_title = obj_rec.get('title_text');
var i_news_id = obj_rec.get('news_id');
Ext.MessageBox.show({
title:'Confirm Delete',
msg: 'Do you really want to remove ' + s_news_title + '?',
buttons: Ext.MessageBox.YESNO,
icon: Ext.MessageBox.QUESTION,
closable: false,
fn: function (btn) {
if (btn == 'yes')
{
$this.delete_news(i_news_id);
}
}
});
}
}]
}
];
store.on('load', function () {
Ext.create('Ext.grid.Panel', {
store: store,
columns: columns,
height: 350,
width: 645,
title: 'News Management System',
renderTo: 'div_news_grid',
loadMask: true,
viewConfig: {
stripeRows: true
},
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', /*{
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}*/]
})
});
});
The server responds with the following:
{
"records":[
{
"news_id":"1",
"news_title":"comunicato",
"news_summary":"Un corso di lingua da seguire sempre, anche fuori sede Un problema che si riscontra frequentemente nelle",
"news_description":"<p> <\/p>\r\n <p>L\u2019estate \u00e8 alle porte e desideriamo aggiornarvi sulle attivit\u00e0 che stiamo organizzando per voi:<\/p>\r\n <p> <\/p>\r\n <p>Per i bambini e i ragazzi dai 4 ai 19 anni proponiamo un programma ricco di giochi, attivit\u00e0 pratiche, laboratori e tanto divertimento! Un\u2019occasione in pi\u00f9 per mettere in pratica le conoscenze linguistiche in un contesto diverso da quello prettamente scolastico favorendo anche il lavoro di gruppo.<\/p>\r\n <ul class=\"list01\">\r\n <li>Si pu\u00f2 scegliere di fare 1 o 2 settimane<\/li>\r\n <li>I corsi si svolgono dal 13 giugno al 1 luglio (7 \u2013 19 anni) e dal 4 al 15 luglio (4 \u2013 6 anni), dal luned\u00ec al venerd\u00ec, dalle 8.30 alle 12.30<\/li>\r\n <li>2 settimane: \u20ac 280,00<\/li>\r\n <li>1 settimana: \u20ac 150,00<\/li>\r\n <li>I gruppi verranno attivati al raggiungimento di minimo 5 partecipanti e massimo 10<\/li>\r\n <li>Al raggiungimento di 10 partecipanti ci sar\u00e0 uno sconto del 20% per ogni studente, quindi se avete amici o parenti interessati avvertiteli!<\/li>\r\n <li>Sar\u00e0 disponibile un servizio di pre e post accoglienza <\/li>\r\n <\/ul>\r\n <p>Infine vi ricordiamo che la scuola rester\u00e0 aperta per tutta l\u2019estate (eccetto dal 1 al 22 agosto) per lezioni individuali, recupero crediti scolastici e mini-gruppi.<\/p>\r\n <p> <\/p>",
"is_active":"YES",
"published_on":"2011-03-01 15:53:36",
"updated_at":"2011-05-25 20:19:12"
}
],
"row_count":1,
"success":true
}
This is tagged with extjs4, so I think this might just be a matter of changing your object configurations to match the new config options:
You have both fields and a model defined on the store. You only need the model.
idProperty is defined as part of the model now, you have it on the store
readers are defined as part of the proxy now, you have it on the store
the specialized store types are deprecated (or at least, undocumented)
Your autoLoad might be finishing before your on('load') gets registered.
sortInfo should be defined as sorters
I highly recommend always referring to the official API to determine the "appropriate" configurations. For stores: http://docs.sencha.com/ext-js/4-0/#/api/Ext.data.Store
Here is a modified (but untested) version of your code with examples of the changes to make:
Ext.define('NewsInfo', {
extend: 'Ext.data.Model',
idProperty: 'news_id',
// The rest of this should be right
});
The store configuration is pretty different, and is probably at the root of your data not loading:
var store = new Ext.data.Store({
autoLoad: {
callback: function() {
Ext.create('Ext.grid.Panel', {
// The rest of this should be right, too, pulled up from listener
});
}
},
model: 'NewsInfo',
sorters: [{ property:'news_title', direction:'ASC'}],
remoteSort: true,
proxy: {
type: 'ajax',
url: $this._s_ajax_url + '/load_news_collection/true',
method: 'POST',
reader: {
type: 'json',
root: 'records',
totalProperty: 'row_count',
successProperty: 'success'
}
})
});
I finally found my problem, its not json version.
This may seem stupid, but I was working locally on my Desktop and I was doing a Json request to the server (www.domain.com/json.php).
You can create your interface without been on server. But if you use form and submit.
Your website must also be on a server.