We Keep Coding

Dynamically changing property field in ExtJs Grid

I am using a grid with a checkbox and a combobox. Right now I am trying to find a way to make the combobox multi select if the checkbox is checked in roweditor.
var pEditing =
Ext.create('Ext.grid.plugin.RowEditing',
{
clicksToMoveEditor: 2,
errorSummary: false,
autoCancel: false,
listeners:
{
change: function (newValue, oldValue, eOpts)
{
if (newValue.value == true)
{
this.down().down('grid').queryById('comboboxColumn').multiSelect = true;
}
else
{
this.down().down('grid').queryById('comboboxColumn').multiSelect = false;
}
console.log("Checkbox Change Debug");
}
}
});
Grid creation code :
{
renderer: renderCheckbox,
itemId: 'checkboxColumn',
header: 'Checkbox',
width: 100,
sortable: false,
dataIndex: 'ddCheckbox',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor',
listeners:{
change: function (newValue, oldValue, eOpts) {
pEditing.fireEvent('change',newValue, oldValue, eOpts);
}
},
},
},
{
header: 'Speed',
dataIndex: 'ddSpeed',
itemId: 'comboBoxColumn',
width: 125,
editor:
{
xtype: 'combo',
editable: false,
multiSelect: false,
store:
[
['1', '1'],
['2', '2'],
['3', '3'],
['4', '4'],
['5', '5']
]
}
}
Right now the event is firing off and I can see the debug message printed to the log. However the multiselect property is not persisting after the event is fired. Is there any easy way to change the property of this combobox in the row? For example, if there are 3 rows in the grid, row one can have the checkbox checked, and multiple values selected while row two has the checkbox unchecked and only one selection can be made? I know I can find the index of the checkbox selected by using in the change function.
this.down().down('grid').getSelectionModel().getSelection()[0].getData()
Thanks

"multiselect" property is not persisting because, your below code is not yet reach till combo box control.
this.down().down('grid').queryById('comboboxColumn').multiSelect = true;
As per your code, combo box control is under 'comboBoxColumn' item. So specify "itemID" for combo box like
xtype: 'combo',
editable: false,
multiSelect: false,
itemId: 'comboBoxItems',
store:[....]
Then, try below code
this.down().down('grid').queryById('comboboxColumn').queryById('comboBoxItems').multiSelect = true;

As you using RowEditing plugin
In checkbox on value change event you will get 4 parameters change:function(field, newValue, oldValue, eOpts)
1) Usign field parameter you will get your selected row(roweditor) like this field.up().
2) Using this roweditor you can use roweditor.down() method and get your combo.
3) After that getting your component(combo) and using second parameter newValue you can set multiSelect like combo.multiSelect = newValue
Here is I have created an sencha fiddle demo.
Hope this will help you to achieve your solution or requirement
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'combobox',
allowBlank: false
}
}, {
header: 'Multiple',
dataIndex: 'multiple',
sortable:false,
menuDisabled:true,
flex: 0.5,
editor: {
xtype: 'checkboxfield',
// checked:true,
listeners: {
change: function (field, newValue) {
var combo = field.up().down('#state');
combo.reset();
combo.multiSelect = newValue
}
}
}
}, {
header: 'States',
dataIndex: 'states',
flex: 1,
editor: {
xtype: 'combo',
store: states,
itemId: 'state',
queryMode: 'local',
displayField: 'name',
multiSelect:true,
valueField: 'abbr',
filterPickList: false,
listeners:{
afterrender:function(){
this.multiSelect=false;
}
}
}
}],
selModel: 'rowmodel',
plugins: {
ptype: 'rowediting',
clicksToEdit:1
},
height: 200,
width: '100%',
renderTo: Ext.getBody()
});

Kendo grid: How to create perform some taks on Add new row and not on Edit

In my KendoGrid I want to add default value for input field in my popup form.
I have created a function that I intend to call on clicking Create button, but the following function does not work. I searched a lot but could not find any help, so it would nice if someone can give me a hint where the problem is.
function add_m(e) {
debugger;
$("#DeviceIP").val("123");
}
$("#turbingrid").kendoGrid({
// debugger;
dataSource: dataSource,
scrollable: false,
//toolbar: ["create"],
toolbar: [
{name: "create",text: "add new turbine"}
],
columns: [
{ field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
{ field: 'Producer', title: 'Producer', width: '80px', id:'Producer'},//editor: ProductNameDropDownEditor,
{ field: 'Model', title: 'Model', width: '220px',id:'Model' },
{ field: 'DeviceType', title: 'DeviceType', width: '100px', editor: deviceTypesList },
{ field: 'Description', title: 'Description', width: '220px' },
{ field: 'Username', title: 'Username', width: '120px' },
{ field: 'Password', title: 'Password', width: '100px' },
{ field: 'PublicIP', title: 'PublicIP', width: '120px' },
{ field: 'TurbineId', title: 'TurbineId', width: '120px', hidden: true },
{ field: 'device_id', title: 'device_id', width: '120px', hidden: true },
{ field: 'ModelProducer', title: 'Producer/Model', hidden: true, editor: modelProducer },
{command: ["edit"], title: " "}
],
//{
// command: [
// {
// name: "Edit",
// click: function (e) {
// temp = $(e.target).closest("tr"); //get the row
// }
// }
// ]
//}
editable: "popup",
create:add_m,

to assign val or attribute dynamically use
edit:
edit: function(e) {
if (e.model.isNew()) {
e.container.find("input[name=test]").val(5555); // name changed, but worked for me
// e.container.find("input[name=device_id]").val(123);
}
}
or
beforeEdit:
beforeEdit: function(e) {
if (e.model.isNew()) {
$("#DeviceIP").val("123");
}
}

You can use the beforeEdit event, not create. It fires when the create button is clicked in the toolbar.

Here is the working DEMO.
Below is the code snippet that pastes the default value for DeviceIP on Add row event.
$("#turbingrid").kendoGrid({
....
.........
//ON CLICK ADD/EDIT BUTTON FOR PRODUCT ITEM
edit: function(e) {
// CHANGE ADD/EDIT PRODUCTITEM POPUP FORM TITLE
if (e.model.isNew()) //ON ADD NEW
{
$(".k-window-title").text("Add New Turbine");
// HERE e.container IS THE ADD/EDIT POPUP FORM ELEMENT
e.container
.find("[name=DeviceIP]") // get the span element for the field
.val("123") // set the value
.change(); // trigger change in order to notify the model binding
}
else // ON EDIT
{
$(".k-window-title").text("Edit Turbine");
}
}
........
....
});
Here is the complete code from the DEMO fiddle.
(function () {
var dataSource = new kendo.data.DataSource({
data: {
id: 1,
DeviceIP: "192.168.1.1",
Producer: 'Producer',
Model: 'Model',
DeviceType: 'DeviceType',
Description: 'Description',
Username: 'Username',
Password: 'Password',
PublicIP: '216.168.123.156',
TurbineId: 1,
device_id: 2,
ModelProducer: 'ModelProducer',
},
schema: {
model: {
id: 'id',
fields: {
DeviceIP: {},
Producer: {},
Model: {},
DeviceType: {},
Description: {},
Username: {},
Password: {},
PublicIP: {},
TurbineId: {},
device_id: {},
ModelProducer: {},
}
}
}
});
$('#grid').kendoGrid({
dataSource: dataSource,
scrollable: false,
//toolbar: ["create"],
toolbar: [
{name: "create",text: "add new turbine"}
],
columns: [
{ field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
{ field: 'Producer', title: 'Producer', width: '80px', id:'Producer'},//editor: ProductNameDropDownEditor,
{ field: 'Model', title: 'Model', width: '220px',id:'Model' },
{ field: 'DeviceType', title: 'DeviceType', width: '100px' },
{ field: 'Description', title: 'Description', width: '220px' },
{ field: 'Username', title: 'Username', width: '120px' },
{ field: 'Password', title: 'Password', width: '100px' },
{ field: 'PublicIP', title: 'PublicIP', width: '120px' },
{ field: 'TurbineId', title: 'TurbineId', width: '120px', hidden: true },
{ field: 'device_id', title: 'device_id', width: '120px', hidden: true },
{ field: 'ModelProducer', title: 'Producer/Model', hidden: true },
{command: ["edit"], title: " "}
],
editable: 'popup',
//ON CLICK ADD/EDIT BUTTON FOR PRODUCT ITEM
edit: function(e) {
// CHANGE ADD/EDIT PRODUCTITEM POPUP FORM TITLE
if (e.model.isNew()) //ON ADD NEW
{
$(".k-window-title").text("Add New Turbine");
// HERE e.container IS THE ADD/EDIT POPUP FORM ELEMENT
e.container
.find("[name=DeviceIP]") // get the span element for the field
.val("123") // set the value
.change(); // trigger change in order to notify the model binding
}
else // ON EDIT
{
$(".k-window-title").text("Edit Turbine");
}
}
});
})()

ExtJS 4.2 - How to map array to a model field and display dynamically on a grid column?

I have this json data:
{
id: 1,
name: 'something',
description: 'somethingsomething',
customers: [{
id: 1,
username: 'cust1'
}, {
id: 2,
username: 'cust2'
}]
}
While I have no problems displaying the first three fields on the gridpanel, I however have an issue retrieving the array object for the customers field. My model goes like this:
fields: [
'id', {
name: 'name',
sortType: Ext.data.SortTypes.asUCString
},
'permanent', {
name: 'description',
Type: Ext.data.SortTypes.asUCString
}, {
name: 'customers',
Type: Ext.data.SortTypes.asUCString
}, {
name: 'username',
Type: Ext.data.SortTypes.asUCString,
mapping: 'customers[0].username'
}
]
When I try to access customers[0].username, it only retrieves the ones on that specified index. Removing the index number returns undefined as I assume it is looking for what index to return from. How do I properly retrieve all of customers: [] and display it to my grid where it is structured as:
{
xtype: 'gridpanel',
store: oStore,
viewConfig: {
loadMask: false,
enableTextSelection: true
},
hideHeaders: false,
bodyBorder: true,
columns: [{
text: 'Customer',
dataIndex: 'username',
flex: 1
}, {
header: '',
xtype: 'actioncolumn',
itemId: 'remove-player-btn',
width: 50,
sortable: false,
resizable: false,
menuDisabled: true,
items: [{
icon: 'resources/img/x.png',
tooltip: 'Remove Player',
scope: oMe
}],
editor: {
xtype: 'text',
name: 'deleteRow'
}
}]
}

You can use convert function available in model.This convert function is used for some calculation purpose & map response data for our needs.For example I will map username as below:
fields: [
{
name:'username',
convert:function(value,model)
{
return model.data.customers.username;
}
}
]
Use same technique for id field.Reply if any issues.

Association between models failing in Ext js 6

I am working on small example to understand association which is working fine in Ext js 5 but failing in Ext js 6 version.
Ext.onReady(function() {
// parent model
Ext.define('Continent', {
extend: 'Ext.data.Model',
field: ['name'],
hasMany: {
model: 'Country',
name: 'countries'
}
});
//child model
Ext.define('Country', {
extend: 'Ext.data.Model',
field: ['name'],
associations: [{
type: 'belongsTo',
model: 'Continent',
associationKey: 'countries',
}]
});
//created store for parent which contains child data
Ext.define('ContinentStore', {
extend: 'Ext.data.Store',
storeId: 'continent',
model: 'Continent',
autoLoad: true,
proxy: {
type: 'memory',
data: [{
name: 'Asia',
countries: [{
name: 'India'
}, {
name: 'Srilanka'
}, {
name: 'Bangladesh'
}]
}, {
name: 'Africa',
countries: [{
name: 'Nigeria'
}, {
name: 'Kenya'
}, {
name: 'South Africa'
}]
}, {
name: 'America',
countries: [{
name: 'West'
}, {
name: 'East'
}, {
name: 'South'
}]
}]
}
});
var continentGrid = Ext.create('Ext.grid.Panel', {
title: 'Continent Grid',
store: Ext.create('ContinentStore'),
width: '50%',
height: '100%',
listeners: {
select: function(cmp, record, index) {
//record.countries() will return new store.
// to append new store I have used reconfigure method.
Ext.getCmp('CountryGrid').reconfigure(record.countries());;
}
},
columns: [{
dataIndex: 'name',
text: 'Continent',
flex: 1
}]
});
var countryGrid = Ext.create('Ext.grid.Panel', {
title: 'Country Grid',
id: 'CountryGrid',
width: '50%',
height: '100%',
columns: [{
dataIndex: 'name',
text: 'Country',
flex: 1
}]
});
Ext.create('Ext.window.Window', {
width: 500,
height: 400,
layout: 'hbox',
autoShow: true,
items: [continentGrid, countryGrid]
})
//console.log(continent);
});
when I try to run the example in Ext js 6 verison getting below error.
Uncaught Error: hasMany ("Continent") and belongsTo ("Country") should not be used in conjunction to declare a relatextionship. Use only one.(…)
working fiddle

Need some help with SC.SelectView

I'm trying to understand how it works. I have view:
roleSwitch: SC.SelectView.design({
layout: {top:38, height: 20, width: 256 },
items: [{ title: 'a', isEnabled: YES, checkbox: NO },
{ title: 'b', isEnabled: YES, checkbox: NO }],
itemTitleKey: 'title',
themeName: 'role',
showCheckbox: NO
})
I can't find any other information about SelectView. How i can pre-select item, where selection goes, why do I get an error each time when i make a selection?

Selection:
Lets say you have this:
MyApp.roleController = SC.ObjectController({
selectedRoleId: 1;
})
Then in your view:
roleSwitch: SC.SelectView.design({
layout: {top:38, height: 20, width: 256 },
items: [{ title: 'a', isEnabled: YES, checkbox: NO, roleId: 1 },
{ title: 'b', isEnabled: YES, checkbox: NO, roleId: 2 }],
itemTitleKey: 'title',
themeName: 'role',
showCheckbox: NO,
itemValueKey: 'roleId',
valueBinding: 'MyApp.roleController.selectedRoleId'
})
Your selection will be bound to the 'selectedRoleId' of the roleController