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();
}
}
});
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
}
});
I have the following code in which I want to make the title as selectable. As it is a header the .x-selectable class is getting added.
The code is as follows
Ext.create('Ext.grid.Panel', {
renderTo: document.body,
store: userStore,
width: 400,
height: 200,
title: 'Application Users',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
text: 'Email Address',
width: 150,
dataIndex: 'email',
hidden: true
},
{
text: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
});
Is there any work around for this issue ?
You can use selectable()
selectable( ) : Ext.Element
Enable text selection for this element
(normalized across browsers)
You need need to get your grid title header element & need to call this function.
Like this:
<yourGrid>.getHeader().el.selectable();
Can be done in afterrender listener of grid:
listeners: {
afterrender: function(grid){
grid.down('header').getHeader().selectable();
},
},
For EXTJS 3.3.1 we need to remove the selectStart listener applied by default by extjs using removeAllListeners():
listeners: {
afterrender: function(panel){
panel.header.removeAllListeners();
}
}
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
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