I'm trying to make a grid editor that will automatically advance to the next column after 5 characters are typed in the first column. I've put together what I think is the right code for this, but the selected column keeps jumping back to the first one and clears the data that was entered.
Here is the grid that I'm using:
Ext.create('Ext.grid.Panel', {
title: 'idNumbers',
store: Ext.data.StoreManager.lookup('priceStore'),
plugins: [Ext.create('Ext.grid.plugin.RowEditing',
{
clicksToEdit: 1,
pluginId: 'idNumberGridEditor'
})],
columns: [
{
header: 'Name',
dataIndex: 'idNumber',
editor: {
allowBlank: false,
xtype: 'combobox',
store: Ext.data.StoreManager.lookup('idNumberStore'),
displayField: 'idNumber',
valueField: 'idNumber',
typeAhead: true,
allowBlank: false,
forceSelection: true,
enableKeyEvents: true,
listeners: {
keyup: function(combo, e, eOpts) {
if(combo.getValue().length==5)
{
//move to next control
if(!this.nowFive)
{
editPlugin = this.up().editingPlugin;
curRow = editPlugin.context.rowIdx;
curCol = editPlugin.context.colIdx;
editPlugin.startEdit(curRow, curCol + 1);
this.nowFive = true;
}
}
else
{
this.nowFive = false;
}
}
}
}
},
{
header: 'Phone',
dataIndex: 'price',
editor: {
allowBlank: false,
xtype: 'numberfield'
}
}
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
listeners: {
afterrender: function() {
console.log(this);
//this.editor.startEdit(1,1);
}
}
});
Here is the full example: http://jsfiddle.net/cFD9W/5/
startEdit will reset the edit state (it is intended to be used in conjunction with completeEdit or cancelEdit. What you want here is just to focus the next field, this way the edit state will be handled correctly by the plugin.
Here's a rewrite of your listener in that spirit (updated fiddle):
keyup: function(combo, e, eOpts) {
if(combo.getValue().length==5) {
//move to next control
if(!this.nowFive) {
var editPlugin = this.up().editingPlugin,
editor = editPlugin.getEditor(), // Ext.grid.RowEditor
curCol = editPlugin.context.colIdx,
currentField = editor.getEditor(curCol),
nextField = editor.getEditor(curCol + 1);
if (currentField) {
// ensure the combo is collapsed when the field is blurred
currentField.triggerBlur();
}
if (nextField) {
// startEdit will reset the edit state... What we need
// is simply to focus the field, the value will be
// updated when the user clicks the "update" button.
nextField.focus();
}
this.nowFive = true;
}
} else {
this.nowFive = false;
}
}
Finally, as already said by Akori, if you set forceSelection to true, the combo value will be forced to one that already exists in the store, which is probably not what you want.
Related
I need to change a combox (single selection) by a tagfield (multiselect) in a big form.
A request was made so that each tagfield item (list of cars) could be associated with a field to enter the value of each car.
What is the best solution to solve this question?
One possible solution is that it is exemplified in the fiddle that follows.
Whenever the user selects a tagfield item, a fieldecontainer with two textfields is dynamically added to the fom: the first one having the same name as the selected tagfield item and the second is for the car value.
My first problem to solve is: when a tagfield list item is deselected remove the corresponding fieldcontainer.
The second problem is to collect the values of each fieldcontainer (car name and respective price value) and send them together to the server side.
FIDDLE: https://fiddle.sencha.com/#view/editor&fiddle/1s6e
I'd just assign the field containers to a hash or something as I added them and then hide them as necessary.
beforeselect: function (combo, record, eOpts) {
var valueTagItem = record.get('name', this);
if (!Ext.isDefined(this.carFields)) {
this.carFields = {};
}
if (!Ext.isDefined(this.carFields[valueTagItem])) {
this.carFields[valueTagItem] = this.up('form').add({
xtype: 'fieldcontainer',
padding: '7 0 7 0',
defaults: {
hideLabel: true,
},
layout: {
type: 'hbox',
align: 'strech'
},
items: [{
xtype: 'textfield',
name: 'text',
value: valueTagItem,
editable: false,
padding: '0 3 5 0',
flex: 1
}, {
xtype: 'textfield',
name: 'value',
emptyText: 'car value',
submitEmptyText: false,
allowBlank: false,
minWidth: 100,
flex: 0.5
}]
});
}
this.carFields[valueTagItem].show();
},
beforedeselect: function (combo, record, index, eOpts) {
var valueTagItemdeselect = record.get('name', this);
this.carFields[valueTagItemdeselect].hide();
}
To send all of the values to the server just do a this.up('form').getForm().submit() or whatever.
I am using Ext.grid.CheckboxSelectionModel with Ext.grid.GridPanel to display grid with checkbox column.
But when I am clicking on row checkbox also get seleted.
I want checkbox should not get selected while selecting row of grid.
Is there any way to achieve this.
Below is my code snippet.
var cboxSelModel =new Ext.grid.CheckboxSelectionModel({
checkOnly : true,
width:100,
header: defaultVal,
id: 'test',
locked: true,
singleSelect: true,
listeners: {
rowselect: function (sm, rIndex, keepExisting, record) {
uncheckIndex = -1;
cIndex =rIndex;
updateDefaultValue();
},
rowdeselect: function (sm, rIndex, keepExisting, record) {
cIndex = -1;
uncheckIndex =rIndex;
updateDefaultValue();
}
}
});
grid = new Ext.grid.GridPanel({
id:'grid',
width:'99%',
border:true,
store: store,
tbar: toolBar,
autoscroll: false,
height :'100px',
autoHeight :false,
sm: cboxSelModel,
cm :cm,
height:150,
layout: 'fit',
stateful: true,
stateId: 'grid',
autoScroll:true,
enableColumnResize : false,
enableColumnMove : false,
viewConfig:{
forceFit:true,
scrollOffset:0
},
autoFitColumns: true,
listeners: {
afterrender: function() {
setSelectedRows();
var store=grid.getStore();
if(store.data.length > 0 ){
Ext.getCmp('btnSort').setDisabled(false);
Ext.getCmp('btnSort').setIconClass('bmcSort');
}
},delay: 1000,
cellClick :function(iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent){
storeindex = iCellEl;
var record = grid.store.getAt(iCellEl);
var dValue=record.get('displayValue');
var sValue=record.get('storedValue');
var dataArray = getListData();
sValue=dataArray[iCellEl][1];
sValue = Ext.util.Format.htmlDecode(sValue);
dValue = Ext.util.Format.htmlDecode(dValue);
document.getElementById(InputPageComp.ComponentVars.storedValue).value=sValue;
document.getElementById(InputPageComp.ComponentVars.displayValue).value=dValue;
document.getElementById('addbtn_id').style['display']= 'none';
document.getElementById('updatebtn_id').style['display']= 'block';
Ext.getCmp('btnRemove').setDisabled(false);
Ext.getCmp('btnRemove').setIconClass('bmcDeleteSLT');
grid.getSelectionModel().selectRow(iCellEl);
}
}
});
var sm = Ext.create('Ext.selection.CheckboxModel',{
checkOnly: true
});
I have tested. It should work
Try like this (in grid configs):
selModel: {
selType: 'checkboxmodel',
checkOnly: true
}
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1ncs
I am using JQuery EasyUI 1.3.4, I am having some trouble catching onUnselect event, following code illustrates my problem:
function NavigateProcess() {
$(function () {
var data = list;
$('#dg').datagrid({
view: detailview,
cache: true,
data: data,
loadMsg: 'Processing, please wait …',
singleSelect: true,
columns: [[
{
title: 'Name', field: 'Name', width: 180, editor: 'text'
//,formatter: formatProgress
},
{ field: 'ID', title: 'ID', width: 60, align: 'right', editor: 'text' },
{ field: 'RatePlan', title: 'RatePlan', width: 80, editor: 'text' },
{ field: 'ActivationDate', title: 'ActivationDate', width: 80, editor: 'text' },
{ field: 'DataType', title: 'DataType', hidden: 'true' }
]],
onUnselect: function (rowIndex, rowData) {
alert('unselect');
if (lastselectedrow) {
$('#dg').datagrid('endEdit', lastselectedrow);
}
},
onSelect: function (rowIndex, rowData) {
alert('select');
lastselectedrow = rowIndex;
$('#dg').datagrid('beginEdit', rowIndex);
},
detailFormatter: function (index, row) {
return '<div style="padding:1px"><table id="ddv-' + index + '"></table></div>';
}
});
});
function doSearch() {
$('#tt').datagrid('load', {
itemid: $('#itemid').val(),
productid: $('#productid').val()
});
}
}
I put two alert statements in onSelect and onUnselect events, onSelect is triggered when I click on a row. Since singleSelect property is true, selecting another row will result in an onUnselect and onSelect events, at least that's my understanding. When I click on rows only onSelect alert pops up, alert of onUnselect never pops up, can somebody point me how to capture onUnselect event? Any help will be appreciated.
there is an inherent bug that prevents invoking onUnselect event
I have added an input field to Window's title bar (header). On Chrome selecting and editing the input field works, and I can still drag the window around. On Firefox I can drag the window around the viewport, but I am unable to select the input field and edit it. How should I correct this code so that it would work on both browsers?
Quick'n'dirty demonstration of the problem:
Ext.define('Demo.DemoWindow', {
extend: 'Ext.window.Window',
xtype: 'demowindow',
height: 300,
width: 400,
title: 'Window',
autoShow: true,
items: [{
xtype: 'button',
text : 'Press!',
listeners: {
click: function() {
var win = this.up('window');
var header = win.getHeader();
header.setTitle('');
var killDrag = false;
var dragEvent = win.dd.on({
beforedragstart: function(dd, e) {
if (killDrag) {
return false;
}
}
});
var field = Ext.create('Ext.form.field.Text', {
name: 'Title',
allowBlank: false,
value: 'Type here something!',
listeners: {
el: {
delegate: 'input',
mouseout: function() {
killDrag = false;
},
mouseenter: function() {
killDrag = true;
}
}
}
});
header.insert(0, field);
}
}
}]
});
Ext.application({
name: 'Demo',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'absolute',
items: [
{
xtype: 'demowindow',
x: 20,
y: 20,
}
]
});
}
});
Using the mouseover event instead of mouseenter seems to work well with both.
I got a problem on Ext 4.1.0 and Ext 4.1.1
Double click first cell to edit it and then click window close button, the editor still floats on the page.But it is ok for last cell.
Anyone met this problem before? Thanks
Ext.onReady(function(){
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var table = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{
text: 'Name',
dataIndex: 'name',
editor: { xtype: 'textfield', toFrontOnShow: false }
},
{
text: 'Email',
dataIndex: 'email',
flex: 1
},
{
text: 'Phone',
dataIndex: 'phone',
editor: {
xtype: 'numberfield',
hideTrigger: true,
validateOnChange : false
}
}
],
height: 200,
width: 400,
plugins:[ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})]
});
var window = new Ext.Window({
id: 'abc',
title :'abc',
modal : true,
layout: 'border',
resizable : true,
draggable : true,
closable : true,
closeAction : 'hide',
width :410,
height :210,
items : [table]
});
window.show();
});
The easiest way to handle this for you, would be to listen to the window's beforeclose event and cancel any editing in this event using the celleditor's cancelEdit method as described here in the docs.
For example, here is your window object (from your code above) with the listener applied:
var window = new Ext.Window({
id: 'abc',
title :'abc',
modal : true,
layout: 'border',
resizable : true,
draggable : true,
closable : true,
closeAction : 'hide',
width :410,
height :210,
items : [ table],
// add this listener to your window
listeners: {
beforeclose: function(panel) {
var view = panel.down('gridview');
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
}
}
});
Reply to comment:
Here's an override that would do the same thing. You would have to include this override in each app after ExtJS initialization though.
Of course it is also possible to replace the init function in the Ext.grid.plugin.Editor source code with this one (then you wouldn't have to include the override in the app) but I wouldn't recommend doing that for a number of reasons.
Ext.override(Ext.grid.plugin.Editor, {
init: function(grid) {
// the normal init code (below) must be included in the override
var me = this;
me.grid = grid;
me.view = grid.view;
me.initEvents();
me.mon(grid, 'reconfigure', me.onReconfigure, me);
me.onReconfigure();
grid.relayEvents(me, [
'beforeedit',
'edit',
'validateedit',
'canceledit'
]);
grid.isEditable = true;
grid.editingPlugin = grid.view.editingPlugin = me;
// additional code to cancel editing before a grid is hidden
grid.on('beforehide', function(grid) {
var view = grid.view;
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
});
// additional code to cancel editing before a grid is destroyed
grid.on('beforedestroy', function(grid) {
var view = grid.view;
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
});
}
});
I would also recommend looking into MVC architecture, it would make handling things like this alot easier for you.