Develop Reference

ext js 6 pass dynamic id from grid panel to model

How to passing id from gridpanel to model ?
here my grid panel code:
{
text : 'Tindakan',
xtype: 'actioncolumn',
minWidth: 130,
sortable: false,
menuDisabled: true,
items: [{
icon: 'images/view.png', // Use a URL in the icon config
tooltip: 'Lihat',
handler : function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Lihat - " + rec.get('id'));
}]
}
Here is my model code:
Ext.define('Kds.model.ProfilView', {
extend: 'Ext.data.Store',
alias: 'model.profilView',
fields: [
'name',
'ic_no',
'address',
],
pageSize : 20,
proxy: {
type: 'rest',
url : 'http://localhost/kds-rest/web/index.php/people/view/'+id,
useDefaultXhrHeader : false,
withCredentials: false,
reader: {
type: 'json',
rootProperty: 'data',
//totalProperty: 'totalItems'
}
},
autoLoad: 'true',
});

How do you use that model? If you create or use that each time, you can try this:
handler : function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
//Create or get model to use
var model = Ext.create('Kds.model.ProfilView', {
// then give the record id to model
recordId: rec.get('id') // edited
});
}
// to use in model
Ext.define('Kds.model.ProfilView', {
extend: 'Ext.data.Store',
alias: 'model.profilView',
fields: [
'name',
'ic_no',
'address'
],
pageSize : 20,
autoLoad: 'true',
initComponent: function() {
var me = this;
me.proxy = {
type: 'rest',
url : 'http://localhost/kdsrest/web/index.php/people/view/'+me.recordId, // or this.up().recordId,
................
} // iniComponent
me.callParent();
Edit: How to load model dynamically: fiddle: https://fiddle.sencha.com/#fiddle/11g9
Ext.define('model.instance', {
extend: 'Ext.data.Model',
fields: ['name', 'city', 'country'],
proxy: {
type: 'ajax',
url: 'info',
reader: {
type: 'json',
rootProperty: 'records'
}
}
});
var fn = function getSelectedRow(gridView, rowIndex, colIndex, column, e,direction) {
var me = this;
var store = gridView.getStore();
var record = store.getAt(rowIndex);
var inst = Ext.create('model.instance', {
name: record.get('name')
});
inst.load({
scope: this,
success: function(rec) {
console.log(rec);
}
});
}
var store1 = Ext.create('Ext.data.Store', {
fields: ['name', 'surname'],
data: [{
name: 'Rick',
surname: 'Donohoe'
}, {
name: 'Jane',
surname: 'Cat'
}]
});
var grid = Ext.create('Ext.grid.Panel', {
columns: [{
dataIndex: 'name'
}, {
dataIndex: 'surname'
}, {
xtype: 'actioncolumn',
text: 'Select',
icon: '/image',
handler: Ext.bind(fn, this)
}],
store: store1,
renderTo: Ext.getBody()
});

Grid not updating when new record is added to his store

I have a gridpanel who is not being updated when a record is inserted on his store.
Model:
Ext.define('S1.model.Ciot', {
extend: 'Ext.data.Model',
requires: 'S1.proxy.Ciot',
proxy: 'ciot',
associations: [
{
type: 'belongsTo',
model: 'S1.model.Person',
associatedName: 'owner',
primaryKey: 'id',
foreignKey: 'owner_id',
associationKey: 'owner',
setterName: 'setOwner',
getterName: 'getOwner'
}
],
fields: [
{name: 'id', type: 'int', useNull: true},
{name: "owner_id", type: 'int', useNull: true},
{name: "number", type: 'int', useNull: true},
{name: "status", type: 'int', useNull: true},
{name: "product", type: 'string', useNull: true}
]
});
Store:
Ext.define('S1.store.Ciot', {
autoLoad: true,
extend: 'Ext.data.Store',
requires: 'S1.proxy.Ciot',
model: 'S1.model.Ciot',
proxy: 'ciot',
remoteSort: true,
remoteFilter: true,
remoteGroup: true,
pageSize: 40
});
Controller:
Ext.define('S1.controller.Ciot', {
extend: 'Ext.app.Controller',
stores: [
'Ciot'
],
models: [
'Ciot'
],
views: [
'ciot.Window',
'ciot.Grid',
'ciot.EditWindow',
'ciot.Form'
],
init: function () {
var me = this;
me.control({
'ciotgrid button[name=new]': {
click: me.onNewButtonClick
},
'ciotgrid': {
itemdblclick: me.onGridItemDblClick
},
'ciotform button[name=save]': {
click: me.onButtonSaveClick
}
});
},
onNewButtonClick: function (bt) {
var record = Ext.create('S1.model.Ciot'),
grid = bt.up('grid');
this.openEditWindow(record, grid);
},
onGridItemDblClick: function (v, record) {
this.openEditWindow(record, v);
},
openEditWindow: function (record, grid) {
var w = Ext.create('S1.view.ciot.EditWindow');
w.setGrid(grid || null);
w.show();
w.down('form').loadRecord(record);
},
onButtonSaveClick: function (bt) {
var form = bt.up('form'),
record = form.getRecord();
if (!record) {
return false;
}
if (!form.getForm().isValid()) {
return false;
}
form.updateRecord();
record.save({
success: this.onSaveSuccess,
failure: this.onSaveFailure,
scope: form
});
},
onSaveSuccess: function (r, op) {
var w = this.up('cioteditwindow'),
grid = w.getGrid(),
rs = op.getResultSet();
grid.getStore().insert(0, rs.records[0]);
w.close();
},
onSaveFailure: function (record, op) {
// ...
}
});
The callback onSaveSuccess successfully add the new record to the grid, but nothing happens on the frontend.
The record returned from the backend is OK.
Looks like the grid that I am inserting the new record, is not the same grid rendered.
What am I doing wrong here?
Thank you.
ps: the code was shortened for demonstration purposes.

Try to refresh the grid:
onSaveSuccess: function (r, op) {
var w = this.up('cioteditwindow'),
grid = w.getGrid(),
rs = op.getResultSet();
grid.getStore().insert(0, rs.records[0]);
--> grid.getView().refresh();
w.close();
},

The problem was in my record.
There was a "record.getOwner()" in the grid column renderer and the owner property was not being set.
I don't know why that method was not returning an error.
Grid:
Ext.define('S1.view.ciot.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.ciotgrid',
store: 'Ciot',
columns: [
{
header: 'Empresa',
dataIndex: 'owner_id',
renderer: function (v, md, record) {
var owner = record.getOwner();
if (owner instanceof S1.model.Person) {
v = owner.get('name');
}
return v;
},
flex: 1
},
{header: 'Número', dataIndex: 'number', flex: 1},
{header: 'CIOT', dataIndex: 'ciot', flex: 1},
{header: 'Produto', dataIndex: 'product', flex: 1},
{header: 'Status', dataIndex: 'status', flex: 1}
]
});

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!

TypeError: data is null while remote filtering on Ext JS 5.1

I have a grid with a pagination. When I set a filter, the ajax request is successfully executed, the json return value looks fine and the filtered rows appear in my grid.
But the Loading... popup won't disappear and Firebug reports an error in ext-all-debug.js: TypeError: data is null (Line 134684). The code at that point is:
data = store.getData();
items = data.items; // error
I've checked my JS several times, but I can't find the problem.
Unfortunately I can't create a fiddle, since I use remote filtering. So here's the script:
Ext.onReady (function () {
Ext.define('FooModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'myId', type: 'int' },
{ name: 'myDate', type: 'date', dateFormat: 'Y-m-d H:i:s' },
{ name: 'myString', type: 'string' },
{ name: 'myFilename', type: 'string' },
{ name: 'myUser', type: 'string' }
]
});
Ext.define('FooStore', {
extend: 'Ext.data.Store',
model: 'FooModel',
autoLoad: true,
autoDestroy: true,
proxy: {
type: 'ajax',
url: 'test.php',
reader: {
type: 'json',
rootProperty: 'import_files',
messageProperty: 'error',
}
},
remoteFilter: true,
remoteSort: true,
sorters: [{
property: 'myId',
direction: 'ASC'
}],
pageSize: 5
});
var theFooStore = new FooStore();
theFooStore.load({
callback: function(records, operation, success) {
if(!success) {
Ext.Msg.alert('Error', operation.getError());
}
}
});
Ext.define('FooGrid', {
extend: 'Ext.grid.Panel',
xtype: 'grid-filtering',
requires: [ 'Ext.grid.filters.Filters' ],
width: 1000,
height: 700,
renderTo: 'content',
plugins: 'gridfilters',
emptyText: 'No Matching Records',
loadMask: true,
stateful: true,
store: theFooStore,
defaultListenerScope: true,
columns: [
{ dataIndex: 'myId', text: 'My Id', filter: 'number' },
{ xtype: 'datecolumn', dataIndex: 'myDate', text: 'My Date', renderer: Ext.util.Format.dateRenderer('d.m.Y'), filter: true },
{ dataIndex: 'myString', text: 'My String', filter: 'list' },
{ dataIndex: 'myFilename', text: 'My Filename',
renderer: function(value, meta, record) {
return Ext.String.format('{1}', record.data.myId, value);
},
filter: {
type: 'string',
itemDefaults: { emptyText: 'Search for...' }
}
},
{
dataIndex: 'myUser', text: 'My User',
filter: {
type: 'string',
itemDefaults: { emptyText: 'Search for...' }
}
},
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: theFooStore,
dock: 'bottom',
displayInfo: true
}]
});
new FooGrid();
});
And here's a sample json return value:
{
"success" : true,
"total" : 19,
"import_files" : [{
"myId" : "1",
"myFilename" : "foo bar.xlsx",
"myDate" : "2015-05-19 13:23:21",
"myUser" : "ABC",
"myString" : "Lorem ipsum"
},
...
]
}
Has someone experienced the same issue? What could it cause?

Just my luck. Found the answer shortly after posting the question.
Deleting the filter: 'list' option at my My String column is the solution.

Accessing Android phone contacts with phonegap and Sencha Touch

please I'm trying to get a list of all the contacts on my phone with the following code.
var App = new Ext.Application({
name: 'SmsthingyApp',
useLoadMask: true,
launch: function () {
Ext.data.ProxyMgr.registerType("contactstorage",
Ext.extend(Ext.data.Proxy, {
create: function(operation, callback, scope) {
},
read: function(operation, callback, scope) {
},
update: function(operation, callback, scope) {
},
destroy: function(operation, callback, scope) {
}
})
);
Ext.regModel("contact", {
fields: [
{name: "id", type: "int"},
{name: "givenName", type: "string"},
{name: "familyName", type: "string"},
{name: "emails", type: "auto"},
{name: "phoneNumbers", type: "auto"}
]
});
Ext.regStore('contacts',{
model: "contact",
proxy: {
type: "contactstorage",
read: function(operation, callback, scope) {
var thisProxy = this;
navigator.contacts.find(
['id', 'name', 'emails', 'phoneNumbers', 'addresses'],
function(deviceContacts) {
//loop over deviceContacts and create Contact model instances
var contacts = [];
for (var i = 0; i < deviceContacts.length; i++) {
var deviceContact = deviceContacts[ i ];
var contact = new thisProxy.model({
id: deviceContact.id,
givenName: deviceContact.name.givenName,
familyName: deviceContact.name.familyName,
emails: deviceContact.emails,
phoneNumbers: deviceContact.phoneNumbers
});
contact.deviceContact = deviceContact;
contacts.push(contact);
}
//return model instances in a result set
operation.resultSet = new Ext.data.ResultSet({
records: contacts,
total : contacts.length,
loaded : true
});
//announce success
operation.setSuccessful();
operation.setCompleted();
//finish with callback
if (typeof callback == "function") {
callback.call(scope || thisProxy, operation);
}
},
function (e) { console.log('Error fetching contacts'); },
{multiple: true}
);
}
}
});
Ext.regModel('Sms', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'message', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title', message: 'Please select a contact for this sms.' }
]
});
Ext.regStore('SmsStore', {
model: 'Sms',
sorters: [{
property: 'date',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'sms-app-localstore'
},
getGroupString: function (record)
{
if (record && record.data.date)
{
return record.get('date').toDateString();
}
else
{
return '';
}
}
});
SmsthingyApp.views.ContactsList = new Ext.List({
id: 'ContactsList',
layout: 'fit',
store:'contacts',
itemTpl: '{givenName} {familyName}',
listeners: {'render': function (thisComponent)
{
SmsthingyApp.views.ContactsList.getStore().load();
}
},
onItemDisclosure: function (record) {
//Ext.dispatch({
// controller: SmsthingyApp.controllers.contacts,
// action: 'show',
// id: record.getId()
//});
}
});
SmsthingyApp.views.contactsListContainer = new Ext.Panel({
id: 'contactsListContainer',
layout: 'fit',
html: 'This is the sms list container',
items: [SmsthingyApp.views.ContactsList],
dockedItems: [{
xtype: 'toolbar',
title: 'Contacts'
}]
});
SmsthingyApp.views.smsEditorTopToolbar = new Ext.Toolbar({
title: 'Edit SMS',
items: [
{
text: 'Back',
ui: 'back',
handler: function () {
SmsthingyApp.views.viewport.setActiveItem('smsListContainer', { type: 'slide', direction: 'right' });
}
},
{ xtype: 'spacer' },
{
text: 'Save',
ui: 'action',
handler: function () {
var smsEditor = SmsthingyApp.views.smsEditor;
var currentSms = smsEditor.getRecord();
// Update the note with the values in the form fields.
smsEditor.updateRecord(currentSms);
var errors = currentSms.validate();
if (!errors.isValid())
{
currentSms.reject();
Ext.Msg.alert('Wait!', errors.getByField('title')[0].message, Ext.emptyFn);
return;
}
var smsList = SmsthingyApp.views.smsList;
var smsStore = smsList.getStore();
if (smsStore.findRecord('id', currentSms.data.id) === null)
{
smsStore.add(currentSms);
}
else
{
currentSms.setDirty();
}
smsStore.sync();
smsStore.sort([{ property: 'date', direction: 'DESC'}]);
smsList.refresh();
SmsthingyApp.views.viewport.setActiveItem('smsListContainer', { type: 'slide', direction: 'right' });
}
}
]
});
SmsthingyApp.views.smsEditorBottomToolbar = new Ext.Toolbar({
dock: 'bottom',
items: [
{ xtype: 'spacer' },
{
text: 'Send',
handler: function () {
// TODO: Send current sms.
}
}
]
});
SmsthingyApp.views.smsEditor = new Ext.form.FormPanel({
id: 'smsEditor',
items: [
{
xtype: 'textfield',
name: 'title',
label: 'To',
required: true
},
{
xtype: 'textareafield',
name: 'narrative',
label: 'Message'
}
],
dockedItems:[
SmsthingyApp.views.smsEditorTopToolbar,
SmsthingyApp.views.smsEditorBottomToolbar
]
});
SmsthingyApp.views.smsList = new Ext.List({
id: 'smsList',
store: 'SmsStore',
grouped: true,
emptyText: '<div style="margin: 5px;">No notes cached.</div>',
onItemDisclosure: function (record)
{
var selectedSms = record;
SmsthingyApp.views.smsEditor.load(selectedSms);
SmsthingyApp.views.viewport.setActiveItem('smsEditor', { type: 'slide', direction: 'left' });
},
itemTpl: '<div class="list-item-title">{title}</div>' +'<div class="list-item-narrative">{narrative}</div>',
listeners: {'render': function (thisComponent)
{
thisComponent.getStore().load();
}
}
});
SmsthingyApp.views.smsListToolbar = new Ext.Toolbar({
id: 'smsListToolbar',
title: 'Sent SMS',
layout: 'hbox',
items:[
{xtype:'spacer'},
{
id:'newSmsButton',
text:'New SMS',
ui:'action',
handler:function()
{
var now = new Date();
var smsId = now.getTime();
var sms = Ext.ModelMgr.create({ id: smsId, date: now, title: '', narrative: '' },'Sms');
SmsthingyApp.views.smsEditor.load(sms);
SmsthingyApp.views.viewport.setActiveItem('smsEditor', {type: 'slide', direction: 'left'});
}
}
]
});
SmsthingyApp.views.smsListContainer = new Ext.Panel({
id: 'smsListContainer',
layout: 'fit',
html: 'This is the sms list container',
dockedItems: [SmsthingyApp.views.smsListToolbar],
items: [SmsthingyApp.views.smsList]
});
SmsthingyApp.views.viewport = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items:[
SmsthingyApp.views.contactsListContainer,
SmsthingyApp.views.smsListContainer,
SmsthingyApp.views.smsEditor
]
});
}
})
I'm using eclipse and LogCat tab keeps marking this red
02-08 11:11:58.741: E/Web Console(13886): Uncaught TypeError: Cannot read property 'contacts' of undefined at file:///android_asset/www/app.js:35
I'm guessing this has something to with why I can't see the contacts in the contactsListContainer.
Any help please?

I'm not a Sencha expert but I do know that this line:
var App = new Ext.Application({
will cause problems with PhoneGap as we also declare a variable called App. It would be better to change that line to be something like:
var myApp = new Ext.Application({
to avoid the name conflict.
If that doesn't resolve your problem I suggest you read over my post on searching contacts. I'd make sure I could successfully search for contacts before adding in Sencha.