How to restore grid focus after data reload in ExtJS? - javascript

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();
}
}
});

Related

How to manage specific checkboxes on a grid with checkboxmodel

I would like to manage specific checkboxes while loading/render grid with checkboxmodel.
How I can hide or set value for some checkboxes depending on other column value?
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
scrollable: true,
store: {
type: 'mystore'
},
selModel: {
selType: 'checkboxmodel'
},
listeners: {
"onCheckboxRender" : function ( me, selected, eOpts ) {
if(selected.data['id'] == 2) {
//hide or check checkbox
}
}
columns: [{
text: 'id',
dataIndex: 'id'
}, {
text: 'company',
dataIndex: 'company'
}]
}
The result should be like on photo:
Is it possible to make with checkboxmodel plugin or i need to use 'checkcolumn'?

grid live search extjs

My live search grid works fine but when I click on next page or do other thing about the grid, the search grid lose highlight terms search,does anyone help me what do I do? I want to keep highlighted terms search in all page. Thanks
bellow a snippet of my code:
var pagingStore = Ext.create('Ext.data.Store', {
proxy: {
type: 'memory',
enablePaging: true
},
remoteFilter: true,
pageSize: 5
}),
remoteStore = Ext.create('Ext.data.Store', {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'js/json/pagingStore.json',
reader: {
rootProperty: 'items'
}
},
fields: ['name', 'email', 'phone', 'type']
});
remoteStore.load(function () {
pagingStore.getProxy().setData(remoteStore.getRange());
pagingStore.load();
});
var bbar = new Ext.PagingToolbar({
store: pagingStore, //the store you use in your grid
displayInfo: true,
items: [ {
xtype: 'textfield',
name: 'searchField',
id: 'txtfield',
fieldLabel:'Search:',
labelAlign:'right',
emptyText:'search...',
width: 300,
listeners: {
change: {
fn: onTextFieldChange
}
}
}
]
});
bbar.down('#refresh').hide();
Ext.create('Ext.grid.Panel', {
height: 400,
title: 'Simpsons',
id: 'gridPanel',
store: pagingStore,
columns: [{
text: 'Name',
dataIndex: 'name',
filterable: true
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
},
{
text: 'Type',
dataIndex: 'type'
}],
bbar: bbar,
renderTo: Ext.getBody()
});
So I answer my own question, I've created a highlight() method and put it on the container: after field search input on each click, the highlight stay on the search terms: ;)
cont.getEl().on({
click: {
fn: highlight
}
});

ExtJs clear checkboxes in a tree panel

In a extjs app, I have a tree panel that is loading json data from a store. In that information I have a property checked that allows manipulate a checkbox over a row in the tree panel.
How can I do to uncheck graphically the checkbox by listening a button? (Clean all checked boxes)
Here's a fiddle that explain a bit the situation.
https://fiddle.sencha.com/#fiddle/17v3
Update your code like so:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('modeloCapa', {
extend: 'Ext.data.Model',
fields: ['nombre']
});
var treeStore = Ext.create('Ext.data.TreeStore', {
model: 'modeloCapa',
proxy: {
type: 'ajax',
url: "data1.json",
reader: {
type: 'json',
root: 'Result'
}
}
});
var tree = Ext.create('Ext.tree.Panel', {
title: 'Test',
width: 500,
store: treeStore,
rootVisible: false,
renderTo: Ext.getBody(),
columns: [{
xtype: 'treecolumn',
flex: 2,
sortable: true,
dataIndex: 'titulo'
}],tbar: [{
xtype: 'button',
id: 'btnApagarCapas',
text : 'Button',
width: 100,
tooltip: 'Uncheck!!',
iconAlign : 'center',
listeners: {
click : function(){
treeStore.suspendEvents();
treeStore.getRootNode().cascadeBy(function(node) {
if (node.get('checked')) {
node.set('checked', false);
}
});
treeStore.resumeEvents();
tree.getView().refresh();
}
}
}]
});
}
});
Loop over all the nodes, uncheck the ones that are checked. The suspend events is to prevent the view from refreshing each node as it is unchecked, just do it in bulk at the end.

Javascript ExtJS emptyText doesn't show on Ext.grid.Panel

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
}

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

Categories