Is there a solution to extend the KeyMap of the ItemSelector?
I would like to add a keymap(like pageUp and pageDown keyEvent in itemselector) that when I press the letter 'A-Z' will take me to the item that starts with the letter pressed and select it.
You can use the following override (fiddle sample) to achieve it. It will not work correctly on view sore reload. And you will have to define the record search record field. In case of complicated view templates you can remove hardcoded search function and use it as a setting.
Ext.define('overrides.view.NavigationModel', {
override: 'Ext.view.NavigationModel',
searchRecordField: false,
initKeyNav: function (view) {
var me = this;
// Drive the KeyNav off the View's itemkeydown event so that beforeitemkeydown listeners may veto.
// By default KeyNav uses defaultEventAction: 'stopEvent', and this is required for movement keys
// which by default affect scrolling.
var keyNavConfig = {
target: view,
ignoreInputFields: true,
eventName: 'itemkeydown',
defaultEventAction: 'stopEvent',
processEvent: me.processViewEvent,
up: me.onKeyUp,
down: me.onKeyDown,
right: me.onKeyRight,
left: me.onKeyLeft,
pageDown: me.onKeyPageDown,
pageUp: me.onKeyPageUp,
home: me.onKeyHome,
end: me.onKeyEnd,
space: me.onKeySpace,
enter: me.onKeyEnter,
A: {
ctrl: true,
// Need a separate function because we don't want the key
// events passed on to selectAll (causes event suppression).
handler: me.onSelectAllKeyPress
},
F: me.onAlphabetKeyPress,
scope: me
};
if(this.view.searchRecordField) {
keyNavConfig = Ext.Object.merge(keyNavConfig, this.getAdditionalKeyNav());
}
me.keyNav = new Ext.util.KeyNav(keyNavConfig);
},
getAdditionalKeyNav: function() {
var keyNav = {};
this.view.getStore().each(function(record) {
var firstLetter = record.get(this.view.searchRecordField)[0].toUpperCase();
if(!keyNav[firstLetter]) {
keyNav[firstLetter] = this.onAlphabetKeyPress
}
}, this);
return keyNav;
},
onAlphabetKeyPress: function(keyEvent) {
const key = keyEvent.event.key;
var foundRecordIndex = this.view.getStore().findBy(function(record) {
return record.get('title').toLowerCase().indexOf(key) === 0;
}, this);
if(foundRecordIndex > -1) {
this.setPosition(foundRecordIndex, keyEvent);
}
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('ListItem', {
extend: 'Ext.data.Model',
fields: [{
name: 'src',
type: 'string'
}, {
name: 'caption',
type: 'string'
}]
});
Ext.create('Ext.data.Store', {
id: 'ListItemsStore',
model: 'ListItem',
data: [{
title: "One"
}, {
title: "Two"
}, {
title: "Three"
}, {
title: "Four"
}, {
title: "Three"
}, ]
});
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<span>{title}</span>',
'</div>',
'</tpl>'
);
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('ListItemsStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
// Search Record Field
searchRecordField: 'title',
renderTo: Ext.getBody()
});
}
});
In my extjs6 project I have this long running method. Starting with a loaded store, it groups by 'instrument', then creates an array with each item of that 'instrument', then creates a new store with only that data, then creates a series for a extjs chart, and adds the series to the chart.
there is a ton of data with about 100 instruments and a daily number for 2-3 years of data for each instrument. the process takes a long time and I want to update the mask window to say which instrument is being updated so the user can see what is going on.
How can I update the mask message in the middle of this long running method?
var me = this;
var myMask = Ext.get(me.windowCumulative.getEl()).mask('hello');
var task = new Ext.util.DelayedTask(function () {
//fadeout section
myMask.fadeOut({
duration: 500,
remove: true
});
//convert sql date to date datatype
myStoreTab1.each(function (record) {
record.set('filedate', new Date(record.get('filedate')));
});
myStoreTab1.sort('filedate');
myStoreTab1.group('instrument');
myStoreTab1.getGroups().each(function (group, i) {
var groupName = group._groupKey;
var targetStore = Ext.create('Ext.data.Store', {
model: 'xxx.model.HistoricalInstrumentProfitModel'
});
var records = [];
group.each(function (record) {
records.push(record.copy());
});
targetStore.add(records);
var series = {
type: 'line',
axis: 'left',
xField: 'filedate',
yField: 'cumulativePl',
store: targetStore,
title: groupName,
tooltip: {
trackMouse: true,
renderer: 'onSeriesTooltipRender'
}
};
me.chartTab1.addSeries(series);
//me.chartTab1.redraw();
//me.windowCumulative.setLoading(false);
console.log('added series: ' + groupName);
});
});
task.delay(500);
//debugger;
//me.chartTab1.redraw();
UPDATE...
for every group I run this
function DoMask(step, panel, countGroups, group, chart) {
setTimeout(function () {
var groupName = group._groupKey;
var targetStore = Ext.create('Ext.data.Store', {
model: 'xxx.model.HistoricalInstrumentProfitModel'
});
var records = [];
group.each(function (record) {
records.push(record.copy());
});
targetStore.suspendEvents();
targetStore.add(records);
var series = {
type: 'line',
axis: 'left',
xField: 'filedate',
yField: 'cumulativePl',
store: targetStore,
title: groupName,
tooltip: {
trackMouse: true,
renderer: 'onSeriesTooltipRender'
}
};
chart.addSeries(series);
console.log('added series: ' + groupName);
console.log(count);
panel.mask('step : ' + count);
if (count == countGroups) {
chart.resumeEvents();
chart.resumeLayouts();
chart.resumeChartLayout();
chart.redraw();
panel.unmask();
}
count = count + 1;
}, 500);
}
Take a look at these two ways to present the progress to the user:
Here is the FIDDLE
Ext.application({
name: 'Fiddle',
launch: function () {
var count;
var p = Ext.create('Ext.ProgressBar', {
width: 300,
textTpl: 'my Progress {value*100}%'
});
var window = Ext.create('Ext.window.Window', {
title: 'Progress',
modal:true,
hidden:true,
closable:false,
items:[
p
]
});
var panel = Ext.create('Ext.panel.Panel', {
title: 'teste',
height: 400,
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'START LONG PROCESS MASK',
handler: function () {
count = 0;
this.up('panel').mask('Start');
DoMask(count);
}
}, {
xtype: 'button',
text: 'START LONG PROGRESS BAR',
handler: function () {
count = 0;
window.show();
DoProgress(count);
}
}]
});
function DoMask(step) {
setTimeout(function () {
panel.mask('step : ' + step);
count++;
if (count <= 10) {
DoMask(count);
} else {
panel.unmask();
}
}, 500);
}
function DoProgress(step) {
setTimeout(function () {
p.setValue(step/10);
count++;
if (count <= 10) {
DoProgress(count);
} else {
window.hide();
}
}, 500);
}
}
});
I have a grid and use rowactions grouping plugin to have an action button in the grouping header. The fist visible column in the grid is a checkbox column. I need to make the checkboxes in the same group behave the same way. 1) if a user checks one of the checkboxes, all boxes in the same group has to be checked. 2) Also I need to look at another field in the same row and if it doesn't have a value, disable checkboxes (all in the same group), otherwise all checkboxes should be enabled.
I also tried xtype:checkbox. For #1 I just cannot figure out how to get the siblings. I tried using the checkchange - I could get a record there - but I don't know how to get other records from the same group. For #2 - how do I get the record - I need to check one of the values and set the ckeckbox enabled/disabled.
Any ideas?
Thank you.
EDIT: for #2 I went with disable checkcolumn for some rows answer here
This is my index.cshtml
<script type="text/javascript">
Ext.require([
'Ext.container.Viewport',
'Ext.grid.*',
'Ext.util.*',
'Ext.Date.*',
'Ext.ux.CheckColumn',
'ACTGRID.ui.GroupPanelGrid'
]);
Ext.onReady(function () {
initialize();
});
function initialize() {
Ext.Ajax.timeout = 60000; // 60 seconds
var myGrid = Ext.create('ACTGRID.ui.GroupPanelGrid');
var viewport = Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'center',
title: 'Grid',
items: myGrid }]
});
};
</script>
This is the GroupPanelGrid.js:
Ext.Date.patterns = {
ISO8601Long: "Y-m-d H:i:s",
ISO8601Short: "Y-m-d",
ShortDate: "n/j/Y",
LongDate: "l, F d, Y",
FullDateTime: "l, F d, Y g:i:s A",
MonthDay: "F d",
ShortTime: "g:i A",
LongTime: "g:i:s A",
SortableDateTime: "Y-m-d\\TH:i:s",
UniversalSortableDateTime: "Y-m-d H:i:sO",
YearMonth: "F, Y"
};
Ext.define('ACTGRID.ui.TransactionsLateModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Approval', type: 'boolean' },
{ name: 'ErrorComment', type: 'string' },
{ name: 'ErrorSource', type: 'string'},
{ name: 'RecordDate', type: 'date', dateFormat: 'MS' }],
idProperty: 'Id'
});
Ext.define("ACTGRID.ui.GroupPanelGrid", {
extend: "Ext.grid.Panel",
requires: ['ACTGRID.ui.TransactionsLateModel',
'Ext.ux.grid.RowActions',
'Ext.grid.feature.Grouping'],
initComponent: function () {
var me = this;
me.features = [Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Grouping Header: {name} ({rows.length}
Item{[values.rows.length > 1 ? "s" : ""]})',
enableGroupingMenu: false })];
me.columns = me.buildColumns();
me.store = Ext.create('Ext.data.Store', {
model: 'ACTGRID.ui.TransactionsLateModel',
remoteSort: true,
storeId: 'TransactionsLateStoreId',
autoLoad: true,
buffered: true,
autoSync: true,
groupField: 'RecordDate',
pageSize: 70,
proxy: {
type: 'rest',
timeout: 600000,
url: '/Home/ActionsGrid/',
reader: {
type: 'json',
root: 'transaction',
totalProperty: "Total"
},
writer: {
type: 'json',
root: 'transaction'
}
}
});
me.autoSizeColumns = true;
me.autoScroll = true;
me.forcefit = true;
me.callParent(arguments);
},
buildColumns: function () {
var me = this;
return [
{
xtype: 'rowactions', hidden: true, hideable: false,
actions: [{}],
keepSelection: true,
groupActions: [{
iconCls: 'icon-grid',
qtip: 'Action on Group',
align: 'left',
callback: function (grid, records, action, groupValue) {
var rec = [].concat(records);
/*does something unrelated*/
}
}]
},
{
text: 'Approval', dataIndex: 'Approval', sortable: true,
width: 50,
xtype: 'checkcolumn',
listeners: {
checkchange: function (column, recordIndex, checked) {
var record = me.getStore().data.items[recordIndex].data;
/* Do something here? - How do I get all the siblings */
},
beforerender: function (e, eOpts) {
/* How do I check another cell in this row to see if it has a value
And disable the ckeckbox and set it read only? */
}
}
},
{ text:'ErrorComment', dataIndex: 'ErrorComment' },
{ text:'ErrorSource', dataIndex: 'ErrorSource'},
{ text:'RecordDate', dataIndex: 'RecordDate', renderer: Ext.util.Format.dateRenderer (Ext.Date.patterns.ShortDate)}];
},
height: 600,
width: 'auto'
});
Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
return View();
}
[AcceptVerbs(HttpVerbs.Get)]
[ActionName("ActionsGrid")]
public ActionResult GetActionsGrid()
{
DetailsViewModel model = new DetailsViewModel();
List<ExtJsTreeGrid.Models.ActionGrid> ActionsFromDB = model.GetActionsGrid();
model.transaction = ActionsFromDB;
model.success = true;
return Json(model, JsonRequestBehavior.AllowGet);
}
[AcceptVerbs(HttpVerbs.Put)]
[ActionName("ActionsGrid")]
public ActionResult SetActionsGrid()
{
// do something
}
}
Model:
public class ActionGrid
{
public Int32 Id { get; set; }
public bool Approval { get; set; }
public string ErrorComment { get; set; }
public string ErrorSource { get; set; }
public DateTime RecordDate { get; set; }
}
public class DetailsViewModel
{
public List<ActionGrid> transaction = new List<ActionGrid>();
public bool success = true;
public List<ActionGrid> GetActionsGrid()
{
return new List<ActionGrid> {
new ActionGrid { Id = 1,
Approval = true,
ErrorComment = "Comment",
ErrorSource = string.Empty,
RecordDate = new DateTime(1979, 11, 23)
},
new ActionGrid { Id = 5,
Approval = true,
ErrorComment = "Comment",
ErrorSource = "brodas",
RecordDate = new DateTime(1979, 11, 23)
},
new ActionGrid { Id = 6,
Approval = true,
ErrorComment = "Comment",
ErrorSource = string.Empty,
RecordDate = new DateTime(1979, 11, 23)
},
new ActionGrid { Id = 7,
Approval = true,
ErrorComment = string.Empty,
ErrorSource = "brodas",
RecordDate = new DateTime(1979, 11, 23)
},
new ActionGrid { Id = 2,
Approval = true,
ErrorComment = string.Empty,
ErrorSource = string.Empty,
RecordDate = new DateTime(1980, 05, 20)
},
new ActionGrid { Id = 3,
Approval = true,
ErrorComment = "Comment",
ErrorSource = "brodas",
RecordDate = new DateTime(1995, 01, 12)
},
new ActionGrid { Id = 4,
Approval = true,
ErrorComment = string.Empty,
ErrorSource = string.Empty,
RecordDate = new DateTime(2010, 09, 02)
},
new ActionGrid { Id = 8,
Approval = true,
ErrorComment = string.Empty,
ErrorSource = "brodas",
RecordDate = new DateTime(2010, 09, 02)
},
new ActionGrid { Id = 9,
Approval = true,
ErrorComment = "Comment Errors",
ErrorSource = string.Empty,
RecordDate = new DateTime(2010, 09, 02)
},
new ActionGrid { Id = 10,
Approval = true,
ErrorComment = "Comment Errors",
ErrorSource = "brodas",
RecordDate = new DateTime(2010, 09, 02)
},
new ActionGrid { Id = 11,
Approval = true,
ErrorComment = string.Empty,
ErrorSource = "brodas",
RecordDate = new DateTime(2010, 09, 02)
}};
}
For requirement #1, the checkchange listener is indeed the right place to implement it.
To get all the records in the group, you need to grab a reference to the grid's store, and then use its query method, with your grouping field, and the value in the checked record.
Here's an example:
checkchange: function(col, index, checked) {
var grid = col.up('tablepanel'),
store = grid.getStore(),
record = store.getAt(index),
group = record.get('group'),
// returns a MixedCollection (not a simple array)
groupRecords = store.query('group', group);
// apply the same check status to all the group
groupRecords.each(function(record) {
record.set('checked', checked);
});
}
For your second requirement, I don't really understand when you want it to happen.
Anyway, the check column doesn't support disabling at the row level, so you'll have to implement that first.
The simplest way to do that is to add a field to your model to hold the disabled state. Let's call it 'disabled'. Then, you need two things.
First, render the checkbox disabled state. For that, let's override the renderer of the check column:
,renderer: function(value, meta) {
// Adding disabled class according to record's checkable
// field
if (meta.record.get('disabled')) {
meta.tdCls += ' ' + this.disabledCls;
}
// calling the overridden method (cannot use callParent
// since we haven't define a new class)
return Ext.grid.column.CheckColumn.prototype.renderer.apply(this, arguments);
}
Next, we need to prevent checking or unchecking disabled records. That can be done in the beforecheckchange event:
,beforecheckchange: function(col, index) {
var grid = col.up('tablepanel'),
store = grid.getStore(),
record = store.getAt(index);
if (record.get('disabled')) {
return false;
}
}
Now, you can just enable/disable a record's checkbox by setting the record's 'disabled' field.
record.set('disabled', true); // enable
record.set('disabled', false); // disable
Complete Example
Here's a complete example that implements your first requirement and, maybe, your second one. If that not what you meant for the second requirement, that should take you almost there...
The example can be seen running in this fiddle.
Ext.widget('grid', {
renderTo: Ext.getBody()
,height: 300
,features: [{ftype: 'grouping'}]
,store: {
proxy: {type: 'memory', reader: 'array'}
,fields: [
'name', // something to see
'group', // grouping field
'checkable', // for req #2
'checked', // for check column
'disabled' // for disabled state
]
,groupField: 'group'
,data: [
['Foo 1', 'foo', true],
['Foo 2', 'foo', false],
['Foo 3', 'foo', true],
['Bar 1', 'bar', false],
['Bar 2', 'bar', true],
['Baz 1', 'baz', false],
['Baz 2', 'baz', false],
['Baz 3', 'baz', true]
]
}
,columns: [{
xtype: 'checkcolumn'
,width: 50
,dataIndex: 'checked'
,listeners: {
checkchange: function(col, index, checked) {
var grid = col.up('tablepanel'),
store = grid.getStore(),
record = store.getAt(index),
group = record.get('group'),
// returns a MixedCollection (not a simple array)
groupRecords = store.query('group', group),
// for req #2
disableGroup = !record.get('checkable');
groupRecords.each(function(record) {
record.set('checked', checked);
// Here's how to disable the group... If that's
// really what you want.
record.set('disabled', disableGroup);
});
}
// Returning false from this listener will prevent the
// check change. This is used to implement disabled
// checkboxes.
,beforecheckchange: function(col, index) {
var grid = col.up('tablepanel'),
store = grid.getStore(),
record = store.getAt(index);
if (record.get('disabled')) {
return false;
}
}
}
,renderer: function(value, meta) {
// Adding disabled class according to record's checkable
// field
if (meta.record.get('disabled')) {
meta.tdCls += ' ' + this.disabledCls;
}
// calling the overridden method (cannot use callParent
// since we haven't define a new class)
return Ext.grid.column.CheckColumn.prototype.renderer.apply(this, arguments);
}
},{
dataIndex: 'name'
,text: "Name"
,flex: 1
},{
dataIndex: 'checkable'
,text: "Checkable"
}]
});
as for my case, i have a separate checkbox outside my gridpanel which controls the selection of the checkcolumn.
//Avoid view update after each row
grid.store.suspendEvents();
grid.store.each(function(rec) {
rec.set('ctrl_select_flag', ctrl.value);
});
grid.store.resumeEvents();
grid.getView().refresh();
ctrl.value refers to the component which controls my checkcolumn selection. ctrl_select_flag refers to the dataIndex of my checkcolumn.