Develop Reference

how to get json array of Ext.tree.Panel on Extjs 4.0

I encountered a problem when I was using extjs4.0.I download data with Ext.data.TreeStore,Downloading data is a JSON array,whitch showed up in a Tree.panle with checkbox.I modified the selection state of itme and submitted it,use follow code:
var d=store.lastOptions.node.childNodes;
var postData="";
for(var i=0;i<d.length;i++)
{
postData+=JSON.stringify(d[i].data)+",";
}
postData="["+postData.substring(0,postData.length-1)+"]";
$.ajax({
url: '/test.php',
type: 'POST',
data: postData,
...
But the checked in the JSON array"{children:[{checked:false,..}{checked:false,...}]}" is always false.I guess I didn't use the correct way to get the submitted JSON data,So there will be such a mistake.
thanks every one for help.

You may try with this:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.define('Test.Window', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.button = Ext.create('Ext.button.Button', {
text: 'Send',
handler : function(btn) {
var me = btn.up('window');
var root = me.tree.getRootNode();
var a = Array();
for (var i=0; i < root.childNodes.length; i++) {
var data = root.childNodes[i].data;
a.push(
{
text: data.text,
checked: data.checked
// ... something more
}
);
}
var postData = Ext.JSON.encode({
children: a
});
alert(postData);
}
});
me.store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{
text: "detention",
checked: true,
leaf: true
},
{
text: "homework",
checked: true,
leaf: true
},
{
text: "buy lottery tickets",
checked: true,
leaf: true
}
]
}
});
me.tree = Ext.create('Ext.tree.Panel', {
useArrows: true,
autoScroll: true,
animate: true,
enableDD: false,
width: '100%',
flex: 1,
border: false,
rootVisible: false,
allowChildren: true,
store: me.store,
tbar: [
me.button
]
});
me.add(me.tree);
}
});
var win = new Test.Window({
});
win.show();
});
Fiddle can be found here.

datatables.js doesn't reload only display

Javascript from this Metronic v5.05 theme.
I have a page where I have a datatable printed and it displays fine.
I have put the whole javascript code that I use for display the table
but it is important for me that the tables reloads new data, if there is any.
I think I know how I would build this without datables.js but the guy
that I am building this project for insists I have to use it so I have to.
I have this code to make it work on my page.
//== Class definition
var Dashboard = function() {
//== Hændelser hentes
var datatableIncidents = function() {
if ($('#LOGMSGS').length === 0) {
return;
}
var datatable = $('.m_datatable').mDatatable({
layout: {
theme: 'default',
class: 'm-datatable--brand',
scroll: false,
height: null,
footer: false,
header: true,
height: 400,
smoothScroll: {
scrollbarShown: true
},
spinner: {
overlayColor: '#000000',
opacity: 0,
type: 'loader',
state: 'brand',
message: true
},
icons: {
sort: {asc: 'la la-arrow-up', desc: 'la la-arrow-down'},
pagination: {
next: 'la la-angle-right',
prev: 'la la-angle-left',
first: 'la la-angle-double-left',
last: 'la la-angle-double-right',
more: 'la la-ellipsis-h'
},
rowDetail: {expand: 'fa fa-caret-down', collapse: 'fa fa-caret-right'}
}
},
sortable: false,
pagination: true,
search: {
// search delay in milliseconds
delay: 400,
// input text for search
input: $('#generalSearch'),
},
data: {
type: 'remote',
source: {
read: {
url: 'http://beredskabsweb.dk/Template/alert-log-json.php'
}
},
pageSize: 20,
saveState: {
cookie: true,
webstorage: true
},
},
layout: {
theme: 'default',
class: '',
scroll: false,
footer: false
},
sortable: true,
filterable: true,
pagination: true,
columns: [
{
field: "alertMessageTime",
title: "Tid",
width: 100,
filterable: true,
template: function(row) {
return '<time>'+row.alertMessageTime+'</time>';
},
},
{
field: "alertMessageText",
title: "Text",
filterable: true,
template: function(row) {
return row.alertMessageText;
},
},
{
field: "alertMessageAuthor",
title: "Forfatter",
width: 240,
filterable: true,
template: function(row) {
return ''+row.MemberUsername+'';
},
},
]
});
}
return {
//== Init demos
init: function() {
// datatables
datatableIncidents();
setInterval( function () { datatableIncidents();},4000);
}
};
}();
//== Class initialization on page load
jQuery(document).ready(function() {
Dashboard.init();
setInterval(Dashboard,2000);
});
As you see i have tried to put this code in the bottom so that it should reload, but it doesn't.
setInterval(Dashboard,2000)

You can use the reload api by metronic. You can see the docs here
http://keenthemes.com/metronic/documentation.html#sec14-5
First, you should export your datatable variable from the class so you can use it for other use like add function to reload the table or etc. I added below line:
return {
datatable: function() {
return datatable;
}
};
After that, you also should create function to reload the table by the variable we just export before and by using reload api by metronic.
reload: function {
demo().datatable().reload();
}
Complete code:
//== Class definition
var Dashboard = function() {
//== Hændelser hentes
var datatableIncidents = function() {
if ($('#LOGMSGS').length === 0) {
return;
}
var datatable = $('.m_datatable').mDatatable({
layout: {
theme: 'default',
class: 'm-datatable--brand',
scroll: false,
height: null,
footer: false,
header: true,
height: 400,
smoothScroll: {
scrollbarShown: true
},
spinner: {
overlayColor: '#000000',
opacity: 0,
type: 'loader',
state: 'brand',
message: true
},
icons: {
sort: {asc: 'la la-arrow-up', desc: 'la la-arrow-down'},
pagination: {
next: 'la la-angle-right',
prev: 'la la-angle-left',
first: 'la la-angle-double-left',
last: 'la la-angle-double-right',
more: 'la la-ellipsis-h'
},
rowDetail: {expand: 'fa fa-caret-down', collapse: 'fa fa-caret-right'}
}
},
sortable: false,
pagination: true,
search: {
// search delay in milliseconds
delay: 400,
// input text for search
input: $('#generalSearch'),
},
data: {
type: 'remote',
source: {
read: {
url: 'http://beredskabsweb.dk/Template/alert-log-json.php'
}
},
pageSize: 20,
saveState: {
cookie: true,
webstorage: true
},
},
layout: {
theme: 'default',
class: '',
scroll: false,
footer: false
},
sortable: true,
filterable: true,
pagination: true,
columns: [
{
field: "alertMessageTime",
title: "Tid",
width: 100,
filterable: true,
template: function(row) {
return '<time>'+row.alertMessageTime+'</time>';
},
},
{
field: "alertMessageText",
title: "Text",
filterable: true,
template: function(row) {
return row.alertMessageText;
},
},
{
field: "alertMessageAuthor",
title: "Forfatter",
width: 240,
filterable: true,
template: function(row) {
return ''+row.MemberUsername+'';
},
},
]
});
return {
datatable: function() {
return datatable;
}
};
}
return {
//== Init demos
init: function() {
// datatables
datatableIncidents();
setInterval( function () { datatableIncidents();},4000);
},
reload: function {
demo().datatable().reload();
}
};
}();
//== Class initialization on page load
jQuery(document).ready(function() {
Dashboard.init();
setInterval(Dashboard.reload(),2000);
});

ExtJS 3.0.0: GridPanel in a Window with an ArrayStore not rendering any data

I'm trying to put a GridPanel powered by an ArrayStore in a Window, but no matter what I do, it just looks like this with no data rows inside:
Here's my code:
var ticketsStore = new Ext.data.ArrayStore
(
{
autoDestroy: false,
remoteSort: false,
data: result,
fields:
[
{ name: 'articleId', type: 'int' },
{ name: 'heatTicketRef', type: 'string' },
{ name: 'username', type: 'string' },
{ name: 'dateLinked', type: 'date' }
]
}
);
var ticketsGrid = new Ext.grid.GridPanel({
store: ticketsStore,
id: this.id + 'ticketsGrid',
viewConfig: {
emptyText: 'No data'
},
autoShow: true,
idProperty: 'heatTicketRef',
columns: [
{ id: 'heatTicketRef', header:"Ticket ID", width: 100, dataIndex: 'heatTicketRef', sortable: false },
{ header: "User", width: 100, dataIndex: 'username', sortable: false },
{ header: "Date Linked", width: 100, dataIndex: 'dateLinked', xtype: 'datecolumn', format: 'j M Y h:ia', sortable: false }
]
});
var window = new Ext.Window
(
{
renderTo: Ext.getBody(),
id: this.id + 'linkedHeatTickets',
closable: true,
modal: true,
autoHeight: true,
width: 500,
title:'Linked Heat Tickets',
resizable: false,
listeners:
{
close: function () { // do something }
},
items:
{
style: 'padding:5px;',
items: ticketsGrid
},
buttons:
{
text: 'Close',
handler: function () {
window.close();
}
}
}
);
window.show();
When I debug, I can see that my "result" object is healthy and the ArrayStore is of the right length:
But the GridPanel doesn't like the data because it's not in its items (although it's in the store) array:
What little thing have I done wrong?
Thanks!

Because I'm an idiot... I used an ArrayStore instead of a JsonStore!

Using Kendo Grid with Server Side Filters and Server Side Sorting, Field = NULL?

I'm using A Kendo Grid, With Server Side Filtering and Server Side Sorting. In my Data Source Transport Read method the field is always null. Any Suggestions?
This my code for initializing the Grid:
var gridDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("Read", "GridModule")',
type: 'POST',
contentType: 'application/json'
},
parameterMap: function (options) {
options.assignmentFilters = assignmentFilters;
return JSON.stringify(options);
}
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
schema: {
model: {
fields: {
LastSurveyDate: { type: "date" },
LastNoteDate: { type: "date" }
}
},
data: "data",
total: "totalRows"
}
});
var $grid = $('#gridAssignments');
if (e.firstLoad) {
$grid.kendoGrid({
scrollable: true,
pageable: {
refresh: true,
pageSizes: [20, 50, 100, 500, 1000],
buttonCount: 12,
messages: {
display: "Showing {0}-{1} from {2} Provider Contacts",
empty: "No Contacts Match the Filter Criteria",
itemsPerPage: "Contacts per page"
}
},
reorderable: true,
navigatable: true,
change: gridOnChange,
dataBound: gridOnDataBound,
dataSource: gridDataSource,
columnReorder: gridColumnReorder,
columnHide: gridColumnHide,
columnResize: gridColumnResize,
columnShow: gridColumnShow,
columnMenu: {
sortable: false,
messages: {
columns: "Choose columns",
filter: "Filter",
}
},
resizable: true,
height: '720px',
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
},
date: {
lt: "Is before",
gt: "Is after",
equal: "On"
}
}
},
selectable: "row",
sortable: {
mode: "single",
allowUnsort: true
},
columns: [ #Html.Raw(Model.GridColumns.Columns) ]
});
} else {
$grid.data('kendoGrid').setDataSource(gridDataSource);
}

For anyone that runs into the same problem...
In my case my code worked fine until I added two fields to the Schema.Model.Fields. Then for some reason the Field in my read method of my Grid Module was NULL. By default it all fields were treated as strings but when I added the two new properties then No default was used.
I had to add all my Grid's fields
schema: {
model: {
fields: {
LastSurveyDate: { type: "date" },
LastNoteDate: { type: "date" },
FirstName: { type: "string" },
LastName: { type: "string" },
HasNewEval: { },
HasCommitmentsToGet: { },
OnPriorityList: { type: "string" },
HasProductsBelowMinimum: { type: "HasProductsBelowMinimum" },
Points: {},
Title: { type: "string" },
Provider: { type: "string" },
Phone: { type: "string" },
TimeZone: { type: "string" },
Touches: { type: "string" },
LastNoteText: { type: "string" },
VerbalAging: { type: "string" }
}
},
That worked for me.

Is it possible to have full CRUD functions in kendo grid with local data

I'm currently implementing a kendo grid and i'm populating it with local data.
That is; I have generated a JSON string from my action and supplying that string on the view page.
In the end i would like to know if it is possible to implement full CRUD functions with local data?
here's a sample of the code written so far;
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function() {
var myData = ${coursemodules},
dataSource = new kendo.data.DataSource({
data: myData,
batch: true,
pageSize: 30,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true},
name: { type: "string", validation: { required: true }},
qualificationLevel: { type: "string", validation: { required: true }},
description: { type: "string", validation: { required: true }},
published: { type: "boolean" },
gateApprove: { type: "boolean" },
duration: { type: "number", validation: { min: 1, required: true } },
academicBody: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 350,
scrollable: true,
sortable: true,
pageable: true,
toolbar: ["create", "save", "cancel"],
columns: [
{
field: "id",
title: "ID",
width: '3%'
},
{
field: "name",
title: "Course Title",
width: '20%'
},
{
field: "description",
title:"Description",
width: '35%'
},
{
field: "published",
title: "Published",
width: '7%'
},
{
field: "gateApprove",
title: "Gate Approve",
width: '7%'
},
{
field: "duration",
title: "Duration",
width: '5%'
},
{
field: "academicBody.shortName",
title: "Academic Body",
width: '10%'
}
],
editable: true
});
});
</script>
</div>
I have realise that for the datasource, you have to declare transport to implement the CRUD. However, I need to declare "data". I tried declaring both transport and data. That doesn't seem to work.

Yes you can Here is JSFiddle Hope this will help you.
// this should be updated when new entries are added, updated or deleted
var data =
[{
"ID": 3,
"TopMenuId": 2,
"Title": "Cashier",
"Link": "www.fake123.com"},
{
"ID": 4,
"TopMenuId": 2,
"Title": "Deposit",
"Link": "www.fake123.com"}
];
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function(options) {
options.success(data);
},
create: function(options) {
alert(data.length);
},
update: function(options) {
alert("Update");
},
destroy: function(options) {
alert("Destroy");
alert(data.length);
}
},
batch: true,
pageSize: 4,
schema: {
model: {
id: "ID",
fields: {
ID: {
editable: false,
nullable: true
},
TopMenuId: {
editable: false,
nullable: true
},
Title: {
editable: true,
validation: {
required: true
}
},
Link: {
editable: true
}
}
},
data: "",
total: function(result) {
result = result.data || result;
return result.length || 0;
}
}
},
editable: true,
toolbar: ["create", "save", "cancel"],
height: 250,
scrollable: true,
sortable: true,
filterable: false,
pageable: true,
columns: [
{
field: "TopMenuId",
title: "Menu Id"},
{
field: "Title",
title: "Title"},
{
field: "Link",
title: "Link"},
{
command: "destroy"}
]
});

When binding local data, the Grid widget utilizes an abstraction that represents a local transport. Therefore, it does not require a custom transport; modifications made in the grid are reflected to the bound data source. This includes rollbacks through a cancellation.

There is fully functional example of this in telerik documentation
What you need is define transport block in dataSource object with custom CRUD funtions which update local source.
transport: {
create: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.data.ID = localData[localData.length-1].ID + 1;
localData.push(options.data);
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
read: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.success(localData);
},
update: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID == options.data.ID){
localData[i].Value = options.data.Value;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
destroy: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID === options.data.ID){
localData.splice(i,1);
break;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(localData);
},
}