We Keep Coding

Ext JS - How to populate textfields from a grid in a new window

As I am a newbie to Ext JS and Sencha Architect, I am a but struggling here :(
I have one grid whihc shows two columns ID and Name as follow
ID | Name
1000 CA
1001 TX
1002 VA
There are two buttons Add & Update.
Code of the grid is as follow:
items: [
{
xtype: 'panel',
scrollable: true,
title: 'Plant',
dockedItems: [
{
xtype: 'gridpanel',
buttons: [
{
text: 'Add Plant',
handler: function() {
});
}
},
{
text: 'Update Plant',
handler: function() {
Ext.create('XYZ.view.UpdatePlantWindow', {
title: 'Update Plant'});}
}
],
buttonAlign: 'center',
dock: 'top',
id: 'PlantGrid',
scrollable: true,
store: 'PlantStoreAdmin',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'ID_PLANT',
text: 'Plant ID'
},
{
xtype: 'gridcolumn',
dataIndex: 'DS_PLANT',
text: 'Plant Name',
flex: 1
},
Now when user selects any row and clicks on Update Button, new window opens which has two text fields ID and Name. I want to populate these two fields with appropriate values that user has selected in the grid.
Code of windows:
Ext.define('XYZ.view.UpdatePlantWindow', {
extend: 'Ext.window.Window',
alias: 'widget.updateplantwindow',
requires: [
'Cepheid.view.UpdatePlantWindowViewModel',
'Ext.container.Container',
'Ext.form.field.Text'
],
viewModel: {
type: 'updateplantwindow'
},
autoShow: true,
height: 250,
width: 400,
title: 'Update Plant',
items: [
{
xtype: 'container'
},
{
xtype: 'textfield',
disabled: true,
id: 'PlantIDUpdate',
fieldLabel: 'Plant ID'
},
{
xtype: 'textfield',
fieldLabel: 'Label',
id: 'PlantNameUpdate'
}
]
});
Now how do I populate both the text fields with appropriate values?
Thanks in advance !

You can use the SelectionModel to get the currently selected record(s) in the grid. ie:
var selection = myGrid.getSelectionModel().getSelection();
And i'd recommend wrapping the fields in your window in a form because then you could use the loadRecord method to push the selection values to the form.
ie.
myWindow.down('form').getForm().loadRecord(selection[0]);
otherwise, if you don't want to wrap in the form you could load each individual value on the window:
myWindow.down('#myField').setValue(selection[0].get('my_value'));
Here is a fiddle demonstrating a working example

Extjs gridpanel display 25 rows max due to localstorage proxy. How to change this limit value?

I have a grid panel and its code is:
{
xtype: 'gridpanel',
x: 10,
y: 10,
autoScroll : true,
// height: 300,
width: 300,
title: 'Grid Panel',
store: 'peopleStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'gender',
text: 'Gender'
},
{
xtype: 'numbercolumn',
dataIndex: 'age',
text: 'Age'
}
]
}
My store structure is :
Ext.define('ThemeApp.store.peopleStore', {
extend: 'Ext.data.Store',
model: 'ThemeApp.model.peopleModel',
storeId: 'peopleStore',
proxy: {
type: 'localstorage',
id: 'PeopleInfo'
}
});
I have a add row button. But only 25 rows are displayed and remaining rows goes behind these 25 rows. Does anyone knows about this problem?

When my app had a similar issue, I fixed it by setting the proxy's limitParam to the empty string, "", which is what the docs recommend if you don't want to send a limit parameter.
It could also be a result of the store's pageSize.

ExtJS store, cannot load data to grid

Console is clear. Grid is empty (only column titles are shown). How can I check if data is correctly loaded to the store? It seems to me that the store's autoLoad method is not triggered somehow. Here is the grid:
Ext.define('NameSpace.view.Clients', {
requires: [
'Ext.tree.Panel',
'Ext.grid.Panel'
],
extend: 'Ext.tab.Panel',
title: 'Clients',
alias: 'widget.viewClients',
items: [
{
xtype: 'panel',
title: 'All Clients',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'treepanel',
title: 'Tree Panel',
width: 200,
resizable: true
},
{
xtype: 'gridpanel',
title: 'Clients List',
store: Ext.getStore('storeClients'),
flex: '1',
columns: [
{ text: 'Name', dataIndex: 'first_name' },
{ text: 'Last Name', dataIndex: 'last_name' },
{ text: 'Phone Number', dataIndex: 'phone' }
]
}
]
}
],
initComponent: function () {
this.callParent(arguments);
}
});
And here is the store (Model contains nothing but extend and fields configs):
Ext.define('NameSpace.store.Clients', {
extend: 'Ext.data.JsonStore',
proxy: {
type: 'ajax',
url: 'http://test.local/client',
reader: {
type: 'json',
root: 'records'
}
},
autoLoad: true,
constructor: function (config) {
this.initConfig(config);
}
});
Ext.create('NameSpace.store.Clients', {
model: 'Clients',
storeId: 'storeClients'
});

Move
model: 'Clients',
storeId: 'storeClients'
into store definition, and get rid of store creation call. Store will be created automatically.

Why do you override the store constructor?
If you actually need to do it, you should add this.callParent(arguments) to the constructor, otherwise the original constructor (which does a lot) won't run.

You just need to change
store: Ext.getStore('storeClients')
To This :
store: 'Clients'

I think you need to write field when you create store.
i.e.
fields:[ 'first_name', 'last_name', 'phone']

How cell editing works with extjs store manager?

I have this example code from Sencha's website
Ext.onReady(function()
{
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"lisa#simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart#simpsons.com", "phone":"555-222-1234"},
{"name":"Homer", "email":"home#simpsons.com", "phone":"555-222-1244"},
{"name":"Marge", "email":"marge#simpsons.com", "phone":"555-222-1254"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{header: 'Phone', dataIndex: 'phone'}
],
selType: 'cellmodel',
plugins:
[{
ptype: 'cellediting',
clicksToEdit: 1
}],
height: 200,
width: 400,
renderTo: 'grid'
});
});
This ptype: 'cellediting' plugin allows for inline cell editing by just clicking on textfield.
I just cannot find any posts on how and where the changed value gets saved? How can I add a listener to a cell so that after each change I will be able to alert() the new value?
Thanks for any tips...

The record values are updated each time the editor is blurred (i.e. lose focus). Ext keeps track of fields in the records that have been modified, until you commit the changes (by syncing the store, for example).
To be notified that a field has been edited, use the edit event of the plugin. As you can see in the doc, you can install a listener for this event directly in the grid (no need to add the listener specifically to the plugin).
Edit
With your code, that would be something like this:
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{header: 'Phone', dataIndex: 'phone'}
],
selType: 'cellmodel',
plugins:
[{
ptype: 'cellediting',
clicksToEdit: 1
}],
height: 200,
width: 400,
renderTo: 'grid',
listeners: {
edit: function(editor, e) {
var record = e.record;
alert(Ext.String.format(
'The field "{0}" or record #{1} has been changed from {2} to {3}',
e.field, record.get('id'), e.originalValue, e.newValue
));
alert('The following fields of the records are dirty: ' + Ext.Object.getKeys(record.modified).join(', '));
}
}
});

Grid Return on Editable Field in Rally SDK2

I have a grid with a column like this:
{ text: 'Name', dataIndex: 'Name', editor: 'rallytextfield', flex: 2.5, sortable: false },
When I fill in information in the text field and then click somewhere else, the data is saved; however, when I hit return or tab like in a Custom Grid, nothing happens. What can I configure to allow me to return away from this field and so get the value to save without clicking?
EDITED: It turns out that it's to do with adding checkboxes. If I add a selModel, the return doesn't work. If I take it away, the return works! Here's the full app:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var store = Ext.create('Rally.data.custom.Store', {
data:[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]
});
this.add( Ext.create('Rally.ui.grid.Grid', {
title: 'Simpsons',
store: store,
columnCfgs: [
{ text: 'Name', dataIndex: 'name', editor: 'rallytextfield' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone', editor: 'textfield' }
],
height: 200,
width: 400,
selType: 'checkboxmodel',
selModel: {
injectCheckbox: 1,
mode: 'SIMPLE'
}
}) );
}
});
Commenting out selType & selModel and I can hit return to go from one row to the next, but with the selType & selModel in there, no return but tab does work.

The Return/Tab inline edit navigation should be built-in without any additional configuration. When I try to repro the issue the first thing I run into is this:
App works as desired in debug mode but crashes in Rally environment
That may be the root cause since the app is likely just refreshing once the field is edited.
My working column config on my gridConfig looks like this:
columnCfgs: [
'FormattedID',
{
text: 'Name',
dataIndex: 'Name',
editor: 'rallytextfield',
flex: 2.5,
sortable: false
},
'Owner'
],