We Keep Coding

How to add a item in current record of grid editor combo in ExtJS5

ExtJS 5
I have a grid and it has 3 columns (Id, Students,Selected Students). In column2 (Students), I have bind static data. When i click on any item of second column then this record should be added in column3 (Selected Students) in current record or row. I have one button also called (Add new item) used for creating new row dynamically.
Note - When i add a new row by clicking on Add new item button, then new row will be added and 3 column(Selected Students) value should be blank.
I have tried so much but didn't get solution. The main problem is that when i bind data in third column then it binds proper, but when i add a new row, it also shows in new record also but it should not be. If i clear store or combo item, then it removes from all rows instead of current record/row.
Ext.onReady(function () {
var comboStore1 = Ext.create('Ext.data.Store',
{
fields: ['text', 'id'],
data:
[
{ "text": "Value1", "id" :1 },
{ "text": "Value2", "id": 2 },
{ "text": "Value3", "id": 3 }
]
});
var comboStore2 = Ext.create('Ext.data.Store',
{
fields: ['text', 'id']
});
var gridStore = Ext.create('Ext.data.Store',
{
fields: ['id', 'students', 'selectedStudents'],
data:
[
{ "id" : 1},
]
});
var window = new Ext.Window({
id: 'grdWindow',
width: 400,
height: 200,
items: [
{
xtype: 'panel',
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'Add New Item',
handler: function () {
var store = Ext.getCmp('grdSample').store;
var rec = {
id: 1,
students: '',
selectedStudents: ''
}
store.insert(store.length + 1, rec);
}
},
{
xtype: 'grid',
id: 'grdSample',
store: gridStore,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
columns: [
{
header: 'id',
dataIndex: 'id'
},
{
header: 'Students',
dataIndex: 'students',
editor: {
xtype: 'combobox',
store: comboStore1,
displayField: 'text',
valueField: 'text',
queryMode: 'local',
listeners: {
select: function (combo, records) {
var rec = records[0].data;
}
}
}
},
{
header: 'Selected Students',
dataIndex: 'selectedStudents',
editor: {
xtype: 'combobox',
id: 'combo2',
store: comboStore2,
displayField: 'text',
valueField: 'id'
}
}
]
}
]
}]
}).show();
});
I have tried almost everything but still i didn't get any solution. In another way - How to insert a value in grid editor combo only in current row. (Another row should not be reflected). If another row is being reflected, then how to remove value before rendering from another row without reflecting other rows.

Well, I guess main problem is that you trying to change certain grid row editor component while it suppose to be same for all grid rows.
The main problem is that when i bind data in third column then it binds proper, but when i add a new row, it also shows in new record also but it should not be. If i clear store or combo item, then it removes from all rows instead of current record/row.
It happens because all grid row editors use same store instance, comboStore2, and when you change its data you change it for all editors.
To create separate store for each editor you have to do something like this:
{
header: 'Selected Students',
dataIndex: 'selectedStudents',
editor: {
xtype: 'combobox',
id: 'combo2',
store: Ext.create('Ext.data.Store', {
fields: ['text', 'id']
}),
displayField: 'text',
valueField: 'id'
}
}
But than its become not trivial to select specific row editor component and its store.
I recommend you to take a look at Ext.grid.column.Widget as you can bind certain row (its record actually) to widget with its onWidgetAttach property.

Your second column is dummy.
You could directly use a tagfield component as the editor for your third column, which lets you select multiple values.
And you'll need a single store for the list of all students.

ExtJS - How to check if cell editor textfield exists or not

As per the requirement, I have a panel which contains grid and two buttons:
Grid Columns: ID, Name, Timezone
Buttons: Add, Save
I have switched on Cell editing for the grid.
Editor for ID - Textfield (Textfield id: IDEdit)
Editor for Name: Textfield (Textfield id: NameEdit)
Editor for Timezone: Textfield (Textfield id: TimezoneEdi)
Now when I click on Add, I add one BLANK row at the top with Blank ID, Name and Timezone so that user can add the record.
But I do not want user to edit ID if he is not adding the new row. Meaning when he double clicks on ID even if it has editor defined, I want it disabled.
So I have kept IDEdit as disbled in the beginning. On click of add I am making it enabled. Once user inputs data nad clicks on Save, I again make IDEdit as disabled. This works fine.
But now when I edit only Name and click Save, it says that cannot define disable property of undefined. This is happening because EditID has not been created yet.
Code is as below:
xtype: 'gridpanel',
height: 308,
id: 'MyGrid',
scrollable: true,
store: 'MyStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'ID',
text: 'ID',
flex: 1,
editor: {
xtype: 'textfield',
disabled: true,
id: 'IDEdit'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name',
flex: 1,
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'TIMEZONE',
text: 'TimeZone',
flex: 1,
editor: {
xtype: 'textfield'
}
}
On Save button:
Ext.Ajax.request({
Ajax request to server
},
success: function(response) {
var status = response.responseXML.getElementsByTagName('Row')[0].childNodes[0].childNodes[0].nodeValue;
var message = response.responseXML.getElementsByTagName('Row')[0].childNodes[1].childNodes[0].nodeValue;
if(status === '1'){
store.removeAll();
store.load();
Ext.getCmp('IDEdit').disable();
}
else{
Ext.Msg.alert('Failure', message);
}
}
});
}
How can I avoid this error? How can I check whether IDEdit exists or not before making it enable/disable?
Thanks !

First, using id as identificator in big application is very bad idea since you need to watch about unique id on every component in your application.
Better solution is using itemId.
So it should be something like this:
editor: {
xtype: 'textfield',
disabled: true,
itemId: 'IDEdit'
}
Then you could check whatever component exists in this way:
var components = Ext.ComponentQuery.query('gridpanel > gridcolumn > textfield[itemId=IDEdit]');
if(!Ext.isEmpty(components)){
//which is working
//components[0].setDisabled(true);
//or
//components[0].disabled()
}

My suggestion would be not to define any editor for 'ID' column in this situation. When you click on Add button, create a record with new unique ID or set default value '-1' (negated values[-1,-2,-3,...,-n] if u are doing multi add action) and insert it on top like you are doing. Set the other values like you are doing already.

Extjs 5 strange behavior of the getStore() method

I've faced with the strange getStore() method behavior.
Having main viewport with two regions: north and center. On the north region there is a button 'Show grid', if to click on this button QueryResultsGridView is loaded to the center region
var panelToAddName = Ext.create('MyApp.view.QueryResultsGridView', {});
var mainViewPort = Ext.getCmp('mainViewPort');
var centerRegion = mainViewPort.down('[region=center]');
centerRegion.removeAll();
centerRegion.add(panelToAddName);
my Store
Ext.define('MyApp.store.QueryResultsGridStore', {
extend: 'Ext.data.Store',
model: 'MyApp.model.QueryResultsGridModel',
alias: 'store.queryResultsGrid',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'queryResultsGrid.json',
reader: {
type: 'json'
}
}
});
my ViewModel
Ext.define('MyApp.viewmodel.MainViewModel', {
extend: 'Ext.app.ViewModel',
requires: [
'MyApp.store.QueryResultsGridStore'
],
alias: 'viewmodel.main',
stores: {
queryResultsGrid: {
type: 'queryResultsGrid'
}
});
my Panel
Ext.define('MyApp.view.QueryResultsGridView', {
extend: 'Ext.Panel',
requires: [
'MyApp.controller.QueryResultsGridViewController'
],
controller: 'queryResultsGrid',
listeners: {
afterrender: 'onFormAfterRender'
},
items:[{
reference: 'queryResultsGrid',
layout: 'fit',
items: [
{
xtype: 'grid',
reference: 'grid',
bind: {
store: '{queryResultsGrid}'
},
columns: [
{ text: 'Text1', dataIndex: 'text1', flex: 1 },
{ text: 'Text2', dataIndex: 'text2', flex: 3 }
]
}]
}]
});
my ViewController
Ext.define('MyApp.controller.QueryResultsGridViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.queryResultsGrid',
onFormAfterRender: function(form, parent1) {
console.log(form.down('grid'));
console.log(form.down('grid').store);
}
});
Now in console I see 2 Objects as suggested above. If I go inside the first Object there is a data inside it, but inside the second one store is empty. Could anyone suggest me why? Btw I need this store to run store.load().
first Object
second Object
UPDATED
Here is https://fiddle.sencha.com/fiddle/kf3/preview if it helps, you can see in the console 2 Objects I mentioned above. Source code is available here https://fiddle.sencha.com/#fiddle/kf3

You can use the Ext.getStore() method to get any store

Is it because you have the store set to autoLoad? The store object changes from one moment to another and I wonder if due to autoLoad being set to true is causing data to be overwritten. Try removing autoLoad or setting it to false.
If this doesn't work, you could try setting up a Sencha Fiddle so we can see this in action.

I've finally figured it out. This problem is not occur if to set afterrender event for the grid (not for the panel itself) and use this.getViewModel().getStore('queryResultsGrid') as was suggested by Colin in the comments.
I've updated the Fiddle.

Dynamic columns in extjs Portal Example

Dynamic columns in extjs Portal Example.
I want to insert columns dynamically in extjs portal example -- specifically i would like to nest them, the problem is i am able to add the columns dynamically but cant drop a portlet inside it, however if i nest columns manually (i.e if they are there already and not defined on runtime) then everything works fine i.e i am able to drop the portlets inside it.
Can anyone help?
here is the some relevant code:
basic declaration:
Ext.define('Ext.app.Portal', {
id: 'parentPortal',
extend: 'Ext.container.Viewport',
requires: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
initComponent: function(){
items: [{
xtype: 'portalpanel',
id:'threecolumn',
region: 'center',
items: [{
id: 'col-1',
width: 200,
childAnchor: '50% 50%' ,
items: [
{
xtype: 'portalpanel',
items: [
{
id: 'col-4',
minHeight:200
}
],
}
]
},{
id: 'col-2',
items: [
{
xtype: 'portalpanel',
items: [
{
id: 'col-5',
minHeight:200
}
],
}
]
},{
id: 'col-3'
}]
}]
}
}
dynamic column:
Ext.create('Ext.app.PortalPanel', {
xtype: 'portalpanel',
});
}

Please Add Listener
listeners: {
render: function() {
var panel = this;
setTimeout( function() {
var parent = panel.up('portalpanel');
var bb = Ext.ComponentQuery.query('#threecolumn')[0]
console.log( bb == parent );
parent.dd.unreg();
parent.dd = Ext.create('Ext.app.PortalDropZone', parent, parent.dropConfig);
bb.dd.unreg();
bb.dd = Ext.create('Ext.app.PortalDropZone', bb, bb.dropConfig);
console.log(panel);
console.log(parent);
}, 500);
}
}

How to do the same without using Ext.getCmp in this code?

This is the code im using and im firing button click event once the window show event is called. this works fine. but how to do the same without using Ext.getCmp
this is the line
Ext.getCmp('recent_refresh').fireEvent('click');
this is the code
Ext.create('widget.window', {
title: 'Activity',
closable: true,
closeAction: 'hide',
width: 250,
height: 300,
bodyBorder: true,
tbar: {
xtype: 'toolbar',
ui: 'plain',
items: [{
iconCls:'refresh',
id: 'recent_refresh',
listeners: {
click: function(){
Ext.Ajax.request({
url: 'control.php',
params: {
'case': '18'
},
success: function(response){
var json = Ext.decode(response.responseText);
}
});
}
}
},
'->',
{
xtype: 'displayfield',
name: 'act_date',
id: 'act_date',
value: new Date(),
formatValue: Ext.util.Format.dateRenderer('Y-m-d')
}]
},
layout:'accordion',
border: false,
items: [ grid1, grid2, grid3 ],
listeners: {
show: function() { Ext.getCmp('recent_refresh').fireEvent('click'); }
}
}).show();
Regards

There are many ways to do this. One way is to make an assignment with the Ext.create call since Ext.create returns such a reference. The app namespace in the example below is a filler since any namespaces you are using are unknown from your text. Once you have the variable reference to the widget, you can get use it to get a reference to the top toolbar and then get a reference to the item you want inside of the toolbar.
Ext.ns('app');
app.activityWin = Ext.create('widget.window', {...}
app.activityWin.getTopToolbar().get('recent_refresh').fireEvent('click');

Use the ref property.. I don't know if it has been carried forward to Ext JS 4, but here's how we do it in Ext Js 3.3
var win = new Ext.Window({
..config..
buttons : [{
text : 'save'
ref : 'saveButton'
}],
listeners : {
show : function(win){
win.saveButton.fireEvent('click'); //saveButton here is the same as used in ref above.
}
}
});
ref can now been used directly and no need to use Ext.getCmp
check the correct usage of ref in your case and implement it..
Cheers.