I am trying to figure out how to bind a data model to a custom control. I have searched a number of similar questions here but they don't seem to match what I am trying to do. Maybe my method is wrong.
Anyway, I have created a Plunkr (https://plnkr.co/edit/UghwOObcDn1oRndOpCeJ) to demonstrate. Two input fields are created, one of which is on a custom control which extends a sap.m.Panel. I am attempting to bind the name and enabled properties to both input fields. No problem with the simple sap.m.Input on the page but the one in the custom control MyPanel no such luck. The name and enabled properties for both input fields should change when the button is pressed.
For the custom control I am trying to pass the bind properties to the value and enabled properties of the embedded input field as can be seen in App.view.xml.
If I change the following in MyPanel.js:
value: mSettings.value,
enabled: mSettings.enabled
to
value: '{/name}',
enabled: '{/editing}'
all works fine.
Any help or direction would be appreciated.
You will have to define the 'value' and 'enabled' properties in your custom control. To get the binding working you need to have custom setter/getter methods in your extended control. These methods are called on binding updates.
Here is the updated link
sap.m.Panel.extend('my.App.MyPanel', {
constructor: function(mSettings) {
sap.m.Panel.apply(this, arguments);
this.ef = new sap.m.Input({
width: '100px',
value: mSettings.value,
enabled: mSettings.enabled
});
this.setAggregation('_ef', this.ef);
},
metadata: {
properties: {
enabled: { type: 'boolean', defaultValue: true },
value: { type: 'String', defaultValue: "" }
},
events: {
},
aggregations: {
_ef: { type: 'sap.m.Input', multiple: false, visibility: 'hidden' }
}
},
init: function() {
},
renderer: function(oRM, oControl) {
oRM.renderControl(oControl.getAggregation('_ef'));
},
setValue: function (sValue) {
this.ef.setValue(sValue);
},
setEnabled: function (bValue) {
this.ef.setEnabled(bValue);
},
getValue: function(){
return this.ef.getProperty("value");
},
getEnabled: function(){
return this.ef.getProperty("enabled");
}
});
Related
I'm having difficulties retrieving my input values through Extjs6's references. There doesn't seem to be a clear cut answer and google is polluted with answers that seem distinct to many different Extjs versions.
I have a window which contains a textfield and a save button, from the textfield I need to retrieve the user's input and pass it along to my ajax call.
My code:
window.updatePassword = function(button) {
var win = new Ext.Window({
referenceHolder: true,
items: [{
xtype: 'form',
items: [{
xtype: 'textfield',
fieldLabel: "newPassword",
reference: 'newPassword',
inputType: 'password'
}],
}],
buttons: [{
text: 'save',
handler: function (btn) {
Ext.Ajax.request({
url: '../../Password_updatePassword.action',
params : {
newPassword: win.newPassword
},
scope: this,
disableCaching: true
});
},
scope: this
}]
});
win.show(this);
};
The things I've tried so far:
this.lookupReference('newPassword')
win.values
win.getValues()
win.newPassword
Ext.getCmp('newPassword')
Any advice would be appreciated.
this.lookupReference('newPassword') - This refers to current object
and handler dont have any component to lookup.
win.values - doesnt make any sense unless you have created a config
in win.
win.getValues() - again doesnt make any sense unless you have create a method in win.
win.newPassword - again same.
Ext.getCmp('newPassword') - getCmp works with id, not with reference.
To get the reference of password field you can lookup on win object,
win.lookupReference('newPassword');
To get the value you have to use getValue() method.
win.lookupReference('newPassword').getValue();
I have two select2 dropdowns and I want to change options the second dropdown depending on first dropdown.
For example,
{
data: 'country_id',
editor: 'select2',
renderer: customDropdownRenderer,
select2Options: {
data: {!! $production_units !!} ,
dropdownAutoWidth: true,
}
},
{
data: 'state_id',
editor: 'select2',
renderer: customDropdownRenderer,
select2Options: {
data: [],
dropdownAutoWidth: true,
width: 'resolve'
}
},
Depending on country_id, I want to change select2 options of state_id. I know how to make this work with just select2, but I am not able to figure out how to make it work with handsontable.
I have change select2Options in afterChange, but how to do that?
afterChange: function (change, source) {
if(change)
{
if(change[0][1] == 'country_id')
{
$.get("/api/states?country="+change[0][3], function(data){
//What should be done here?
});
}
}
},
You retrieve all the states for that country. Make sure the states list is in the same format that select2 expects.
Then loop through the columns list and determine the dependent column for the current column that has been modified.
Get the cell properties:
var cellProperties = instance.getCellMeta(rowIndex, dependentColumnIndex);
Update the select2 source:
cellProperties['select2Options'].data = [states list];
I'm pulling my hair out on this one...
I have a view with some grids, a store and a viewModel. I need different filtered versions of the store in different grids, so I'm trying to bind each filtered store to a grid. Now I can't even get a store to load in a grid in the first place...
Here's what my code looks like:
Store:
Ext.define('My.store.Admin.Kinder', {
extend: 'Ext.data.Store',
model: 'My.model.Kind',
storeId: 'adminKinderStore',
alias: 'store.adminKinder',
proxy: {
type: 'ajax',
method: 'post',
url: '/getKinder',
reader: {
type: 'json',
rootProperty: 'kinder'
}
}
});
ViewModel:
Ext.define('My.model.kindViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.kindViewModel',
requires: [
'My.model.Kind',
'My.store.Admin.Kinder'
],
view: 'kindView',
stores: {
warteliste: {
type: 'adminKinder'
}
}
});
View:
Ext.define('My.view.Admin.kinder', {
extend: 'Ext.panel.Panel',
alias: 'widget.kindView',
id: 'kinder-panel',
requires: [
'My.view.Admin.kindController',
'My.model.kindViewModel'
],
controller: 'kind',
border: false,
maxWidth: 960,
session: My.session,
viewModel: {
type: 'kindViewModel'
},
initComponent: function() {
this.activeTab = 'warteliste-tab';
this.callParent();
},
items: [
{
xtype: 'grid',
id: 'warteliste-grid',
bind: {
store: '{warteliste}'
},
border: false,
margin: '0 0 20px 0',
selModel: {
allowDeselect: true
},
columns: [
// some grid columns
],
listeners: {
afterRender: function(grid) {
grid.store.load();
}
}
}]
});
I get an error message "Cannot modify ext-empty-store", which must mean that the store is not (yet) bound when store.load() is called in the afterRender listener.
Strange thing is, when I console.log the grid, the store is there. When I console.log grid.store, an empty store is returned.
I got the same issue in afterRender event and solved it by not getting the store from the grid like
grid.store.load();
but from the ViewModel (ViewController scope):
this.getViewModel().getStore('{warteliste}').load();
Check if the store is created as expected in viewmodel. Normally, we do not have store definition files in ./store directory but we place their configurations in viewmodel.
See an example of that here: http://extjs.eu/ext-examples/#bind-grid-form - MainModel::stores
The solution to your original problem
I need different filtered versions of the store in different grids
are chained stores.
See an example of how to implement them here: http://extjs.eu/on-chained-stores/
for me it was
myGrid.getViewModel().getStore('myStoreName').load();
I have two views in database. Bonuses and employees. One(employee)-to-many(bonuses).
I have kendo ui grid (kendo web), which displays ajax results from controller called Bonuses
And an autocompliting element - Employee Combobox binded with Employee filed of a grid.
Grid's datasource:
// bind json result from /Bonuses/GetPagedJsonBonuses
var bonusesDataSource = new kendo.data.DataSource({
transport: {
read: "#Url.Action("GetPagedJsonBonuses", "Bonuses")",
update: {
url: "#Url.Action("Edit", "Bonuses")",
type: "PUT"
},
create: {
url: "#Url.Action("Create", "Bonuses")",
type: "POST"
},
parameterMap: function(options, operation) {
if (operation === "update" || operation === "create") {
// updates the BonusDTO.EmployeeId with selected value
if (newValueEmployeeId !== undefined)
options.EmployeeId = newValueEmployeeId;
}
return options;
}
},
schema: {
data: "Data", // PagedResponse.Data
total: "TotalCount", // PagedResponse.TotalCount
model: {
id: "BonusId", // Data
fields: {
EmployeeId: { type: "number" },
EmployeeLastName: {
type: "string",
editable: true,
//validation: { required: {message: "Employee's last name is required"}}
},
Amount: {
type: "number",
editable: true,
nullable: false,
validation: {
required: { message: "Amount is required to be set" }
}
}
} // fields
} // model
}// schema
});
Grid element looks like this:
// creates bonuses grid control
$("#bonusesGrid").kendoGrid({
dataSource: bonusesDataSource,
toolbar: ["create"],
editable: "inline",
columns: [
"BonusId",
"EmployeeId",
{
field: "EmployeeLastName",
editor: employeeAutocompletingEditor,
template: "#=EmployeeLastName#"
},
"Amount",
{
command: ["edit"],
title: " "
}
],
save: function(e) {
if (newValueEmployeeId !== undefined && newValueEmployeeLastName !== undefined) {
e.model.EmployeeId = newValueEmployeeId; // it's a hack to bind model and autocomplete control
e.model.EmployeeLastName = newValueEmployeeLastName;
}
},
edit: function(e) {
setCurrentValueEmployeeIdAndLastName(e.model.EmployeeId, e.model.EmployeeLastName);
},
cancel: function(e) {
setCurrentValueEmployeeIdAndLastName(e.model.EmployeeId, e.model.EmployeeLastName);
}
});
Autocompleting combobox has it's own datasource using ajax:
// datasource for autocomlete combobox to lookup employees names from
var employeesDataSource = new kendo.data.DataSource({
transport: {
read: "#Url.Action("GetJsonEmployeesByLastName", "Bonuses")",
},
parameterMap: function(options, operation) {
if (operation === "update" || operation === "create") {
setNewValueEmployeeIdAndLastName(options.Id, options.LastName);
}
return options;
},
});
Autocompliting combobox look's like this:
function employeeAutocompletingEditor(container, options) {
$('<input required data-text-field="LastName" data-value-field="EmployeeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
// sets the local variables to update values of current row.
change: function() {
setNewValueEmployeeIdAndLastName(this.value(), this.text());
},
dataBinding: function (e) {
console.log("dataBinding: ", e, this.dataItem());
},
dataBound: function (e) {
console.log("dataBound: ", e, this.dataItem());
},
dataSource: employeesDataSource
});
}
I use Editor binding to pass values(EmployeeId) and Text (EmployeeLastName) from grid to combobox.
I also use a hack like temporal variables (newValueEmployeeId, currentValueEmployeeId) to
send selected Employee in combobox and pass it to grid for correct save. A found it's a most common practice to pass a value back to grid.
My problems is:
If I press Edit button on my grid first time The combobox displays current employee's name from grid row:
If I press Cancel button and again press Edit button, combobox doesn't display current value of grid (employee's name)
IF I type some name, change some other values, and Udate(save) value, next time combobox again displays employees name, but only once before Cancel was pressed.
I'm very new in Kendo UI and this problem drives me crazy...
I think that combobox losts it's binding or doesn't update smth. I tried to set values while onBound and onBinding events, but this doesn't help. Please help me with an advice and example.
PS all evenets and functions is my try to debug and find solution.
only one fix helped me:
var employeeList = new List<Employee>()
employeeList.add(new Emplpyee()) // add fake employee record.
return Json(employeeList)
I don't know why, but grid control start make cyclying empty ajax requests if I return empty list of employees or null. This doesn't work:
return Json(new List<Employee>());
return Json(null);
I think it's a problem in kendo combobox itself ,because it's not ready to receive and handle empty list or null as json result.
Also I heared something, that JQuery doesn't support empty or null results anymore...maybe that's the reason
I am implementing a project picker for a Rally custom app and would like to select a projects children automatically when the parent is selected from the picker. I was able to get the ObjectID and Name of the objects I want to select but can't seem to get them to be selected from the picker. I attempted this using the "fireEvent" method but had no success. Here's what I have so far:
var teamPick = this.down('#filterPanel').add({
xtype: 'rallymultiobjectpicker',
id: 'teams',
modelType: 'project',
fieldLabel: 'Teams',
listeners: {
select: function(field, selected) {
Ext.create('Rally.data.WsapiDataStore', {
autoLoad: true,
fetch: [ 'Name', 'ObjectID' ],
filters: [
{ property: 'Parent.ObjectID', value: selected.ObjectID }
],
model: 'Project',
listeners: {
load: function(store, data) {
Ext.Array.each(data, function(child) {
console.log(child.get('Name')); //Logs the child name
});
}
}
});
},
scope: this
}
});
Are you using 2.0p3? There was a known issue with events not being correctly fired in the MultiObjectPicker. This should be resolved in 2.0p4. I ran your code in a 2.0p4 app and it functioned as expected.
As a side note your child project query can be written like this as well:
filters: [
{ property: 'Parent', value: '/project/' + selected.ObjectID }
]
The 2.0p4 version of the component also added a new event called selectionchange which gives you an array of the currently selected values (since it is a multi select picker). There are individual select and deselect events that fire when a specific item is selected/deselected.
I was able to accomplish this without the use of the fireEvent method. Instead, I used the getValue and setValue methods and added the child projects to the state manually:
this.down('#filters').add({
xtype: 'rallymultiobjectpicker',
id: 'teams',
modelType: 'project',
listeners: {
blur: function() { this.down('#teams').collapse(); },
select: function(field, selected) {
Ext.create('Rally.data.WsapiDataStore', {
autoLoad: true,
fetch: [ 'Name', 'ObjectID' ],
filters: [
{ property: 'Parent.ObjectID', value: selected.ObjectID }
],
model: 'Project',
listeners: {
load: function(store, data) {
var selected = this.down('#teams').getValue();
Ext.Array.each(data, function(child) {
selected.push(child.data);
});
this.down('#teams').setValue(selected);
},
scope: this
}
});
}
scope: this
}
});