binding sql data with jquery grid usin g handler file - sql-server-2005

i have a jquery grid which has to be binded with values from sql data,
i have the following code where i would get the data to be binded to the grid in "data1 " variable.the problem i dont know how to bind the data to the jquery grid
$(document).ready(function() {
var data1 = "";
$.ajax({
datatype: 'json',
url: 'Handler1.ashx?method=Ttest',
success: function(val) {
debugger;
data1 = val;
}
});
$('#list').jqGrid({
mtype: 'GET',
colNames: ['key_user', 'UserName', 'Status', 'LoggedIn', 'LoggedOut', 'duration'],
colModel: [
{ name: 'key_user', index: 'key_user', width: 55 },
{ name: 'UserName', index: 'UserName', width: 90 },
{ name: 'Status', index: 'Status', width: 80, align: 'right' },
{ name: 'LoggedIn', index: 'LoggedIn', width: 80, align: 'right' },
{ name: 'LoggedOut', index: 'LoggedOut', width: 80, align: 'right' },
{ name: 'duration', index: 'duration', width: 150, sortable: false}],
sortname: 'invid',
sortorder: 'desc',
viewrecords: true,
caption: 'User Time Log Details'
});
});

Related

JQgrid is not loading data when i redirect from one page to another in asp.net mvc4

i have an issue with my jqgrid in asp.net mvc4. i am creating user form, in this i will be adding data to user details, and when i click submit, it will be added to the database, and based on its result it will redirect to the respective page.
If adding is success, then it will be redirected to userlist page, where i have my JQgrid,the problem is, i can see the grid, but no data is there in the grid. What would be my issue.
My controller code to add a new user looks like this:
public ActionResult CreateNewUser(Tbl_Users tbl_users)
{
int userId = 1;
tbl_users.CreatedBy = userId;
tbl_users.CreatedOn = DateTime.Now;
tbl_users.ModifiedBy = null;
tbl_users.ModifiedOn = null;
if (ModelState.IsValid)
{
db.Tbl_Users.Add(tbl_users);
db.SaveChanges();
return RedirectToAction("**ListUsers**", "**Admin**");
}
ViewBag.UserCity = new SelectList(db.Tbl_Mst_City, "CityId", "CityName", tbl_users.UserCity);
ViewBag.UserDesignation = new SelectList(db.Tbl_Mst_Designation, "DesignationID", "Designation", tbl_users.UserDesignation);
ViewBag.RoleId = new SelectList(db.Tbl_Roles, "RoleID", "Role", tbl_users.RoleId);
ViewBag.CreatedBy = new SelectList(db.Tbl_Users, "UserID", "UserName", tbl_users.CreatedBy);
return View(tbl_users);
}
And My controller action to load my grid is
public ActionResult ListUsers()
{
return View();
}
public JsonResult GetUSerDetails(string sidx = "UserID", string sord = "asc", int page = 1, int rows = 5)
{
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = db.Tbl_Users.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var userdata = db.Tbl_Users.OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize)
.Select(u =>
new
{
u.UserID,
u.UserName,
u.UserEmail,
u.UserMobile,
u.UserCity,
u.UserDesignation,
u.RoleId,
u.CreatedBy,
u.CreatedOn
}).ToList();
var jsonData = new
{
total = totalPages,
page,
records = totalRecords,
rows = (
from u in userdata.AsEnumerable()
select new
{
i = u.UserID,
cell = new string[] { u.UserID.ToString(), u.UserName, u.UserEmail, u.UserMobile, u.UserCity.ToString(), u.UserDesignation.ToString(), u.RoleId.ToString(), u.CreatedBy.ToString(), u.CreatedOn.ToString() }
}).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
My View Page For the List User and JQgrid is looks like this:
#model FSLIWeb.Models.Tbl_Tasks
#{
ViewBag.Title = "ListUsers";
Layout = "~/Views/Shared/AdminDashboardLayout.cshtml";
}
#Html.ActionLink(" User List", "Index")
<h2>Index</h2>
<table id="jQGridDemo" width:"1024px">
</table>
<div id="jQGridDemoPager" style="width:100%">
</div>
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
url: 'Admin/GetUserDetails',
datatype: "json",
colNames: ['UserID','UserName','UserEmail','Contact Num','City','UserDesignation','RoleId','CreatedBy','CreatedOn'],
colModel: [
{ name: 'UserID', index: 'UserID', width: 75, align: 'center', sortable: true, editable: false, key: true, editrules: { required: true} },
{ name: 'UserName', index: 'UserName', width: 120, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
{ name: 'UserEmail', index: 'UserEmail', width: 100, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
{ name: 'UserMobile', index: 'UserMobile', width: 100, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
{ name: 'City', index: 'City', width: 100, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
{ name: 'UserDesignation', index: 'UserDesignation', width: 85, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
{ name: 'RoleId', index: 'RoleId', width: 70, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
{ name: 'CreatedBy', index: 'CreatedBy', width: 70, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} },
{ name: 'CreatedOn', index: 'CreatedOn', width: 70, align: 'center', sortable: true, editable: true, edittype: 'text', editrules: { required: true} }
],
mtype: 'GET',
loadonce: true,
rowList: [5, 10, 20, 30],
pager: '#jQGridDemoPager',
sortname: 'UserID',
viewrecords: true,
sortorder: 'desc',
width:"100%",
caption: "List Of Users",
//editurl: "//EditUser/"
});
jQuery("#jQGridDemo").jqGrid('navGrid', '#jQGridDemoPager',
{ edit: true, add: true, del: true, search: true },
{ url: "/Admin/EditUser/", closeAfterEdit: true, beforeShowForm: function (formid) { $("#UserID", formid).hide(); } },
{ url: "/Admin/AddNewUser/", closeAfterAdd: true, beforeShowForm: function (formid) { $("#UserID", formid).hide(); } },
{ url: "/Admin/DeleteUser/" }, {});
$("#search").filterGrid("#grid", {
gridModel: false,
filterModel: [{
label: 'Search',
name: 'search',
stype: 'text'
}]
});
</script>
Your Valuable Suggestion will help me to get solved this problem.
Thanks in Advance
The data URL in the jqGrid definition should be like this:
jQuery("#jQGridDemo").jqGrid({
url: '/Admin/GetUserDetails',
...
});

Jqgrid filtering not working for complete word and data

Filtering of jqgrid client side. The Problems iam facing are:
Filtering is working only in two columns(Project Ref and Project name in the below code) and only or some part of the word.
Filtering is not working for the data which is coming another table. I am using two datatables for retrieving of data. Works only for the direct table doesnt work for referenced table data.
Can I have theesearch without Loadonce true.Because it is not allowing to reload
I have tried with the following below code let me know where iam doing wrong
In view:
$(document).ready(function () {
$("a.button").button();
var url = '#Url.Action("ListAllProjects")' + '?s_partId=' + '#ViewBag.PartId';
var colNames = ['<input type="checkbox" onclick="CheckAll(this.checked,\'chkOF_\',event);" name="checkall">',
'Status',
'Project Ref',
'Project Name',
'Customer',
'CreatedBy',
'Creation Date',
'Last Modified',
'LastModifiedDate',
'Edit'];
var colModel = [
{ name: 'ProjectId', index: 'ProjectId', align: 'left', formatter: checkFormatter, width: 20, search: true },
{ name: 'ProjectStatusId', index: 'ProjectStatusId', edittype: 'image', align: 'left', width: 70, formatter: imageFormatter, search: true },
{ name: 'ProjectReference', index: 'ProjectReference', align: 'left', width: 100, formatter: 'showlink', formatoptions: { "baseLinkUrl": "/Ordernew/Home" }, search: true },
{ name: 'ProjectName', index: 'ProjectName', align: 'left', width: 150, formatter: 'showlink', formatoptions: { "baseLinkUrl": "/Ordernew/Home" }, search: true },
{ name: 'CustomerName', index: 'CustomerName', align: 'left', width: 150, search: true },
{ name: 'CreatedBy', index: 'CreatedBy', align: 'left', width: 150, search: true },
{ name: 'CreationDate', index: 'CreationDate', align: 'left', width: 100, formatter: 'date', formatoptions: { srcformat: 'ISO8601Long', newformat: 'd-M-y h:m A' }, search: true },
{ name: 'LastModifiedBy', index: 'LastModifiedBy', align: 'left', width: 100, search: true },
{ name: 'LastModifiedDate', index: 'LastModifiedDate', align: 'left', width: 100, formatter: 'date', formatoptions: { srcformat: 'ISO8601Long', newformat: 'd-M-y h:m A' }, search: true },
{ name: 'StatusId', index: 'ProjectStatusId', formatter: myCustomFormatter, align: 'left', width: 70, search: true },
];
var sortname = 'ProjectStatusId';
var sortorder = 'desc';
SetGrid('#jqgprojectnew', '', url, colNames, colModel, sortname, sortorder, -1,'#count',true);
$("#jqgprojectnew").jqGrid('filterToolbar',
{
stringResult: true,
searchOnEnter: false,
defaultSearch: "cn"
});
});
And setting the grid like this which is common for all the grids. But i need search only for the above grid:
function SetGrid(v_gridCtrl,v_pagingCtrl, v_url, v_colNames, v_colModel, v_sortname, v_sortorder, v_Pagesize,Count,Loadonce) {
if (v_Pagesize == undefined)
v_Pagesize = 100;
$(v_gridCtrl).jqGrid({
//url from wich data should be requested
autowidth: true,
url: v_url,
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
//columns names
colNames: v_colNames,
//columns model
colModel: v_colModel,
//pager for grid
pager: $(v_pagingCtrl),
//enable dynamic scrolling
//scroll: true,
//enable npage request parameter
prmNames: { npage: 'npage' },
//number of rows per page
rowNum: v_Pagesize,
rowList: [10, 30, 60, 90, 100, 150, -1],
loadComplete: function () {
$("option[value=-1]").text('All');
$(Count).html($(v_gridCtrl).getGridParam("reccount"));
},
loadonce:Loadonce,
//initial sorting column
sortname: v_sortname,
//initial sorting direction
sortorder: v_sortorder,
//we want to display total records count
viewrecords: true,
//grid height
height: 400,//'100%',
//width: '100%',
scrollOffset: 0,
shrinkToFit: true,
});
}
Code for Adding record :
public bool AddUpdateOrderField(ProjectViewModelNew obj)
{
var rec = new Project
{
ProjectID = Guid.NewGuid(),
ProjectDetail = obj.ProjectDetail,
CustomerId =obj.Id,
ProjectName = obj.ProjectName,
CreatedBy = new UserManager().Userid(),
CreationDate = DateTime.Now,
LastModifiedBy = new UserManager().Userid(),
ProjectRef = obj.ProjectRef,
ProjectStatusId = obj.ProjectStatusId,
LastModifiedDate = DateTime.Now,
OwnerID = new Guid("BEBB9E61-1F06-4762-80D8-5E4D554EAEB5")
};
_context.Projects.AddObject(rec);
_context.SaveChanges();
return true;
}
If you are using local search, you should set loadonce =true and it doesn't matter, from how many tables your data is fetched to the jqgrid. If you want to make loadonce=false, then you should post search criteria to server and perform a database search.
And try removing stringResult: true, to solve your first issue
To make the search case insensitive, add this to jqgrid properties:
ie ;
$(v_gridCtrl).jqGrid({
//url from wich data should be requested
autowidth: true,
.....
ignoreCase:true,
...}
And to reload the grid, try the following code:
$( v_gridCtrl ).trigger( 'reloadGrid', [{ page: 1}] );

ExtJs:Show Grid after Button is clicked

I have a form in which the values for the Grid is populated as soon as the Form is displayed.But i need to populate the grid after the button is clicked based on text box values.
ExtJs:
var url = location.href.substring(0,location.href.indexOf('/', 14));
var grid;
var store;
var userStore;
Ext.onReady(function(){
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
Ext.define('userList', {
extend: 'Ext.data.Model',
fields: [{ name: 'id', mapping: 'id' },
{ name: 'name', mapping: 'name' },
{ name: 'firstName' ,mapping:'personalInfo.firstName'},
{ name: 'lastName' ,mapping:'personalInfo.lastName'},
{ name: 'gender' ,mapping:'personalInfo.gender'},
{ name: 'email' ,mapping:'personalInfo.address.email'}
]
});
store = Ext.create('Ext.data.Store', {
model: 'userList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/users/getUser',
reader: {
type: 'json',
root: 'Users'
}
}
});
function swapStrore(){
//userStore = store;
userStore = Ext.create('Ext.data.Store', {
model: 'userList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/users/getUser',
reader: {
type: 'json',
root: 'Users'
}
}
});
Ext.getCmp('userGrid').getView().refresh();
return userStore;
}
function updateUsers(id){
window.location = url+'/lochportal/createUser.do';
}
var searchUsers = new Ext.FormPanel({
renderTo: "searchUsers",
frame: true,
title: 'Search Users',
bodyStyle: 'padding:5px',
width: 900,
items:[{
xtype:'textfield',
fieldLabel: 'Username',
name: 'userName'
},{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'firstName'
},{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'lastName'
},
{
xtype: 'button',
text: 'Search',
listeners: {
click: function(){
Ext.Ajax.request({
method:'GET',
url : url+'/lochweb/loch/users/getUser',
params : searchUsers.getForm().getValues(),
success : function(response){
//console.log(response);
//swapStrore();
}
});
}
}
},{
xtype: 'button',
text: 'Cancel',
listeners: {
click: function(){
window.location = url+'/lochportal/viewSuccessForm.do';
}
}
},
grid = Ext.create('Ext.grid.Panel', {
//plugins: [rowEditing],
id:'userGrid',
width: 900,
height: 300,
frame: true,
store: store,
iconCls: 'icon-user',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
},
{
text: 'Name',
flex: 1,
sortable: true,
dataIndex: 'name',
field: {
xtype: 'textfield'
}
},
{
text: 'FirstName',
flex: 1,
sortable: true,
dataIndex: 'firstName',
field: {
xtype: 'textfield'
}
},
{
text: 'LastName',
flex: 1,
sortable: true,
dataIndex: 'lastName',
field: {
xtype: 'textfield'
}
},
{
text: 'Gender',
flex: 1,
sortable: true,
dataIndex: 'gender',
field: {
xtype: 'textfield'
}
},
{
text: 'Email',
flex: 1,
sortable: true,
dataIndex: 'email',
field: {
xtype: 'textfield'
}
},
{
xtype: 'actioncolumn',
width: 50,
items:[{
icon : '/lochportal/extJS/resources/themes/images/access/window/edit.gif', // Use a URL in the icon config
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
//alert("Sell " + rec.get('id'));
updateUsers(rec.get('id'));
}
}]
}]
})]
});
var win = new Ext.Window({
layout:'fit',
closable: false,
resizable: true,
plain: true,
border: false,
items: [searchUsers]
});
win.show();
});
How to populate the grid after search button is clicked?
Thanks
Use bindStore() method of the grid to assign new or different store to grid which is already displayed. If you want to first show an empty grid - either filter all records out or assign store property to null initially.

Setting the reader on a extjs store

I have a store on extjs4 that return a list of objects, and i want to set the reader property to be able to count the elements so i can use paging afterward.
For reference, the example that extjs use already comes with a count property(totalCount) and the type of object listed(topics), while mine dont have it, just the list.
for reference:
example
Also, in my code the grid doesnt recognize the limit of results per page, but the paging toolbar does:
var sm = Ext.create('Ext.selection.CheckboxModel');
Ext.define('Cliente', {
extend: 'Ext.data.Model',
fields: [{
name: 'ID',
type: 'int'
}, {
name: 'Nome',
type: 'string'
}, {
name: 'Email',
type: 'string'
}, {
name: 'RazaoSocial',
type: 'string'
}, {
name: 'TipoDeCliente',
type: 'string'
}],
idProperty: 'ID'
});
var store = Ext.create('Ext.data.Store', {
pageSize: 3,
model: 'Cliente',
remoteSort: true,
proxy: {
type: 'ajax',
url: 'http://localhost:4904/Cliente/ObterClientes',
extraParams: {
nome: '',
tipopessoa: '',
email: '',
cpf: '',
estado: '',
cidade: '',
cep: ''
},
reader: {
type: 'json',
root: 'data'
},
simpleSortMode: true
},
sorters: [{
property: 'Email',
direction: 'DESC'
}]
});
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
width: 500,
height: 250,
title: 'Array Grid',
store: store,
selModel: sm,
loadMask: true,
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false
},
columns: [{
id: 'gridid',
text: "ID",
dataIndex: 'ID',
hidden: true
}, {
text: 'Nome',
width: 150,
sortable: true,
dataIndex: 'Nome'
}, {
text: 'Tipo de Cliente',
width: 100,
sortable: true,
dataIndex: 'TipoDeCliente'
}, {
text: 'Email',
width: 150,
sortable: true,
dataIndex: 'Email'
}],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Exibindo clientes {0} - {1} of {2}',
emptyMsg: "Nenhum cliente"
}),
renderTo: 'clientes',
});
store.loadPage(1);
The store needs the total count to calculate the paging parameters and to show the total. Your server side implementation must change to add that count with your data.
Also load the data like this store.load(); instead of loadPage.
EDIT: you also have an extra comma here: renderTo: 'clientes', I would suggest running your code through JSLint.

extjs4 ajax api store update

I'm trying to update my store and then database after using cellediting and a combobox in a gridpanel to update a record. The update operation.action in the ajax proxy is firing correctly, it just that the store and the grid aren't syncronizing, and the post tab in firebug says my json looks like this: 'data []'. How do I get the store record to create the json and update the record? Thanks for looking at this in advance...
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '/extjs4/examples/ux');
Ext.require([
'Ext.layout.container.Fit',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.panel.*',
'Ext.selection.CellModel',
'Ext.state.*',
'Ext.form.*',
'Ext.ux.CheckColumn']);
Ext.define('Ext.app.HirePlanGrid', {
extend: 'Ext.panel.Panel',
alias: 'widget.hirePlangrid',
hireplanstoreId: 'hireplanstore',
hiremonthstoreId: 'hiremonthstore'
,
renderMonth: function (value, p, record) {
var fkStore = Ext.getStore(this.up('hirePlangrid').hiremonthstoreId);
var rec = fkStore.findRecord("MONTH_ID", value);
//return rec.get("ABBREVIATED_MONTH");
}
,
initComponent: function () {
var rIdx = '';
var cIdx = '';
this.editing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
'beforeedit': function (e) {
var me = this;
var allowed = !! me.isEditAllowed;
if (!me.isEditAllowed) Ext.Msg.confirm('confirm', 'Are you sure?', function (btn) {
if (btn !== 'yes') return;
me.isEditAllowed = true;
me.startEditByPosition({
row: e.rowIdx,
column: e.colIdx
});
});
rIdx = e.rowIdx;
cIdx = e.colIdx;
// alert('rIdx= ' + rIdx + ' cIdx = ' + cIdx);
return allowed;
},
'edit': function (e) {
this.isEditAllowed = true;
}
}
});
var objMonthStore = Ext.getStore(this.hiremonthstoreId);
objMonthStore.load();
var objStore = Ext.getStore(this.hireplanstoreId);
objStore.setProxy({
type: 'ajax',
url: 'hireplan.cfc?method=getEmployees'
});
objStore.load();
var onDeleteClick = function (field, value, options) {
// var objPanel = this.down('gridpanel');
var selection = Ext.getCmp('grid').getSelectionModel().getSelection();
// alert(selection);
//var selection = getView().getSelectionModel().getSelection()[r];
if (value) {
//alert(value);
objStore.remove(value);
objStore.sync();
}
};
var onUpdateClick = function (field, value, options) {
alert('field= ' + field + ' value= ' + value + 'options= ' + options);
objStore.update(this.hireplanstoreId, value, 'update', options);
onSync();
};
var onSync = function () {
objStore.sync();
};
Ext.apply(this, {
layout: 'fit',
width: 800,
//height: 1500,
items: [{
xtype: 'grid',
id: 'gridgrid',
//height: 300,
store: objStore,
selModel: {
selType: 'cellmodel'
},
selType: 'rowmodel',
plugins: [this.editing],
// plugins: [cellEditing],
columnLines: true,
viewConfig: {
stripeRows: true
},
//loadMask: true,
disableSelection: true,
columns: [{
header: 'rowid',
hidden: true,
dataIndex: 'ROWID'
}, {
header: 'Indicator',
id: 'chkcolumn',
xtype: 'checkcolumn',
dataIndex: 'CHK_COL',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
},
listeners: {
checkchange: function (column, recordIndex, checked) {
alert('checked rindex= ' + recordIndex);
onDeleteClick(column, recordIndex, checked);
//or send a request
}
}
}, {
id: 'employeeid',
header: 'employeeid',
width: 80,
hidden: false,
sortable: true,
dataIndex: 'EMPLOYEEID',
flex: 1
}, {
id: 'NATIONALIDNUMBER',
header: 'NATIONALIDNUMBER',
width: 80,
sortable: true,
dataIndex: 'NATIONALIDNUMBER',
flex: 1
}, {
id: 'MARITALSTATUS',
header: 'MARITALSTATUS',
width: 80,
sortable: true,
dataIndex: 'MARITALSTATUS',
flex: 1
}, {
id: 'PotentialforInsourcingKV',
header: 'Potential for Insourcing',
width: 30,
sortable: true,
dataIndex: 'POTENTIAL_FOR_INSOURCING',
flex: 1,
editor: {
id: 'thiscombo',
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
['1', 'Yes'],
['0', 'No']
],
lazyRender: true,
listClass: 'x-combo-list-small',
listeners: {
scope: this,
'select': function () {
var selval = Ext.getCmp('thiscombo').getValue();
var row = rIdx;
//alert(selval + ' ' + rIdx);
onUpdateClick('thiscombo', rIdx, selval);
}
}
}
}, {
id: 'ABBREVIATED_MONTH',
header: 'ABBREVIATED_MONTH',
width: 80,
sortable: true,
dataIndex: 'ABBREVIATED_MONTH',
flex: 1,
renderer: this.renderMonth,
field: {
xtype: 'combobox',
store: Ext.getStore(this.hiremonthstoreId),
typeAhead: true,
lazyRender: true,
queryMode: 'local',
displayField: 'ABBREVIATED_MONTH',
valueField: 'MONTH_ID',
listClass: 'x-combo-list-small'
}
}, {
id: 'SALARIEDFLAG',
header: 'SALARIEDFLAG',
width: 80,
sortable: true,
dataIndex: 'SALARIEDFLAG',
flex: 1
}],
features: [{
ftype: 'rowbody'
}]
}]
});
this.callParent(arguments);
}, //initComponent
onSelectChange: function (selModel, selections) {
this.down('#delete').setDisabled(selections.length === 0);
},
viewConfig: {},
});
// JavaScript Document
// JavaScript Document
hireplanstore = Ext.create("Ext.data.Store", {
model: 'HiringPlan',
//autoLoad: true,
//autoSync: true,
buffered: true,
storeId: 'hireplanstore',
remoteFilter: true
,
proxy: {
type: 'ajax',
simpleSortMode: true,
api: {
read: 'hireplan.cfc?method=GetEmployees',
update: 'hireplan.cfc?method=upEmployees',
destroy: 'hireplan.cfc?method=delEmployees'
},
reader: {
type: 'json',
messageProperty: 'message',
successProperty: 'success',
root: 'data'
},
writer: {
type: 'json',
writeAllFields: false,
root: 'data'
},
listeners: {
exception: function (proxy, response, operation) {
Ext.MessageBox.show({
title: 'ERROR from store',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});
//hireplanstore.pageSize = 10000;
Ext.define('HiringPlan', {
extend: 'Ext.data.Model',
fields: [{
name: 'ROWID',
type: 'string'
}, {
name: 'EMPLOYEEID',
type: 'string'
}, {
name: 'NATIONALIDNUMBER',
type: 'string'
}, {
name: 'MARITALSTATUS',
type: 'string'
}, {
name: 'GENDER',
type: 'string'
}, {
name: 'POTENTIAL_FOR_INSOURCING',
type: 'integer'
}, {
name: 'ABBREVIATED_MONTH',
type: 'string'
}, {
name: 'SALARIEDFLAG',
type: 'string'
}, {
name: 'CHK_COL',
type: 'bool'
}]
});
In order to update correctly your ajax or rest call have to return an array containing the updated records, even if it's a single record, you have to return it inside an array, a sample json response (for the rest proxy) should be like this:
[{'id': 1, 'name': 'test', 'foo': 'bar'}]