Extjs4 itemId, how to get back a combobox column editor - extjs

I am trying to convert some ExtJS 3.3 to 4.0.
In ExtJS 3.x I could create a combobox with a unique component Id, that I could use later with Ext.getCmp(Id), to get that combo editor, so that I could add filters, or play with the combo box itself.
Now if I specify an Id, the grid does not render the combo box correct in the grid, they say I have to use itemId instead, then actually it works, I mean combo renders correctly on the grid, But then I have no way of using that itemId to get the combobox itself.
I tried grid.getComponent(itemId), grid.headerCt.getComponent(), I have to say what the heck is this itemId good for, how on earth am I supposed to get this editor.
grid.columns collection has editor for simple fields (like text, number), for combobox it has getEditor which asks for a data record as a param.
I have to say again wtf, was so wrong with ExtJS 3.x that they felt like fixing and f.... it up.
Really, this upgrade made me go wtf so many times.... maybe its my fault, but wtf... anyways.
{
header: 'Ürün/Hizmet',
width: 90,
dataIndex: 'AlinanHizmetId',
editor: {
itemId: 'AlinanHizmetId',
xtype: 'combobox',
allowBlank: false,
selectOnFocus: true,
valueField: 'Id',
displayField: 'HizmetAd',
triggerAction: 'all',
typeAhead: false,
forceSelection: true,
lazyRender: true,
minChars: '2',
listWidth: 300,
store: Ext.create('Ext.data.Store', {
storeId: '',
fields: [{
name: 'HizmetTipAd',
caption: 'Hizmet Tip Adı',
type: Ext.data.Types.STRING,
clrType: 'String'
}, {
name: 'Id',
caption: 'Id',
type: Ext.data.Types.STRING,
clrType: 'Guid'
}, {
name: 'HizmetTip',
caption: 'HizmetTip',
type: Ext.data.Types.STRING,
clrType: 'String'
}, {
name: 'HizmetKod',
caption: 'Hizmet Kodu',
type: Ext.data.Types.STRING,
clrType: 'String'
}, {
name: 'HizmetAd',
caption: 'Hizmet Adı',
type: Ext.data.Types.STRING,
clrType: 'String'
}, {
name: 'Aciklama',
caption: 'Açıklama',
type: Ext.data.Types.STRING,
clrType: 'String'
}],
autoDestroy: false,
autoLoad: true,
autoSave: false,
sortInfo: {
field: 'HizmetAd',
direction: 'ASC'
},
restful: false,
proxy: {
type: 'ajax',
actionMethods: {
read: 'POST'
},
url: '/Yol/Combo/AlinanHizmet',
reader: {
type: 'json',
root: 'data',
idProperty: 'Id',
totalProperty: 'rowCount',
successProperty: 'success',
messageProperty: 'message'
}
},
data: []
})
},
filter: {
xtype: 'textfield'
},
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
return record.get('HizmetAd');
}
}

This is old - but have you tried grid.down('#item_id')?

mygrid.on('beforeedit', function(e){
if(e.field == 'ProductId') {
var gridCols = Ext.getCmp('my_grid').columns;
for(i = 0; i < gridCols.length; i++)
if (gridCols[i].dataIndex == 'ProductId') break;
var combo = gridCols[i].getEditor(e.record);
...
so actually column.getEditor(null) does the trick.

Related

Data binding associations in ExtJS admin template

I'm unsuccessful in getting binding associations working in the admin dashboard template (with the desired behavior of selecting a record from a combobox and pulling up associated records in a grid).
My main viewModel is defined as:
Ext.define('Admin.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
stores: {
patients: {
model: 'md_registry.model.Patient',
autoLoad: true
}
}
});
I added a leaf node to Pages in NavigationTree.js:
{
text: 'Pages',
iconCls: 'x-fa fa-leanpub',
expanded: false,
selectable: false,
//routeId: 'pages-parent',
//id: 'pages-parent',
children: [
{
text: 'Proc',
iconCls: 'x-fa fa-send',
rowCls: 'nav-tree-badge nav-tree-badge-hot',
viewType: 'procedure',
leaf: true
}]
}
With the procedure view being:
Ext.define('Admin.view.pages.Procedure', {
extend: 'Ext.panel.Panel',
xtype: 'procedure',
requires: [
'Ext.panel.Panel',
'Admin.model.Patient',
'Admin.model.Procedure'
//'Admin.model.Diagnosis'
],
anchor : '100% -1',
referenceHolder: true,
width: 1000,
height: 1000,
referenceHolder: true,
layout: {
type: 'hbox',
align: 'stretch'
},
viewModel: 'main',
session: {},
items: [
// https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
{
xtype: 'fieldset',
layout: 'anchor',
items: [{
xtype: 'combobox',
listeners : {
select : function() {
console.log(arguments)
console.log(arguments[1].data.birth_date)
console.log(arguments[1].data.first_name)
console.log(arguments[1].data.last_name)
console.log(arguments[1].data.sex)
}
},
bind: {
store: '{patients}'
},
reference: 'patientCombo',
publishes: 'id',
fieldLabel: 'Patient Search',
displayField: 'mrn',
//anchor: '-',
// We're forcing the query to run every time by setting minChars to 0
// (default is 4)
minChars: 2,
queryParam: '0',
queryMode: 'local',
typeAhead: true,
// https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);
if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}
}, {
// https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
xtype: 'displayfield',
fieldLabel: 'Selected Patient',
bind: {
html: '<p>Name: <b>{patientCombo.selection.first_name}, ' +
'{patientCombo.selection.last_name} </b></p>' +
'<p>Sex: {patientCombo.selection.sex}</p>' +
'<p>Birthdate: {patientCombo.selection.birth_date}</p>'
}
}]
},
{
title: 'Procedures',
xtype: 'grid',
bind: '{patientCombo.selection.procedures}',
flex: 1,
margin: '0 0 0 10',
columns: [{
text: 'Procedure Date', dataIndex: 'proc_date', flex: 1
}, {
text: 'Procedure', dataIndex: 'proc_name', flex: 1
}],
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : new Ext.XTemplate(
'<p><b>Proc Name Orig:</b> {proc_name_orig}</p>',
'<p><b>Proc Code:</b> {proc_code}</p>',
'<p><b>Proc Code Type:</b> {proc_code_type}</p>')
}],
viewConfig: {
emptyText: 'No procedures',
deferEmptyText: false
}
}]
});
My Patient and Procedure models are simply:
Ext.define('Admin.model.Procedure', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
//{ name: 'id', type: 'string' },
{ name: 'proc_code', type: 'string' },
{ name: 'proc_name', type: 'string' },
{ name: 'proc_code_type', type: 'string' },
{ name: 'proc_name_orig', type: 'string' },
{ name: 'proc_date', type: 'date', format: 'Y-m-d' },
{
name: 'patient_id',
type: 'string',
reference: {
parent: 'Admin.model.Patient',
//type: 'md_registry.model.Patient',
inverse: 'procedures',
autoLoad: false
}
}
],
proxy: {
type: 'rest',
url: 'http://127.0.0.1:5000/procedureview/api/read',
reader: {
type: 'json',
rootProperty: ''
}
}
});
and
Ext.define('Admin.model.Patient', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.proxy.Rest'
],
fields: [
{ name: 'id', type: 'string' },
{ name: 'mrn', type: 'string' },
{ name: 'birth_date', type: 'date', format: 'Y-m-d' },
{ name: 'sex', type: 'string' },
{ name: 'first_name', type: 'string' },
{ name: 'last_name', type: 'string' }
],
proxy: {
type: 'ajax',
url: 'http://127.0.0.1:5000/patientview/api/read',
reader: {
type: 'json',
rootProperty: ''
}
}
});
respectively.
The data for my Patients store are getting loaded into the combobox just fine, but when I select an item from the combo list it is not firing off the call to grab the associated procedures data (see image: .
However, the binding associations work as expected with Side Navigation Tabs (see image: , and show up within the object prototype chain, as expected... see
(whereas for the admin dashboard, the associations are empty).
I cannot for the life of me get these working in the Admin Dashboard. I noticed a tool called the bind inspector, but I am running the GPL version of the SDK, so I do not have access to this. Beyond this, I cannot figure out a way to debug why the binding association is not working in the admin dashboard, but otherwise works perfectly well in Side Navigation Tabs.
I would set up a Fiddle, but I have no idea how to do it using the Admin Template.
I just figured it out. It was a namespace issue.
My reference in the procedure model should be:
reference: {
parent: 'Patient',
inverse: 'procedures',
autoLoad: false
}
Voila, all the associated data get loaded as expected!

Combobox ignores autoLoad [Extjs]

i'm trying to make that a combo load the items (dataStore) with AutoLoad: true, but, i don't know if i'm doing this right. I'm a little newbie with Extjs, so, don't be rude, please hehe
here's the code!
items: [{
xtype: 'form',
padding: 20,
name: 'formReplyParameters',
layout: 'anchor',
fieldDefaults: {
msgTarget: 'under',
labelAlign: 'top'
},
defaults: {
padding: 10
},
items: [{
xtype: 'checkboxfield',
name: 'interactive',
inputValue: true,
fieldLabel: 'Interactive',
anchor: '100%'
}, {
xtype: 'textfield',
name: 'timeResponse',
fieldLabel: 'Time response',
anchor: '100%'
}, {
xtype: 'combobox',
fieldLabel: 'Alert channel',
name: 'uuidResponseParameterType',
queryMode: 'local',
store: new Ext.data.Store({
fields: [{
name: 'description',
type: 'string'
}, {
name: 'name',
type: 'string'
}, {
name: 'uuid',
type: 'string'
}],
autoLoad: true,
hideTrigger: true,
minChars: 1,
triggerAction: 'query',
typeAhead: true,
proxy: {
type: 'ajax',
url: "../blabla",
actionMethods: {
create: "POST",
read: "POST",
update: "POST",
destroy: "POST"
},
extraParams: {
action: "catalog",
catalog: "parametersType",
params: JSON.stringify({
uuidToken: Ext.connectionToken
})
},
reader: {
type: 'json',
root: 'List'
},
listeners: {
exception: function(proxy, response, operation, eOpts) {
var responseArray = JSON.parse(response.responseText);
Ext.Notify.msg(responseArray.message, {
layout: "bottomright",
delay: 5000,
type: "error"
});
}
}
}
}),
anchor: '100%',
typeAhead: true,
triggerAction: 'all',
valueField: 'uuid',
displayField: 'description',
allowBlank: false,
listeners: {
change: function (combo, value) {
var type = combo.valueModels[0].data.name;
var channel = me.down('[name="uuidChanel"]');
channel.clearValue();
var channelStore = new Ext.data.Store({
fields: [{
name: 'description',
type: 'string'
}, {
name: 'name',
type: 'string'
}, {
name: 'uuid',
type: 'string'
}],
autoLoad: true,
hideTrigger: true,
minChars: 1,
triggerAction: 'query',
typeAhead: true,
proxy: {
type: 'ajax',
url: "../handler/custom/customEvent.ashx",
extraParams: {
action: "catalog",
catalog: type,
params: JSON.stringify({
uuidToken: Ext.connectionToken
})
},
reader: {
type: 'json',
root: 'list'
},
listeners: {
exception: function(proxy, response, operation, eOpts) {
var responseArray = JSON.parse(response.responseText);
Ext.Notify.msg(responseArray.message, {
layout: "bottomright",
delay: 5000,
type: "error"
});
}
}
}
});
channelStore.load();
channel.bindStore(channelStore);
}
}
}, {
xtype: 'combo',
name: 'uuidChanel',
fieldLabel: 'Channel',
valueField: 'uuid',
displayField: 'description',
anchor: '100%',
store: null,
allowBlank: false
}]
}]
The problem is in the combo: uuidChannel
if anyone can help, thanks a lot!
Why exactly you think that autoLoad: true doest work? Because when you try to open last combobox picker its still loading?
I think your problem is that new store created every time combo name: 'uuidResponseParameterType' change event trigger and store autoLoad: true means that
store's load method is automatically called after creation
You have to create store just once and load (or filter locally) it with new extraParams on combo change event.
The thing is that (stupid)
channel.clearValue();
this field was doing all the problem. this "clearValue" was there because I believed that deleting the data of "uuid", it was returning me the new data with the "bind" to the bottom
channelStore.load();
channel.bindStore(channelStore); <<<
So, I think i put the new data, but this "clearValue", just was erasing the data with the "bind" I had down. So, i just elimite that channel.clearValue(); , and that's solves the problem! :)

extjs treegrid displaying empty grid columns

I am trying to get a really basic tree grid working but all I get is an empty panel.
I copied the json string from a working treepanel example and added the date and filename myself for the extra grids.
So calling the bits root and children worked for a basic panel (i had it working when it only had the field text and was directly in the store. So i presumed it would work for a tree grid.
After searching I found that a treestore doesn't have a data config it had to be moved to the proxy. Now I just have empty date and filename columns.
so here is my model
Ext.define('Coda.common.repository.model.RepositoryMaintModel',{
extend: 'Ext.data.Model',
fields: [
{name: 'date', type: 'string'},
{name: 'filename', type: 'string'},
{name: 'text', type: 'string'},
{name: 'iconCls' , type: 'string', defaultValue: 'treenode-no-icon'},
{name: 'expanded' , type: 'boolean', defaultValue: true, persist: false},
{name: 'index' , type: 'int'}
]
});
and here is my view
Ext.define('view.RepositoryMaintView', {
extend: 'U4.panel.Panel',
requires: ['Ext.layout.container.HBox',
'model.RepositoryMaintModel',
'Ext.tree.Panel'],
EVENT_DOWNLOAD: 'download',
layout: 'hbox',
constructor: function (config) {
var me = this;
me.addEvents(
/**
* #event download
* #param {view.RepositoryMaintView} when pressing the download button
*/
me.EVENT_DOWNLOAD
);
var data = {root: {
expanded: true,
root: [
{ text: "detention",date:'10-01-2013', filename:'boo.txt', leaf: true },
{ text: "homework",date:'10-01-2013', filename:'boo.txt', expanded: true,
root: [
{ text: "book report",date:'10-01-2013', filename:'boo.txt', leaf: true },
{ text: "algebra",date:'10-01-2013', filename:'boo.txt', leaf: true}
] },
{ text: "buy lottery tickets",date:'10-01-2013', filename:'boo.txt', leaf: true }
]
}};
var store = Ext.create('Ext.data.TreeStore', {
model: 'blah.blah.model.RepositoryMaintModel',
// data: data, <-- remove from here
proxy: {
type: 'memory',
data: data, // <-- place here
reader: {
type: 'json',
root: 'root'
}
},
folderSort: true
});
var center = Ext.create('Ext.tree.Panel',{
title: 'Folders Companies Items',
//region: 'center',
width: 1000,
height: 200,
collapsible: false,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
columns: [
{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'hmm',
flex: 2,
sortable: true
},{
text: 'Date',
sortable: true,
dataIndex: 'date'
},{
text: 'filename',
sortable: true,
dataIndex: 'filename'
}]
});
me.items = [center];
me.callParent(arguments);
}
});

ExtJS: dataIndex property not working

My Simplified Store:
Ext.define('PT.store.DealTree', {
extend: 'Ext.data.TreeStore',
proxy: {
type: 'rest',
url: '/dealTree',
reader: { type: 'json', root: 'children', successProperty: 'success' },
},
root: { name: 'children', expanded: true }
})
My Simplified Grid:
Ext.define('PT.view.deal.DealSelectionGrid', {
extend: 'Ext.tree.Panel',
alias: 'widget.dealSelectionGrid',
rootVisible: false,
fields: ['text', 'date'],
store: 'DealTree',
columns: [
{ xtype: 'treecolumn', text: 'Deal', dataIndex: 'text' },
{ xtype: 'datecolumn', text: 'Date', dataIndex: 'date' }
]
});
Example of simplified response:
[ { text: 'aNode',
id: 522f7dd2323544c424000034,
leaf: true,
date: '2013/10/10' } ]
nothing appears in the Date column, yet the text, leaf, id all work perfectly. I'm clearly missing something. Currently, I'm not using a model because each level is a different model, which isn't supported by default - hence I let ExtJS add all the NodeInterface decoration for me.
The fields configuration goes into the store, not the tree component.
For example, your code is showing the date with this store:
Ext.define('PT.store.DealTree', {
extend: 'Ext.data.TreeStore',
proxy: {
type: 'rest',
url: '/dealTree',
reader: { type: 'json', root: 'children', successProperty: 'success' }
},
// fields option here!
fields: ['text', 'date'],
root: {
name: 'children',
expanded: true,
children: [{
text: 'aNode',
id: '522f7dd2323544c424000034',
leaf: true,
date: '2013/10/10'
}]
}
});

Grid showing empty rows extjs

Here, store loads data from databse(firebug shows) but all rows are empty...Please help.I cant find the reason behind...
Store
autoLoad: true,
model: 'CustomerService.model.OrderModel',
idProperty: 'id',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'name',
type: 'string'
}, {
name: 'quantity',
type: 'int'
}, {
name: 'receivedquantity',
type: 'int'
}],
proxy: {
type: 'ajax',
url: 'data/Getall.php',
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
}
});
Here is Model:
Ext.define('CustomerService.model.OrderModel', {
extend: 'Ext.data.Model'
});
here is view:
Ext.define('CustomerService.view.customer.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.mylist',
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: false
}),
store: 'OrderStore',
forceFit: true, //Fit to container:: columnLines:true, height:132, width:200, autoResizeColumns:true, initComponent:function(){
this.columns = [{
header: 'name',
dataIndex: 'name'
}, {
header: 'Quantity',
dataIndex: 'quantity',
}, {
header: 'Received Quantity',
dataIndex: 'receivedquantity'
}];
this.callParent(arguments);
}
});
If your using a model in your store you should define the fields in your model instead of defining them in your store.
Ext.define('CustomerService.model.OrderModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'name',
type: 'string'
}, {
name: 'quantity',
type: 'int'
}, {
name: 'receivedquantity',
type: 'int'
}],
});
Ext.data.Store fileds:
This may be used in place of specifying a model configuration. The
fields should be a set of Ext.data.Field configuration objects. The
store will automatically create a Ext.data.Model with these fields. In
general this configuration option should only be used for simple
stores like a two-field store of ComboBox. For anything more
complicated, such as specifying a particular id property or
associations, a Ext.data.Model should be defined and specified for the
model config.

Resources