We Keep Coding

Ext JS grid sort sent as a String instead of JSON

I am trying to implement server-side sorting with Sencha Ext JS and noticed something odd. The paging portion of the JSON looks fine but the sort property is set as a String and not an Array:
Actual:
{"page":1,"start":0,"limit":50,"sort":"[{\"property\":\"firstName\",\"direction\":\"ASC\"}]"}
Expected:
{"page":1,"start":0,"limit":50,"sort":[{"property":"firstName","direction":"ASC"}]}
ExtJs Code:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*',
'Ext.layout.container.Border'
]);
Ext.define('Customer',{
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'companyName', type: 'string'}
]
});
Ext.onReady(function(){
var itemsPerPage = 50; // Paging
var store = Ext.create('Ext.data.Store', {
pageSize: itemsPerPage,
// autoLoad: true,
autoLoad: {start: 0, limit: itemsPerPage},
autoSync: true,
model: 'Customer',
remoteSort: true,
proxy: {
paramsAsJson: true,
actionMethods: {
read: 'POST'
},
type: 'rest', // was... 'ajax',
url: '/customers',
reader: {
type: 'json',
root: 'content',
totalProperty: 'totalElements'
},
writer: {
type: 'json'
},
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
if (name == 'Destroy') {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));
}
}
}
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
listeners: {
cancelEdit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
store.remove(context.record);
}
}
}
});
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
bufferedRenderer: false,
store: store,
columns: [
{text: "ID", width: 120, dataIndex: 'id', sortable: true},
{text: "First Name", flex: 1, dataIndex: 'firstName', sortable: true, editor: 'textfield'},
{text: "Last Name", width: 125, dataIndex: 'lastName', sortable: true, editor: 'textfield'},
{text: "Company Name", width: 125, dataIndex: 'companyName', sortable: true}
],
forceFit: true,
height:210,
split: true,
region: 'north',
plugins: [rowEditing],
// Paging
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
});
// define a template to use for the detail view
var customerTplMarkup = [
'ID: {id}<br/>',
'First Name: {firstName}<br/>',
'Last Name: {lastName}<br/>',
'Company Name: {companyName}<br/>'
];
var customerTpl = Ext.create('Ext.Template', customerTplMarkup);
Ext.create('Ext.Panel', {
renderTo: 'binding-example',
frame: true,
title: 'Customer List',
width: 580,
height: 400,
layout: 'border',
items: [
grid, {
id: 'detailPanel',
region: 'center',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
html: 'Please select a customer to see additional details.'
}]
});
// update panel body on selection change
grid.getSelectionModel().on('selectionchange', function(sm, selectedRecord) {
if (selectedRecord.length) {
var detailPanel = Ext.getCmp('detailPanel');
detailPanel.update(customerTpl.apply(selectedRecord[0].data));
}
});
});

i added beforeload listener to the store
here is a working example:
listeners: {
beforeload: function(store, operation, eOpts){
var sort = [];
var filter = [];
if(operation._sorters){
for(var i = 0; i< operation._sorters.length; i++){
var direction = operation._sorters[i]._direction;
var property = operation._sorters[i]._property;
sort.push({
"direction" : direction,
"property" : property
});
}
operation._proxy.extraParams = {sort:sort};
}
if(operation._filters){
for(var i = 0; i< operation._filters.length; i++){
var operator = operation._filters[i]._operator;
var property = operation._filters[i]._property;
var value = operation._filters[i]._value;
filter.push({
"operator" : operator,
"property" : property,
"value" : value
});
}
operation._proxy.extraParams = {filter:filter};
}
}
}

Bind Ext form data into GridPanel in ExtJS

I had created a demo page using ExtJS for the first time.
I have created the .JS file as below.
Ext.require([
//'Ext.form.*',
//'Ext.layout.container.Column',
//'Ext.tab.Panel'
'*'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
var bd = Ext.getBody();
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var simple = Ext.widget({
xtype: 'form',
layout: 'form',
collapsible: true,
id: 'userForm',
frame: true,
title: 'User Details',
bodyPadding: '5 5 0',
align: 'center',
width: 350,
buttonAlign: 'center',
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
items: [{
id: 'txtName',
fieldLabel: 'Name',
name: 'name',
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'dDOJ',
fieldLabel: 'Date Of Joining',
name: 'doj',
xtype: 'datefield',
format: 'd/m/Y',
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'txtAge',
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100,
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'chkActive',
xtype: 'checkbox',
boxLabel: 'Active',
name: 'cb'
}],
buttons: [{
text: 'ADD',
listeners: {
click: {
fn: function() {
debugger;
if (Ext.getCmp('txtName').getValue() == "" || Ext.getCmp('dDOJ').getValue() == "" || Ext.getCmp('txtAge').getValue() == "") {
alert("Please Enter All Required Details!");
return false;
}
var reply = confirm("Are You Sure You Want To Save?")
if (reply != false) {
fnShowGrid();
}
}
}
}
}]
});
simple.render(document.body);
});
function fnShowGrid() {
debugger;
var vName = Ext.getCmp('txtName').getValue();
var vDOJ = Ext.Date.format(Ext.getCmp('dDOJ').getValue(), 'd/m/Y');
var vAge = Ext.getCmp('txtAge').getValue();
var vIsActive = "InActive";
if (Ext.getCmp('chkActive').getValue() == true) {
vIsActive = "Active";
}
var store = Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
idIndex: 0,
fields: [
{ name: 'name' },
{ name: 'doj' },
{ name: 'age' },
{ name: 'active' }
],
//data: { name: vName, doj: vDOJ, age: vAge, active: vIsActive}
data: [[vName, vDOJ, vAge, vIsActive]]
});
store.load({
params: {
start: 1,
limit: 3
}
});
Ext.create('Ext.grid.Panel', {
title: 'User Details',
store: store,
columns: [
{
header: 'Name',
width: 160,
sortable: true,
dataIndex: 'name'
},
{
header: 'Date Of Join',
width: 75,
sortable: true,
dataIndex: 'doj'
},
{
header: 'Age',
width: 75,
sortable: true,
dataIndex: 'age'
},
{
header: 'Active',
width: 75,
sortable: true,
dataIndex: 'active'
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
//detailsGrid.render(document.body);
}
The gridPanel is being displayed. But each time add a new data its creating a new grid!
I want to display GridPanel only once including all before added data.
Here's fiddle: http://jsfiddle.net/pratikhsoni/wc9mD/1/

Here is the working example based on your fiddle!
Ext.require([
'*'
]);
store = Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
idIndex: 0,
fields: [
{ name: 'name' },
{ name: 'doj' },
{ name: 'age' },
{ name: 'active' }
],
//data: { name: vName, doj: vDOJ, age: vAge, active: vIsActive}
});
Ext.onReady(function() {
Ext.QuickTips.init();
var bd = Ext.getBody();
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var simple = Ext.widget({
xtype: 'form',
layout: 'form',
collapsible: true,
id: 'userForm',
frame: true,
title: 'User Details',
bodyPadding: '5 5 0',
align: 'center',
width: 350,
buttonAlign: 'center',
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
items: [{
id: 'txtName',
fieldLabel: 'Name',
name: 'name',
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'dDOJ',
fieldLabel: 'Date Of Joining',
name: 'doj',
xtype: 'datefield',
format: 'd/m/Y',
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'txtAge',
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100,
afterLabelTextTpl: required,
allowBlank: false
}, {
id: 'chkActive',
xtype: 'checkbox',
boxLabel: 'Active',
name: 'cb'
}],
buttons: [{
text: 'ADD',
listeners: {
click: {
fn: function() {
debugger;
if (Ext.getCmp('txtName').getValue() == "" || Ext.getCmp('dDOJ').getValue() == "" || Ext.getCmp('txtAge').getValue() == "") {
alert("Please Enter All Required Details!");
return false;
}
var reply = confirm("Are You Sure You Want To Save?")
if (reply != false) {
fnShowGrid();
}
}
}
}
}]
});
simple.render(document.body);
});
function fnShowGrid() {
debugger;
var vName = Ext.getCmp('txtName').getValue();
var vDOJ = Ext.Date.format(Ext.getCmp('dDOJ').getValue(), 'd/m/Y');
var vAge = Ext.getCmp('txtAge').getValue();
var vIsActive = "InActive";
if (Ext.getCmp('chkActive').getValue() == true) {
vIsActive = "Active";
}
if (!Ext.getCmp('sample-grid')) {
store.add({
name: vName,
doj: vDOJ,
age: vAge,
active: vIsActive
});
Ext.create('Ext.grid.Panel', {
title: 'User Details',
store: store,
id: 'sample-grid',
columns: [
{
header: 'Name',
width: 160,
sortable: true,
dataIndex: 'name'
},
{
header: 'Date Of Join',
width: 75,
sortable: true,
dataIndex: 'doj'
},
{
header: 'Age',
width: 75,
sortable: true,
dataIndex: 'age'
},
{
header: 'Active',
width: 75,
sortable: true,
dataIndex: 'active'
}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
} else {
store.add({
name: vName,
doj: vDOJ,
age: vAge,
active: vIsActive
});
}
}

First of All.
Its very good to see you getting touch with EXT js. Mistake's i will like to highlight in your code.
1. if (reply != false) {
fnShowGrid();
}
In this you are calling your grid to be created which is being called why you are creating a new grid . you just have to update the store.
Approach: You must call it only once check if it exist and if yes then update the store like this.
if (reply != false) {
if(!Ext.getCmp('hello')) {
fnShowGrid();
} else {
var store=Ext.getCmp('hello').getStore();
store.add ({
name: 'sadad',
doj:'25/01/2015',
age:'26',
active:'false'
});
store.reload();
}
}
So in all you have to update the store add the new records. I have hardcoded right now you can get the values as you have got when creating it.
Please find Updated fiddle.
Fiddle

How to refresh / reload Grid

hi this is my code i am trying to refresh grid panel on clicking refresh button in toolbar , but it wont work anymore or nothing happens can you please help me what is the proper syntax ?
var store = new Ext.data.JsonStore({
url: 'data-cloud.php',
fields: [{
name: 'userid'
}, {
name: 'record_name'
}, {
name: 'search_term',
type: 'string'
}]
});
var grid_array = new Array();
store.load({
params: {
start: 0,
limit: 5
}
});
store.on('load', function(store, records) {
for (var j = 0; j < records.length; j++) {
grid_array[j] = records[j].get('record_name');
}
});
// create the Grid
var datagrid = new Ext.grid.GridPanel({
store: store,
columns: [{
id: 'id',
header: 'Cloud Name',
width: 155,
renderer: record_name,
sortable: true,
dataIndex: 'record_name'
}, {
header: 'Search Term',
width: 150,
sortable: true,
dataIndex: 'search_term'
}],
stripeRows: true,
height: 250,
width: 500,
id: 'cloud_panel',
title: 'DB Grid',
id: 'detailPanel',
tbar: [{
text: 'Refresh',
iconCls: 'new-topic',
handler: function() {
Ext.getCmp('detailPanel').getView().refresh();
}
}
],
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});

var grid = Ext.getCmp('cloud_panel');
...
tbar: [
handler: function() {
grid.load();
}
]

If you refresh the grid's view, the data will not be loaded again, it will just re-render the presentation.
To refresh the actual data, use the reload function on the grid's store:
Ext.getCmp('detailPanel').getStore().reload();
Btw, you're setting the id property twice in your grid's configuration, "cloud_panel" and "detailPanel", so you'll probably want to eliminate one of them.

try
var grid = Ext.getCmp('cloud_panel');
grid.getStore().load();
also you can pass params to store
grid.getStore().getProxy().extraParams = {name:'name1', lname: 'lname'}
and after
grid.getStore().load(function(){
alert('store was loaded');
});

Sencha Touch: Problem loading form: Cannot read property "OffsetBoundary of undefined"

So I have a form and its respective store. The store works fine and it keeps the data in localStorage, but when I open the app again and try to update the form with the data from localStorage it doesn't work!
Any help would be much appreciated!
...
var optionsModel = new Ext.regModel('Options',{
fields: [ {name:'id', type:'int'}, 'language', 'range', 'limit', 'filters'],
proxy: { type: 'localstorage', id: 'options' }
});
...
Options = new Ext.Panel({
id: 'options',
floating: true,
hidden: true,
scroll: 'vertical',
hideOnMaskTap: false,
width:'50%',
autoHeight:true,
style:'min-width:300px;',
items: [{
title: 'Options',
xtype: 'form',
id: 'optionsForm',
items: [{
xtype: 'hiddenfield',
name: 'id',
value: 1
},{
xtype: 'fieldset',
title: 'Language',
defaults: {
labelWidth: '65%'
},
items: [{
xtype: 'selectfield',
name: 'language',
value: 'EN',
labelWidth: 0,
options: [{
text: 'English',
value: 'EN',
selected:true
}, {
text: 'Português',
value: 'PT'
}]
}]
},{
xtype: 'fieldset',
title: 'Limits',
defaults: {
// labelAlign: 'right'
labelWidth: '40%',
xtype: 'sliderfield',
},
items: [{
name: 'range',
label: 'Range',
value:1,
increment:1,
minValue: 1,
maxValue: 10
},{
name: 'limit',
label: 'Limit',
value:25,
increment:5,
minValue: 10,
maxValue: 50
}]
}],
store: new Ext.data.Store({
storeId: 'OptionsStore',
model: 'Options',
}),
/**
* Add custom event listener
*/
addEventListener: function(){
Options.on('beforeshow',this.loadSettings,this);
Options.on('beforehide',this.saveAction,this);
},
/**
* load user settings from store in the form
*/
loadSettings: function(){
this.store.load();
var data = this.store.getAt(0).data;
if (Ext.isObject(data)) {
var conf = Ext.ModelMgr.create({
id:1,
language: data.language,
limit: data.limit,
range: data.range
},
'Options'
);
console.log(data);
this.setValues({filters:"",id:1,language:"PT",limit:25,range:10}); // I've tried this.load() too.
}
},
/**
* Save form user settings model in store
*/
saveAction: function() {
var data = this.getValues();
var conf = Ext.ModelMgr.create({
id:1,
language: data.language,
limit: data.limit,
range: data.range
},
'Options'
);
this.store.loadData([]);
this.store.sync();
this.store.add(conf);
this.store.sync();
}
}]
});
...
Home.on('activate',function(){
Options.getComponent('optionsForm').addEventListener();
},this,{single:true});
...

As it turns out, the frameworks is still a bit buggy when it comes to forms and their respective input fields. I ended up creating JSON files to store the data for the translations and used an Ext.Sheet to mask out the Options panel (overcoming another bug). Code below..
...
function include(filename)
{
var head = document.getElementsByTagName('head')[0];
script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
head.appendChild(script)
}
var text = new Array();
include('app/lang/en.js'); // JSON file with English translation
include('app/lang/pt.js'); // JSON file withe Portuguese translation
function langText(lang,el) {
return text[lang][el];
}
...
var OptionsStorage = JSON.parse(window.localStorage.getItem('f2t-options'));
if(OptionsStorage == null) { //load defaults
OptionsStorage = new Object();
OptionsStorage.language = "EN";
}
window.localStorage.setItem('f2t-options',JSON.stringify(OptionsStorage));
Ext.apply(Ext.MessageBox.YES, {text: langText(OptionsStorage.language,'Yes')});
Ext.apply(Ext.MessageBox.NO, {text: langText(OptionsStorage.language,'No')});
...
var OptionsMask = new Ext.Sheet({
modal:false,
fullscreen:true,
stretchX: true,
stretchY: true,
style:'background:rgba(0,0,0,0.3) !important;', //style like a mask
addEventListener: function(){
this.el.on('click',function(){Options.hide();});
}
});
var Options = new Ext.Panel({
id: 'options',
floating: true,
modal: false,
hideOnMaskTap: false,
listeners:{
beforeshow: function(){
OptionsMask.show();
},
afterrender: function(){
OptionsMask.addEventListener();
},
hide: function(){
OptionsMask.hide();
updateNearby();
}
},
items: [{
xtype: 'form',
id: 'optionsForm',
items: [{
xtype: 'fieldset',
title: langText(OptionsStorage.language,'Language'),
items: [{
xtype: 'selectfield',
name: 'language',
value: OptionsStorage.language,
options: [{
text: 'English',
value: 'EN',
selected: (this.value == OptionsStorage.language)?true:false
}, {
text: 'Português',
value: 'PT',
selected: (this.value == OptionsStorage.language)?true:false
}],
listeners:{
change: function(){
Options.getComponent('optionsForm').saveAction();
// TRANSLATE STUFF
}
}
}]
}]
}]
}],
/**
* Save user settings in localstorage
*/
saveAction: function() {
var data = this.getValues();
OptionsStorage = new Object();
OptionsStorage.language = data.language;
window.localStorage.removeItem('f2t-options');
window.localStorage.setItem('f2t-options',JSON.stringify(OptionsStorage));;
}
}]
});

Extjs getting the `formpanel` that is created dynamically from button click

I have ExtJS View-Port panel, that contain center panel, that contain tablpanel, in which I have added gridpanel in one tab, on this I have put Add Person button in tbar of , that will add a new tab of a formpanel, in its Reset button, I am not able to access Form to reset it.
Do any body have faced same issue?
Please help how to get it working.
Ext.onReady(function() {
// Ext.get(document.body, true).toggleClass('xtheme-gray');
var myBorderPanel = new Ext.Viewport({
title: 'Software Releases',
// renderTo: document.body,
renderTo: Ext.getBody(),
layout: 'border',
id: 'main',
items: [{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
tbar: [{
text: 'Add person', // only when user have write priovilege.
handler: function() {
var tabpanel = Ext.getCmp('main').findById('tabs');
var wtab = tabpanel.add({
// // var addrelease_win = new Ext.Window({
url: 'reledit-submit.json',
id: 'addform0',
// height: 300, width: 400,
layout: 'form',
frame: true,
title: 'Add New Release',
closable: true,
items: [{
xtype: 'textfield',
fieldLabel: 'Name'
}],
buttons: [{
text: 'Save',
scope: wtab,
handler: function() {
wtab.getForm().submit({
success: function(f, a) {
Ext.Msg.alert('Success', 'It worked');
},
failure: function(f, a) {
Ext.msg.alert('Warnning', 'Error');
}
});
}
}, {
text: 'Reset',
scope: wtab,
handler: function() {
// Ext.getCmp('addform0').getForm().reset();
// tabpanel.getActiveTab.reset();
// Ext.getCmp('main').findById('addform').getForm().reset();
// this.getForm().reset();
// this.getForm().reset();
// Ext.Msg.alert('sdfsd', 'asdfsd ' + Ext.getCmp('addform0').getValue() + ' sdfsd');
this.findById('addform0').getForm().reset();
// Ext.Msg.alert('sdfsd', 'asdfsd ');
}
}]
});
// addrelease_win.show();
tabpanel.activate(tabpanel.items.length - 1);
}
}],
xtype: 'tabpanel',
id: 'tabs',
activeTab: 0,
items: [{
title: 'Data',
xtype: 'editorgrid',
store: store,
stripeRows: true,
// autoExpandColumn: 'title',
columns: [{
header: "Name",
dataIndex: "name",
width: 50,
sortable: true
}, {
header: "DOB",
dataIndex: "dob",
sortable: true
}]
}],
margins: '5 5 0 0',
})
})
});

Doesn't wtab.getForm().reset(); work?
If not, use this.ownerCt to get to the buttons container and then just walk up the chain until you get to a point where you can access the form.
UPDATE
The real problem is that its a Panel with a form layout that is created and not a FormsPanel.
Change layout:'form' into xtype:'form' and .getForm() should work.