We Keep Coding

Prevent qtip from showing

How can I prevent qtip from showing on grid cells with "large" data that does not fit inside its width? (on ExtJS 6.5.2 - Modern Toolkit)
Example
Add this to a sencha fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', "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" }
]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
store: store,
columns: [
{
text: 'Name',
dataIndex: 'name',
minWidth: 200,
//flex: 1,
//cellWrap: true,
cell: {
bodyStyle: {
whiteSpace: 'normal'
}
}
},
{ text: 'Email', dataIndex: 'email', flex: 2, minWidth: 250 },
{ text: 'Phone', dataIndex: 'phone', flex: 1, minWidth: 120 }
],
//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});

Grid without tooltip
Default wrapping behaviour but no tooltip, demo: https://fiddle.sencha.com/#view/editor&fiddle/29ii
Grid with wrapping capabilities
Demo: https://fiddle.sencha.com/#view/editor&fiddle/29if
In short you need to set these rules to wrap content:
white-space: normal;
word-break: break-word;
And set grid's "variableHeights" to true: http://docs.sencha.com/extjs/6.5.1/modern/Ext.grid.Grid.html#cfg-variableHeights
Note: in the fiddle the CSS rules are applied using grid's "cls" config param, and styles are placed inside index.html

ExtJS How to add a custom panel to rowexpander

Here's an EXTJS rowexpander implementation
http://jsfiddle.net/Litote0707/xPpf2/
When you expand it, you can see the price.
Instead of price, can I show another custom grid something like this?
Ext.define('my.app.main.CustomList', {
extend: 'Ext.grid.Panel',
title: 'List in Rowexpander',
store: Ext.data.StoreManager.lookup('myStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400
});

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.

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'
],