Develop Reference

Load data from server side into ExtJs Grid

//****************controller********************
Ext.define('Insurance.controller.OpenQuoteController', {
extend: 'Ext.app.Controller',
//define the stores
stores: ['OpenQuote'],
//define the models
models: ['ApplicationListData'],
//define the views
views: ['OpenQuoteComp'],
refs: [{
ref: 'myGrid',
selector: 'grid'
}],
init: function () {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function () {
//just a console log to show when the panel si rendered
console.log('The panel was rendered');
},
onMtai: function (t) {
console.log('You typed something!');
var thisRegEx = new RegExp(t.getValue(), "i");
var store = this.getOpenQuoteStore();
var grid = this.getMyGrid();
store.filterBy(function (rec) {
for (var i = 0; i < grid.columns.length; i++) {
// Do not search the fields that are passed in as omit columns
if (grid.omitColumns) {
if (grid.omitColumns.indexOf(grid.columns[i].dataIndex) === -1) {
if (thisRegEx.test(rec.get(grid.columns[i].dataIndex))) {
if (!grid.filterHidden && grid.columns[i].isHidden()) {
continue;
} else {
return true;
}
;
}
;
}
;
} else {
if (thisRegEx.test(rec.get(grid.columns[i].dataIndex))) {
if (!grid.filterHidden && grid.columns[i].isHidden()) {
continue;
} else {
return true;
}
;
}
;
}
;
}
return false;
});
}
});
//*******************view**************************
Ext.define('Insurance.view.openquote.OpenQuoteComp', {
extend: 'Ext.grid.Panel',
alias: 'widget.OpenQuoteGrid',
title: 'Diary Record(s):0',
width: 700,
xtype: 'openquotecomp',
defaults: {
flex: 1
// layout:'fit'
},
initComponent: function () {
this.columns = [
{header: 'Client Name', dataIndex: 'clientName'},
{header: 'Business Manager', dataIndex: 'bmManger'},
{header: 'Date', dataIndex: 'dealDate', flex: 1},
{header: 'Reference Number', dataIndex: 'refNumber'},
{header: 'Vehicle', dataIndex: 'vehicle'},
{header: 'Agent', dataIndex: 'agent'}
];
this.callParent(arguments);
}
//renderTo: Ext.getBody()
});
//***************model*********************
Ext.define('Insurance.model.ApplicationListData', {
extend: 'Ext.data.Model',
uses: [],
fields: [
{name: 'applicationID', type: 'int'},
{name: 'firstClientName', type: 'string'},
{name: 'secondClientName', type: 'string'},
{name: 'salePerson', type: 'string'},
{name: 'date', type: 'string'},
{name: 'ref', type: 'string'},
{name: 'vehicle', type: 'string'},
{name: 'businessManager', type: 'string'},
{name: 'locumName', type: 'string'},
{name: 'addressLineOneFirstClient', type: 'string'},
{name: 'addressLineOneSecondClient', type: 'string'},
{name: 'addressLineTwoFirstClient', type: 'string'},
{name: 'addressLineTwoSecondClient', type: 'string'},
{name: 'policyNumber', type: 'string'},
{name: 'agentName', type: 'string'},
{name: 'archiveIndicator', type: 'boolean'},
{name: 'createdByWS', type: 'boolean'}
]
});
//***************store****************
Ext.define('Insurance.store.OpenQuote', {
extend: 'Ext.data.Store',
model: 'Insurance.model.ApplicationListData',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'QuoteServlet',
reader: {
type: 'json',
totalProperty: 'totalCount',
root: 'openquote',
successProperty: 'success'
}
}
});
These are some of the errors I am receiving:
Failed to load resource: the server responded with a status of 404 (Not Found) localhost:8080/extjs/app/view/…
[E] [Ext.Loader] Some requested files failed to load. ext-all-rtl-debug.js?_dc=1424789229907:5600
Uncaught Error: [Ext.Loader] Some requested files failed to load. ext-all-rtl-debug.js?_dc=1424789229907:1603
Could anybody help in resolving these errors

You want load json file in your Store? over this address?
"localhost:8080/extjs/app/view/OpenQuoteComp.js"
your controller method OpenQuoteComp Must return JsonResult... not json file...
return Json(new { openquote = "yourDataObject" , totalCount = itemsCount }, JsonRequestBehavior.AllowGet);

ExtJS 4.2.0 undefined model

I thought I had defined a model for my store, but my console and also my application seem to disagree.
My code looks something like this:
Ext.define("Deeper", {
extend: 'Ext.data.Model',
fields: [{
name: 'ID',
type: 'int'
}, {
name: 'someoneElsesID',
type: 'int'
}, {
name: 'anotherID',
type: 'int'
}],
belongsTo: 'Higher'
});
Ext.define("Higher", {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
type: 'string'
}, {
name: 'status',
type: 'int'
}],
hasMany: {
model: 'Deeper',
name: 'deeper'
}
});
after that, I created the following store:
var store = Ext.create('Ext.data.Store', {
model: 'Higher',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'some/correct/url.json',
reader: {
type: 'json',
root: 'name'
}
}
});
My grid shows inline data correctly, so I tried console.debug(store)
The result is:
model: undefined
and
modelDefaults: null
So where did I go wrong?

JSON Store can't load PHP data - EXTJS 4

Ext.define('GoogleMarkerModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'ID', type: 'int'},
{name: 'Locating', type: 'int'},
{name: 'MainPower', type: 'int'},
{name: 'Acc', type: 'int'},
{name: 'PowerOff', type: 'int'},
{name: 'Alarm', type: 'int'},
{name: 'Speed', type: 'int'},
{name: 'Direction', type: 'int'},
{name: 'Latitude', type: 'float'},
{name: 'Longitude', type: 'float'},
{name: 'DateTime', type: 'date'},
{name: 'MainID', type: 'int'},
{name: 'IOState', type: 'int'},
{name: 'OilState', type: 'int'}]
});
var MarkerStore = Ext.create('Ext.data.JsonStore', {
model: 'GoogleMarkerModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'get-googlemarker.php',
baseParams: { //here you can define params you want to be sent on each request from this store
mainid: 'value1'
},
reader: {
type: 'json',
idProperty:'MainID',
}
}
});
this code i use to call the MarkerStore and passing the parameter mainid with value 1
MarkerStore.load({
params: { //here you can define params on 'per request' basis
mainid: 1,
}
})
when i use web browser to get-googlemarker.php and mainid=1 will return those value
http://localhost/GPS/examples/tabs/get-googlemarker.php?mainid=1
[{"ID":"1808","Locating":"1","MainPower":"0","Acc":"1","PowerOff":"1","Alarm":"128","Speed":"0","Direction":"293","Latitude":"5.391788482666016","Longitude":"100.29693603515625","DateTime":"2013-02-19 15:44:36","MainID":"1","IOState":"0","OilState":"0"}]
but i m trying to list out all data,unfortunately the JSON store are null, i suspect the data are not store in the MarkerStore, below code are i m trying to list out the data,but is nothing write on console FireBug.
MarkerStore.each( function (model) {
console.log( model.get('MainID') );
});
any idea?

Try to remove autoload = true property from the store.

MarkerStore.on('load', function(store, records) {
for (var i = 0; i < records.length; i++) {
console.log(records[i].get('Latitude'));
lati = records[i].get('Latitude');
};
});
should use this code, then will print the data on console. the above question print store data code are wrong,actually data are success saved in JSON store

Your code works, but the main problem is when you call MarkerStore.each the store is empty at this time(Ajax is Asynchronous). Your script is faster as the ajax with the data. If you use the following simple snippet you will see your "mainID".
setTimeout(function(){
MarkerStore.each( function (model) {
console.log( model.get('MainID') );
});
}, 1500, MarkerStore);

Cannot get store record field value in Sencha Touch

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);

Passing an array from EXTJS to PHP by URL

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();
}
}