Develop Reference

Unable to select fields in the grid Sencha Extjs

I have a datagrid in my code and I am hoping to click through the text and copy it to clipboard but the app is not letting me copy it. Here is some code. Not sure how to enable selection.
Ext.define('xxxxx', {
extend: 'Ext.grid.Panel',
alias: 'widget.xxxxxx',
requires: [
'Ext.grid.*',
'Ext.util.*',
'Ext.data.*',
'Ext.XTemplate',
'Ext.grid.plugin.BufferedRenderer',
...
],
xtype : 'gridpanel',
viewConfig: {
enableTextSelection : true
},
itemId: 'gridId',
ui: 'uipanel-default',
cls: 'uigridpanel-body uigridpanel-column someSummaryGridCls',
header: false,
The enableTextSelection field is set to true and still it doesn't work.
Some code from the DataGrid
initComponent: function () {
var me = this;
Ext.applyIf(me, {
columns: [{
xtype: 'gridcolumn',
draggable: false,
itemId: 'iDColmn',
width: '8%',
autoSizeColumn: true,
dataIndex: 'id',
name: 'id',
text: 'ID',
tdCls: 'gridcellwrap',
menuDisabled: true,
stateId : 'id'
},
{
xtype: 'gridcolumn',
draggable: false,
itemId: 'testColmn',
width: '15%',
tdCls: 'gridcellwrap',
autoSizeColumn: true,
dataIndex: 'test',
name: 'test',
text: 'Test',
menuDisabled: true,
stateId: 'test'
},

You put "enableTextSelection" to the wrong place in your code. That config parameter is tied to columns, not to the grid view.
So, you must use it in your column objects starting with xtype:"gridcolumn". You can enable text selection, for each column separately
Reference: https://docs.sencha.com/extjs/6.6.0/classic/Ext.grid.column.Column.html#cfg-enableTextSelection

CheckColumn selected values from inside a grid

I am trying to access the number of checkcolumn's selected which are the first columns of a grid.
xtype: 'grid',
itemId: "gdMain",
store: {
type: 'webapi',
api: {
read: 'api/Report/Get'
},
autoLoad: true,
},
columns: [
{ header: 'User', dataIndex: 'user'},
{ header: 'Date', dataIndex: 'date'}
], selModel: {
selType: 'checkboxmodel',
itemId: 'chkUser',
showHeaderCheckbox: true
}
I tried using ComponentQuery
Ext.ComponentQuery.query('#gdMain')
But I am not finding any properties that will tell me the number of rows checked.
Please tell me how to get the number of checkcolumn's selected inside a grid.

You can get the number of selections by accessing the selection model:
theGrid.getSelectionModel().getCount();

In an editable grid, how to make an Ext combo box immediately finish edit mode when selecting an item?

I have configured an Ext JS 4 grid to be editable by utilising the CellEditing plugin. Some cells in the grid have a textfield editor, and a few use a combo box editor. It all works great, but I have a small problem with the default behaviour of combo box editors.
Basically, when editing a cell that has a combo box editor, if you select an item from the dropdown with your mouse, the "edit" mode of that cell doesn't finish. In other words, the cell doesn't immediately go out of edit mode and get marked as dirty. Instead, it will just sit there in edit mode until you go and click somewhere else on the page.
I think it is unusual that Sencha has made this the default behaviour for combo box editors, but I won't complain. I would just like to know how to be able to select a combo box item and immediately take the cell out of edit mode, but I have no idea where to define this custom behaviour.
Here's a small example JS fiddle to play with:
http://jsfiddle.net/FFwkM/
Code copied below for posterity:
var stateStore = Ext.create('Ext.data.Store', {
fields: ['name'],
data : [
{"name":"Alabama"},
{"name":"Alaska"},
{"name":"Arizona"}
]
});
var gridStore = Ext.create('Ext.data.Store', {
fields:['firstName', 'state'],
data:{'items':[
{"firstName":"Lisa", "state":"Alabama"},
{"firstName":"Bart", "state":"Alabama"},
{"firstName":"Homer", "state":"Alabama"},
{"firstName":"Marge", "state":"Arizona"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: gridStore,
columns: [{
header: 'First Name', dataIndex: 'firstName', flex: 1, editor: 'textfield'
}, {
header: 'State', dataIndex: 'state', flex: 1, editor: {
xtype: 'combobox', store: stateStore, queryMode: 'local', displayField: 'name', valueField: 'name'
}
}],
selType: 'cellmodel',
plugins: [{
ptype: 'cellediting',
clicksToEdit: 2
}],
height: 150,
width: 200,
renderTo: Ext.getBody()
});

One way of achieving the desired behaviour is to add a listener for the select event on your combobox, then fire the blur event in the handler. Example:
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: gridStore,
columns: [{
header: 'First Name', dataIndex: 'firstName', flex: 1, editor: 'textfield'
}, {
header: 'State', dataIndex: 'state', flex: 1, editor: {
xtype: 'combobox', store: stateStore, queryMode: 'local', displayField: 'name', valueField: 'name',
listeners: {
select: function(combo, recs, opts){
combo.fireEvent('blur'); //<------
}
}
}
}],
selType: 'cellmodel',
plugins: [{
ptype: 'cellediting',
clicksToEdit: 2
}],
height: 150,
width: 200,
renderTo: Ext.getBody()
});
Working fork here: http://jsfiddle.net/Zd5QM/

Listen to the select event and then:
listeners: {
select: {
fn: function(c, r, eopts) {
c.ownerCt.completeEdit();
}
}
}
http://www.sencha.com/forum/showthread.php?261264-How-to-make-a-grid-cell-immediately-exit-edit-mode-when-a-combo-box-item-is-selected

Dynamic form fields on change of combobox In extjs 4

I have a combobox and now I want to create a dynamic textfields on change of this combo box in Extjs 4 and i am following the Mvc structure of Extjs .
Mycombo is below
{
xtype : 'combo',
store : 'product.CategoryComboBox',
name: 'category',
id:'category',
displayField: 'name',
valueField: 'idProductCategory',
multiSelect : false,
fieldLabel: 'Category',
allowBlank: false,
allowQueryAll : false,
forceSelection : true,
typeAhead: true,
triggerAction: 'all',
delimiter : ',',
width: 300,
queryMode:'local',
listeners:{select:{fn:function(combo, value) {}
}

You can add a FieldSet like this to your form
{
xtype: 'fieldset',
itemId: 'field_container',
layout: 'anchor',
border: 0,
style: { padding: '0' },
fieldDefaults: {
// field defaults
},
defaultType: 'textfield'
}
so when the combobox changes its value you just do the following
var container = this.down('fieldset[itemId="field_container"]');
container.removeAll();
var fieldsToAdd = [
{ name: 'field1', xtype: 'textfield', value: 'xxxxxx' },
{ name: 'field2', xtype: 'textfield', value: 'yyyyyyy' }
];
container.add(fieldsToAdd);
this way you can decide what the fieldsToAdd contains based on the combobox value.

Set an id to the textfield, then configure the listeners property of your combo as follows :
listeners: {
change: function (combo, value) {
Ext.get('idOfYourTextfield').setValue(value);
}
}

Field container allows to have multiple form fields on the same line, so you could do that:
{
xtype: 'fieldcontainer',
layout: 'hbox',
items: {
xtype: 'combo',
// your config here
listeners: {
change: function () {
this.up('fieldcontainer').add({
xtype: 'textfield',
value: this.getValue()
});
}
}
}
}
Edit
I guess you'll need to test if the text field already exists:
change: function () {
var ct = this.up('fieldcontainer'),
textField = ct.down('textfield');
if (textField) {
textField.setValue(this.getValue());
} else {
ct.add({
xtype: 'textfield',
value: this.getValue()
});
}
}

Trouble with adding and removing ExtJS form fields

I am having a bit of trouble adding/removing fields to/from an ExtJS form. My use case is as follows:
Provide a set of radio buttons on the form. Depending on which radio button is selected, show a different set of form fields.
I am not all that familiar with ExtJS, but what I am doing is caching the fields that are to be added/removed and adding/removing them from the form when the radio button change event is fired. Here is a simplified version of my code:
var textFieldA = new Ext.form.TextField({
fieldLabel: 'Text Field A',
name: 'text_field_a',
allowBlank: false
});
var textFieldB = new Ext.form.TextField({
fieldLabel: 'Text Field B',
name: 'text_field_b',
allowBlank: false
});
var form = new Ext.FormPanel({
autoScroll: true,
bodyStyle: 'padding: 5px 5px 0',
border: false,
frame: true,
layout: 'form',
items: [{
xtype: 'fieldset',
fieldLabel: 'Fieldset',
autoHeight: true,
items: [{
xtype: 'radiogroup',
fieldLabel: 'Show text field',
columns: 1,
vertical: true,
items: [
{
xtype: 'radio',
boxLabel: 'Show field a',
name: 'field_to_show',
inputValue: 'a'
},
{
xtype: 'radio',
boxLabel: 'Show field b',
name: 'field_to_show',
inputValue: 'b'
}
],
listeners: {
'change': {
fn: function(radioGroup, selectedRadio) {
switch (selectedRadio.getGroupValue())
{
case 'a':
radioGroup.findParentByType('fieldset').remove(textFieldB);
radioGroup.findParentByType('fieldset').add(textFieldA);
break;
case 'b':
radioGroup.findParentByType('fieldset').remove(textFieldA);
radioGroup.findParentByType('fieldset').add(textFieldB);
break;
}
radioGroup.findParentByType('fieldset').doLayout();
}
}
}
}]
}]
});
form.render('container');
This works the first time each radio is selected, but subsequent selections do not work as I would expect. In Firefox, a JavaScript error is raised:
Operation is not supported" code: "9
[Break on this error] return !!(p.compareDocumentPosition(c) & 16); in ext-base-debug-w-comments.js
In Chrome, only the labels will be added to the form.
Is the way I am expecting this to work incorrect?

I wouldnt necessarily take the approach of adding/removing the fileds- why not give each field an id (also good practice for form fields) using:
id:'fieldname'
Then either hide/show the field as appropriate using:
Ext.getCmp('fieldname').hide()
Ext.getCmp('fieldname').show()

I've written a very similar form. If the only common element is the radio group, here's what I suggest:
Create an outer Container that contains the RadioGroup, then a subcontainer with a CardLayout. Each child of that card layout contains a form with the fields for the different states of the RadioGroup. Add listeners to the RadioGroup so when the selection changes, you change the active item in the card container.
Basic code to get you started from when I did this:
OuterForm = Ext.extend(Ext.Container, {
initComponent: function() {
Ext.apply(this, {
layout: "vbox",
layoutConfig: { align: "stretch" }
});
this.items = [{
xtype: "container",
layout: "form",
items: [{
xtype: "radiogroup",
fieldLabel: "Form to fill out",
ref: "../../formSelector",
items: [{
name: "type",
inputValue: "1",
boxLabel: "Form 1"
}, {
name: "type",
inputValue: "2",
boxLabel: "Form 2"
}],
listeners: {
scope: this,
change: function(rg, checkedItem) {
this.formContainer.layout.setActiveItem(parseInt(checkedItem.inputValue));
}
}
}]
}, {
xtype: "container",
layout: "card",
flex: 1,
ref: "formContainer",
items: [{
xtype: "form1"
}, {
xtype: "form2"
}]
}];
OuterForm.superclass.initComponent.call(this);
}
});
Not tested for typos/bugs, but just set a height for the outer form, create your form1 and form2 xtypes and it should work.
If you need all fields part of the same form, make OuterForm extend FormPanel instead of defining form1 and form2 as independent FormPanels.