Develop Reference

get a row from a grid ExtJs 4

I think it's very simple to answer to this question:
I have simple grid with my custom store:
//other code
{
xtype: 'grid',
store: 'SecondStore',
itemId: 'mainTabPanel2',
columns: [
//this is not from the store
{
header: 'Not Form Store',
id: 'keyId2',
},
//from the store
{
header: 'From Store',
dataIndex: 'label',
id: 'keyId',
}
]
}
the store only populate the second column with id: keyId. In fact it have:
fields: [{ name: 'label' }]
And this work well.
I want to get from a function the row n°1 of this grid.
handler: function() {
var grid = Ext.ComponentQuery.query('grid[itemId="mainTabPanel2"]')[0];
//var row= get row(1) <- i don't know how to get the complete row
}
I'm working with ExtJs 4 so i can't get it with the command grid.getView().getRow(1);
I can't get it from the store because i want to get also the content of the column with id:keyId2 that is not stored in the store, so I can't do something like:
grid.getStore().getAt(1);
Anyone know how to get the complete row in ExtJs 4?
Thank you!

You can solve in this ExtJS 4.x using getNode: grid.getView().getNode(index)
getNode can take an HTML ID (not very useful), an index, or a store record.

I think you need something like this:
Ext.onReady(function () {
var store = 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'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
alert(grid.getStore().getAt(1).data.name);
});
jsFiddle: http://jsfiddle.net/RftWF/

Get FireBug plugin and monitor the grid at 'handler'. If you see the data from the column keyId2 than you can see the way in the firebug too. i.e grid object->store object-> data array.
Can you tell us how did you add data in the column keyId2 of the grid ?

I've solved accesing the DOM:
/* Get Dom of the first grid */
var DOMgrid = Ext.select('#'+gridview.getId());
var gridChild = DOMgrid.elements[0].children[1].children[0].children;
Then you should get the "children" you are interested to simply following the DOM structure.
You can also get the singleton flyweight element applying the Ext.fly() comand and update the content with the update() comand:
Ext.fly(/*DOM object here*/).update(/*raw content here*/)

Error when adding ext.grid.panel into ext.form.panel

I have this grid and form panels. I want to add a grid of data into the form panel and still have buttons from the form panel.
myGrid= Ext.create('Ext.grid.Panel',{
layout: {
type: 'fit'
},
id: 'gridId',
title: null,
store: myDataStore,
columns: [{
header: 'header 1',
dataIndex: 'index_1',
width: 120
}, {
header: 'header 2',
dataIndex: 'index_2',
width: 120
}, {
header: 'header 3',
dataIndex: 'index_3',
width: 120
}],
stripeRows: true
})
formPanel= Ext.create('Ext.form.Panel',{
id:'panelId',
items:[myGrid],
buttons: [{
// cancel, save, other buttons
}]
})
But I get this error
HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy
what do I do wrong?

You forgot semicolons after your Ext.create() config.
Seems to work just fine here. I made a fiddle
http://jsfiddle.net/WGgR8/1/

extjs panelgrid alternative

Going through the ExtJS documentation I got lost among the names and couldn't find the components I needed. I'd like to show the properties of an object like this:
Name: name
Address: address
With JSF, I would use a panelgrid with outputText tags. Is there a component like that?
And there's something else: I'd like to make this panel "closeable" like an accordion or something like that so the user could hide the information if not needed, but I couldn't make the accordion panel's size adapt to the content. When I used an accordionpanel in primefaces the panel was resized if the content changed. Is there any way you can do this with ExtJS?

Well, how about this:
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',
collapsible: true,
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

Grid loses (visible) selection after store-record edit and after commit

I have a simple case where I got a grid with an attached store.
There are 2 buttons. One with a handler that modifies the selected record. One with a handler that commits the selected record.
When I select a record and push edit -> editing takes place selection (looks lost) if you call grid.geSelectionModel().getSelection() you will see that the record is still selected. It just doesn't show it that way.
You can't select it again, you first have to select another record, and select the record back.
Secondly when you select a record click on the commit button, the value is committed, but the selection 'appears' again as lost.
Is this a bug? How can I fix this? I want it to keep the selection visible!
Here is a fiddle
and here is the sample code: (I use Ext 4.1.1)
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
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.container.Container', {
layout: 'fit',
renderTo: Ext.getBody(),
items: [{
xtype: 'grid',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
buttons: [{
text: 'commit selection',
handler: function(){
this.up('grid').getSelectionModel().getSelection()[0].commit();
}
},{
text: 'set selection name to maggy',
handler: function(){
this.up('grid').getSelectionModel().getSelection()[0].set('name', 'Maggy');
}
}]
}]
});​
UPDATE:
I reported it on the sencha forum. Mitchel Simoens told me it's fixed in Ext 4.1.2. Too bad it's a 'Support subscriber only' version..
UPDATE:
I'm locating the issue to try and fix it. I believe the issue is located in the Ext.view.Table class in onUpdate method, more precise around this piece of code:
if (oldRowDom.mergeAttributes) {
oldRowDom.mergeAttributes(newRow, true);
} else {
newAttrs = newRow.attributes;
attLen = newAttrs.length;
for (i = 0; i < attLen; i++) {
attName = newAttrs[i].name;
if (attName !== 'id') {
oldRowDom.setAttribute(attName, newAttrs[i].value);
}
}
}
Is it a bad idea to just leave this piece of code out? I commented it out it seems like it's working now, but won't it break some other functionality? http://jsfiddle.net/Vandeplas/YZqch/10/

I think its a bug, maybe as part of refreshing the grid to show the dirty bits.
I circumvented this in an ugly way, in your revised fiddle:
{
text: 'set selection name to maggy',
handler: function(){
var sel = this.up('grid').getSelectionModel();
var rec = sel.getSelection()[0];
rec.set('name', 'Maggy');
sel.deselectAll();
sel.select(rec.index);
}
}
I did this for .set(), but the same can be done for commit()
Hope this helps somewhat.

Card layout not working with forms - Sencha Touch 2

I want to 2 forms, & I want to use card layout, so that when the user submits form1, he is taken to form2. But, when I try to MyApp.container.setActiveItem(2) (using console), it does not move to form2(card2).
Ext.define('MyApp.view.Forms', {
extend: 'Ext.Container',
xtype: 'formsPage',
id: 'formsForm',
config: {
title: 'Patient Registration',
iconCls: 'user',
layout:{
type: 'card'
},
items: [
{
xtype: 'fieldset',
title: 'Patient Registration1',
items: [
{
xtype: 'textfield',
label: 'Names',
name: 'name'
},
{
xtype: 'textfield',
label: 'City',
name: 'city'
}
]
},
{
xtype: 'fieldset',
title: 'Patient Registration1',
items: [
{
xtype: 'textfield',
label: 'Phone',
name: 'phone'
},
{
xtype: 'textfield',
label: 'Country',
name: 'conutry'
}
]
}
],
constructor:function(config) {
this.initConfig(config);
return this;
}
}
});
MyApp.container = Ext.create('MyApp.view.Forms', {});

Please note that array items in Sencha Touch 2 are indexed from 0, so if you want to activate second one, it should be something like this:
MyApp.container.setActiveItem(1)
Edited: I've figured it out. You should add another config to your view: fullscreen:true and it should work well :)

Is your form xtype of 'formsPage' custom, I can't seem to find it in the doco? If it's not, that might be contributing to the issue.
The doco also suggests that you don't create the card layout directly, but instead use carousel or tab panel. Maybe use a carousel as your base component, then make each card a separate form? This would make your intentions clear that each card/form is to be independent.
Hope that helps

do the following:
extend the carousel
extend: 'Ext.Carousel',
change the config section to:
config: {
title: 'Patient Registration',
iconCls: 'user',
cls: 'card'
----
guess that should fix it