Develop Reference

How can I load data for update using the window for adding new record in Ext-Js 3.0?

I have one problem with adding new button for update my records in Ext-Js 3.0.
I have already one window for creating new record and I intend to use the same window for editing one of the records. The question is: how can I load the record what I have choosen from existing records int the columns of the window for creating record?
This code for adding a new record, I would like to load the content of such record in this window if I update it. Is it possible? I think I need something like store.load.record.data['id']?
Thank you in advance for your help.
var winAdd = new Ext.Window({
id: 'winAdd',
renderTo: Ext.getBody(),
layout: 'fit',
width: 400,
autoHeight: true,
closeAction: 'hide',
closable: false,
title: 'add item',
plain: true,
items: {
xtype: 'form',
id: 'frmAdd',
autoHeight: true,
frame: true,
defaultType: 'textfield',
border: false,
dock_id: <?=$_SESSION['user']->getDock()->getId()?>,
defaults: {allowBlank: true, anchor: '95%'},
items: [{
fieldLabel: 'dock',
hiddenName: 'dock',
name: 'dock',
xtype: 'combo',
store: strRamps,
displayField: 'name',
valueField: 'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
forceSelection: true
},
This is code for update the record:
new Ext.Toolbar.Button({
text: '<?= $this→translate('edit item') ?>',
handler: function () {
Ext.getCmp('winAdd').show(this);
var conn = new Ext.data.Connection();
conn.request({
url: 'example/updateItem',
method: 'POST',
params: {id: gridPanel.selModel.selection.record.data['id']},
success: function (responseObject) {
store.update(gridPanel.selModel.selection.record);
},
})
}
}

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

Ext.js ComboBox Not Displaying JSON Array

I've checked, checked and checked again and can't get the comboBox to display the data.
The JSON array is:
{"DepartmentData":[{"Department":"Company
Holidays","DepartmentHeadUserID":"74"},{"Department":"Despatch"
,"DepartmentHeadUserID":"70"},{"Department":"Fabric
Shades","DepartmentHeadUserID":"159"}]}...
Which is loading perfectly fine but for some reason the comboBox is not using the array to populate.
Ext.onReady(function(){
var comboStore = new Ext.data.JsonStore({
autoLoad: true,
url: 'includes/DataGet.php',
storeId: 'DepartmentData',
root: 'DepartmentData',
idProperty: 'Department',
fields: ['Department','DepartmentHeadID'],
});
Ext.form.Field.prototype.msgTarget = 'side';
var simple = new Ext.FormPanel({
labelWidth: 75,
url: 'DataStore.php',
frame:true,
title: 'Holiday Request Form',
bodyStyle: 'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [
new Ext.form.ComboBox({
fieldLabel: 'Department',
name: 'Department',
id: 'Department',
forceSelection: true,
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
store: comboStore,
emptyText: 'Please Select...',
mode: 'remote',
displayField: 'Department',
valueField: 'DepartmentHeadID',
allowBlank: false
}),
],
buttons: [{
text: 'Submit'
},{
text: 'Cancel'
}]
});
simple.render(document.body);
});
Any help greatly appreciated.

You won't believe this...
I was sending 2 JSON arrays from the PHP file and when I commented the second out to make this post it worked.
Seems I need to set & send params on the JSON Store and then use a switch statement in the PHP file to send back the required array.

ExtJs 4.2 grid panel not rendering header columns properly

I am new to ExtJs and I found myself unable to use a grid:
As the header doesn't render correctly I am unable do sort, resize or even notice when I click on a grid item.
The grid code is this:
Ext.define('Simviab.view.empresa.SociosGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.sociosgrid',
store: 'sociosempresa',
width: 400,
height: 200,
columns: [
{text: 'Nome do Socio', dataIndex: 'TE_RAZAO', flex:1},
{text: 'Cargo/Função', dataIndex: 'TS_CARGO', width: 100},
{text: '%', dataIndex: 'TS_PERCENTUAL', width: 100},
{text: 'Participação no Capital Social', dataIndex: 'TS_PARTICIPACAO', width: 150}
]
});
I am rendering it onto a window, like this:
Ext.define('Simviab.view.empresa.SociosWindow', {
extend: 'Ext.window.Window',
alias: 'widget.socioswindow',
title: 'Adicionar sócios',
modal: true,
autoShow: true,
iconCls: 'icon-form',
width: 400,
height: 400,
items:[
{
xtype:'label',
text: 'Adicionar sócios a Empresa: ',
itemId: 'empresaNome',
},{
xtype: 'fieldset',
title: 'Capital Social',
items: [
{
xtype: 'textfield',
fieldLabel: 'Nome do Sócio',
maxLength: 50,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Cargo/Função',
maxLength: 50,
allowBlank: false
},
{
xtype: 'numberfield',
fieldLabel: 'Percentual de participação',
maxValue: 100,
minValue: 1,
allowBlank: false,
step: 0.5
}
]
},{
xtype: 'sociosgrid'
}
]
});
Where I am going wrong?

I finally found out that the problem was with the app folder generated by Sencha CMD, now I have created a new app and put my code there and now it's working good...
The strange thing is that I had tried to create another app before with no success!

ExtJS 4.1 : issue in establishing a reference to an object

Good day everybody,
I have a recurrent problem when I work with ExtJS 4.1: I do a lot of effort every time I have to establish a reference to an object and often, when I call up a method on an object, I get an error like this:
Uncaught TypeError: Cannot call method 'destroy' of undefined
For instance, consider the following situation where I have a fieldset which contains two items: a fieldcontainer and a button.
My purpose is writing a proper handler function for the button, so that when I hit the button the fieldcontainer will be destroyed. To do that, I need to establish a correct reference to the fieldcontainer.
Here's my code:
xtype: 'fieldset',
id: 'product_fieldset',
title: 'Prodotti tempi e quantita',
defaultType: 'textfield',
layout: 'anchor',
items: [{
xtype: 'fieldcontainer',
layout: 'hbox',
defaultType: 'textfield',
defaults: {
labelAlign: 'top'
},
items: [{
xtype: 'combo',
name: 'product',
fieldLabel: 'Product',
forceSelection: true,
editable: false,
store: products,
queryMode: 'local',
displayField: 'name',
valueField: 'name',
allowBlank: false,
afterLabelTextTpl: required
},{
xtype: 'numberfield',
name: 'p_on_weight',
fieldLabel: '% on weight',
value: 0,
minValue: 0,
allowBlank: false,
afterLabelTextTpl: required,
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false
},{
xtype: 'numberfield',
name: 'time',
fieldLabel: 'Time (minutes)',
value: 0,
minValue: 0,
allowBlank: false,
afterLabelTextTpl: required,
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false
},{
xtype: 'numberfield',
name: 'ph',
fieldLabel: 'Ph',
minValue: 0,
allowBlank: false,
afterLabelTextTpl: required,
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false
},{
xtype: 'textareafield',
name: 'remarks',
fieldLabel: 'Remarks'
}]
},{
xtype: 'button',
text: 'Delete this product',
handler: function() {
proper_reference_to_fieldcontainer.destroy();
//need help for previous line
}
}]
Well, Can anyone suggest me a way to refer to fieldcontainer, possibly without using fieldcontainer's id ? (Sencha architects suggest not to use id to establish references).
Thanks in advance.
Enrico.

You can define the container as a standalone object:
var myFieldContainer = Ext.Create('Ext.form.FieldContainer', {
layout: 'hbox',
defaultType: 'textfield',
defaults: {
labelAlign: 'top'
},
items: [{
xtype: 'combo',
(...)
});
...and then use it in your button's configuration:
{
xtype: 'button',
text: 'Delete this product',
handler: function () {
myFieldContainer.destroy();
}
}

Use first define an id value for fieldcontainer,
xtype: 'fieldcontainer',
id: 'my_id',
layout: 'hbox',
Now use Ext.getCmp('my_id') to retrieve a reference to it.