The empty text in Ext 4.2 seems to not be displaying for Ext.grid.Panel
I can demonstrate by using the javascript editor here: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.Panel
Just delete the data config for the store, and then add the emptyText config for the panel on the first example. It should look like this:
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
//No data here
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
emptyText: 'Test Empty Text', //Add emptyText
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()
});
Note that the text will show up, once you click on Name, Email, or Phone - once the grid gets sorted.
Is this an Ext bug? How can I work around this to get emptyText to show up without having to sort the panel first?
No it's a feature. The point is to not show the empty text while the grid is loading data because it is not yet known whether there is data or not.
The feature is not needed when the data is all local though, so just add the following to the grid config:
viewConfig: {
deferEmptyText: false
}
Related
I have a view in ExtJS that contains a grid where the user can select an entry plus some panel with details about the currently selected row. Each time another row is selected the view is reloaded, which causes the grid to loose input focus for keyboard navigation.
How can I reload grid store data and keep input focus on the grid? My model defines idProperty and thus the correct row gets selected, but column selection and input focus gets lost. I am using ExtJS v7.3.0.55 with the Classic Triton theme.
Example
Extend the code in the existing Grid with JSON Store Sencha Fiddle with a data model and some grid event listener to reproduce the issue:
Ext.application({
name: 'Fiddle',
launch: function () {
// My data model with custom ID field
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'email', type: 'string'},
{name: 'phone', type: 'string'},
],
idProperty: 'email',
});
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
model: 'User',
proxy: {
type: 'ajax',
// Loading data from ./simpsons.json in the fiddle ./Data folder.
url: 'simpsons.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
height: 300,
width: "100%",
title: 'Simpsons',
store: 'simpsonsStore',
autoLoad: true,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
// Add some event handler to reload grid data, restore selected row
listeners: {
select: function (sender) {
console.log('grid selection update');
var record = sender.getSelected();
var store = sender.getStore();
store.load();
// This will restore the selected row, but grid focus is lost
sender.setSelected(record);
}
}
});
}
});
Try to put the selection in the store`s load handler:
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
height: 300,
width: "100%",
title: 'Simpsons',
// Using Named Store
store: 'simpsonsStore',
// Load the data
autoLoad: true,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
listeners: {
select: function (selectionRowModel, selectedRecord, selectedIndex) {
var store = selectionRowModel.getStore();
store.on('load', function(store) {
selectionRowModel.select(selectedIndex, true, true);
}, this, {
single: true
})
store.load();
}
}
});
I have using the Features - Filters for gridpanel, using local set to true like so
ftype: 'filters',
local: true
Applying the filter and trying in the textfield automatically enabled the Filter checkbox and the grid is filtered.
Unchecking the checkbox next to filter doesn't remove the filter, the checkbox disappears BUT the grid is still showing filtered records.
If I deleting everything in the textfield then all records are shown.
Edit
Here is an example of the columns, store and model. I have only included a example of the company field, model and store items... The store does work as the grid is being populated and the filter works the first time but then i can't remove the filter.
var columns = [{
header: 'Company',
minWidth: 200,
dataIndex: 'company',
stateId: 'company-stateid',
draggable: false,
flex: 10,
sortable: true,
doSort: oMe.performSort,
filter:
{
type: 'string'
}
Ext.define('APEX.model.CompanyModel', {
extend: 'Ext.data.Model',
fields: [
{name:'company', sortType:Ext.data.SortTypes.asUCString},
Ext.define('APEX.store.Company', {
extend: 'Ext.data.Store',
model: 'APEX.model.CompanyModel',
Ext.apply(me, {
store: mainStore,
columns: columns,
selModel: {
selType: 'rowmodel'
},
I have a problem like yours before, I solved that using this configuration :
//This is my model, you can use type if your field not a string...
Ext.define('EKOJS.model.m_mst_pemohon', {
extend: 'Ext.data.Model',
alias : 'widget.mst_pemohonModel',
fields : [{name: 'id_pemohon',type:'int'},'NIP','Nama_Pemohon','Telp','Email'],
idProperty : 'id_pemohon'
});
//this is my column in the grid
this.columns = [
{
header: 'id_pemohon',filterable:true,
dataIndex: 'id_pemohon',hidden:true
},{
header: 'NIP',filterable:true,
dataIndex: 'NIP'
},{
header: 'Nama_Pemohon',filterable:true,
dataIndex: 'Nama_Pemohon'
},{
header: 'Telp',filterable:true,
dataIndex: 'Telp'
},{
header: 'Email',filterable:true,
dataIndex: 'Email'
}];
// This is for grid filtering feature
this.features = [{
ftype: 'filters',
autoReload: true,
encode: false,
local: true
}
];
In case your problem, you can change your config to this, don't forget to adjust your model too :
var feature = [{
ftype: 'filters',
autoReload: true,
encode: false,
local: true
}
];
var columns = [{
header: 'Company',
minWidth: 200,
dataIndex: 'company',
stateId: 'company-stateid',
draggable: false,
flex: 10,
sortable: true,
doSort: oMe.performSort,
filterable:true
Ext.define('APEX.model.CompanyModel', {
extend: 'Ext.data.Model',
fields: [
{name:'company', sortType:Ext.data.SortTypes.asUCString},
Ext.define('APEX.store.Company', {
extend: 'Ext.data.Store',
model: 'APEX.model.CompanyModel',
Ext.apply(me, {
store: mainStore,
columns: columns,
feature: feature,
selModel: {
selType: 'rowmodel'
},
Hope this help you too.. :D
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(', '));
}
}
});
I have an Ext.grid.Panel with RowEditor plugin, and it contains a column with a combobox editor:
{
dataIndex: 'parentId',
text: 'Parent category',
editor: {
store: store,
valueField: 'categoryId',
displayField: 'name',
xtype: 'combobox',
allowBlank: true
}
The store looks like this:
var store = Ext.create('Ext.data.Store', {
model: 'Category',
autoLoad: true,
proxy: {
type: 'rest',
url: 'api/categories',
reader: {
type: 'json',
root: 'categories'
}
}
});
And model:
Ext.define('Neopod.model.Category', {
extend: 'Ext.data.Model',
fields: ['categoryId', 'name', 'parentId'],
})
When editing a grid row and clicking on combobox for the first time, then ExtJS triggers data load from the server and the roweditor cancels automatically. So user expected to see combo dropdown, but combo not opened and instead the edit mode cancels.
So why does ExtJS behave this way ?
A simple handling is to configure your combobox with: queryMode: 'local' so that it doesn't try to reload whenever it is expanded.
Using your example:
{
dataIndex: 'parentId',
text: 'Parent category',
editor: {
store: store,
valueField: 'categoryId',
displayField: 'name',
xtype: 'combobox',
allowBlank: true,
queryMode: 'local'
}
}
You can also try configuring your RowEditing plugin with autoCancel: false e.g.:
Ext.create('Ext.grid.plugin.RowEditing', {
pluginId: 'rowediting',
clicksToEdit: 2,
autoCancel: false
});
I am new to Ext JS and trying various options on Grid. I have created a grid and added it to panel(Ext.panel.Panel). The grid is getting displayed with empty data(I have not added proxy to it). On occurrence of some event I construct a JSON Object and trigger loadData on grid.
Following is my code snippet.
Ext.define('AM.view.grid.Details', {
extend: 'Ext.grid.Panel',
alias: 'widget.details',
title: 'Widget Data',
store: {
autolaod: true,
fields: [{
name: 'widgetid',
mapping: 'widget_id',
type: 'string'
}, {
name: 'widgetname',
mapping: 'widget_name',
type: 'string'
}, {
name: 'widgetnotes',
mapping: 'widget_notes',
type: 'String'
}],
reader: {
type: 'json'
}
},
width: 620,
height: 400,
forceFit: true,
columns: [{
header: 'id',
dataIndex: 'widgetid',
hidden: true
}, {
header: 'Name',
dataIndex: 'widgetname',
width: 150
}, {
header: 'Note',
dataIndex: 'widgetnotes',
width: 150
}],
renderTo: Ext.getBody()
});
I have a function which is a callback function of another widget. When an event occurs this function getTriggered.
function someFunction(grid) {
var jsonData = formGridData();
grid.store.loadData(jsonData);
}
Please assume that grid is created and I have function formGridData() which converts the formed String to JSON Object and returns.
So when I run the app, If the jsonData is of length 5 then 5 empty rows appear in the grid.
Following is the JSONData
[{
'widget_id': 'widget-1',
'widget_name': 'gridpanel',
'widget_notes': 'This is used to handle..'
}, {
'widget_id': 'widget-2',
'widget_name': 'combo',
'widget_note': 'This is used to handle..'
}, {
'widget_id': 'widget-3',
'widget_name': 'panel',
'widget_note': 'This is used to handle..'
}]
Is there anything wrong in what I am doing?
Thanks,
Phani
Your dataIndexes on the grid are wrong.
columns: [{
header: 'id',
dataIndex: 'widget_id', //was widgetid
hidden: true
}, {
header: 'Name',
dataIndex: 'widget_name', //was widgetname
width: 150
}, {
header: 'Note',
dataIndex: 'widget_notes', //was widgetnotes
width: 150
}]
What is happening is it is seeing the right amount of rows, but since the json you have as an example is named widget_* and note widget*, it thinks they are something else, and thus can not show them in the grid as appropriate
Sorry i didn't noticed that
So it seems your dataIndex is invalid
http://jsfiddle.net/ssxenon01/WpZMU/8/