When I remove the second line of data, a field on the first line appears undefined, that is, unable to execute the template：
{
field: "professionLevel",
title: '<#spring.message "技能等级"/>',
width: 120,
template: function (dataItem) { //meaning of the template: Just convert English to Chinese,
for (var i = 0; i < professionLevelData.length; i++) {
if (professionLevelData[i].value === dataItem.professionLevel) {
return dataItem.professionLevel = professionLevelData[i].meaning;
}
}
}
}
I think you're doing something else wrong. With the code you provided I cant salvage enough to reproduce the problem so I will present you with a simple working case (similar to your template logic):
var data = [
{id: 2, name: "John Doe", age: 33},
{id: 1, name: "Jane Doe", age: 30},
{id: 3, name: "Bob Doe", age: 22}
];
var translate = [
{value: 1, translate: "traslate 1"},
{value: 2, translate: "traslate 2"},
{value: 3, translate: "traslate 3"}
];
$("#grid").kendoGrid({
columns: [
{
field: "name",
template: function (dataItem) {
var returnValue = dataItem.name;
for (var i = 0; i < translate.length; i++) {
if (dataItem.id === translate[i].value) {
returnValue = translate[i].translate;
}
}
return returnValue;
}
},
{field: "age"},
{command: "destroy"}
],
dataSource: {
data: data,
schema: {
model: {id: "id"}
}
},
editable: true,
remove: function (e) {
console.log("Removing", e.model.name);
}
});
Example: Translate example
If this doesn't solve your problem please expand the question with relevant data.
PS. With return dataItem.professionLevel = professionLevelData[i].meaning; you are updating grids data source, are you sure you want to update it? Or just show meaning in table? In that case just return professionLevelData[i].meaning;
Related
I found an example of how to fill the table with pdfmake dynamically, which has 2 columns. Now I tried add another column 'height' to the table but I don't know how to modify it.
function buildTableBody(data, columns) {
var body = [];
body.push(columns);
data.forEach(function(row) {
var dataRow = [];
columns.forEach(function(column) {
dataRow.push(row[column].toString());
})
body.push(dataRow);
});
return body;
}
function table(data, columns) {
return {
table: {
headerRows: 1,
body: buildTableBody(data, columns)
}
};
}
function Pdftest(){
var externalDataRetrievedFromServer = [
{ name: 'Bartek', age: 34, height: 1.78 },
{ name: 'John', age: 27, height: 1.79 },
{ name: 'Elizabeth', age: 30, height: 1.80 },
];
var dd = {
content: [
{ text: 'Dynamic parts', style: 'header' },
table(externalDataRetrievedFromServer, ['name', 'age', 'height'])
]
}
pdfMake.createPdf(dd).download();
}
Does anybody know what needs to be modified?
Error was anywhere else, the code above works perfectly fine
I need to set a ban on editing the text field in Ext.window.Window, provided that the value of the drop-down list is set to Postponed.
I'm trying to do this in the filterCombo function with:
var inp = this.up ('window'). down ('# MyTextField');
inp.disable ();
but in the console I get the error:
TypeError: this.up is not a function
What am I doing wrong?
Below is my code:
var store = Ext.create('Ext.data.Store', {
fields: ['order', 'id', 'name'],
storeId: 'DoubleBookStore',
data : [
{"id": 23, name: "New", order_install: 1},
{"id": 24, name: "In Work", order_install: 2},
{"id": 29, name: "Postponed", order_install: 3},
{"id": 34, name: "Shipped", order_install: 4},
{"id": 31, name: "In_transit", order_install: 5}
]
});
function filterCombo(combobox, records) {
if(records.data.name == 'Postponed'){
var inp = this.up('window').down('#MyTextField');
console.log(inp);
inp.disable();
}
index = records.data.order_install;
store = combobox.getStore();
store.clearFilter();
store.filterBy(
function(record) {
if ((record.internalId == index - 1) || (record.internalId == index) || (record.internalId == index + 1)) {
return true;
} else {
return false;
}
}
);
};
var window = Ext.create('Ext.window.Window', {
title: 'Приложение',
width: 300,
height: 200,
items:[{
xtype: 'combobox',
fieldLabel: 'Status',
name: 'status',
store: store,
valueField: 'id',
displayField: 'name',
typeAhead: true,
queryMode: 'local',
value: 24,
listeners: {
select : function(combo, records) {
filterCombo(combo, records);
}
}
},
{
xtype: 'textfield',
fieldLabel: 'Ваше имя:',
itemId:'MyTextField',
name: 'name'
}]
});
window.show();
You cant use "this" outside the scope of the select function, you are already passing "this" as the parameter "combobox", so use it like this:
function filterCombo(combobox, records) {
var inp = combobox.up('window').down('#MyTextField');
if(records.data.name == 'Postponed'){
inp.disable();
} else {
inp.enable();
}
...
When you define the filterCombo method as you define it takes this as global scope. Thats why there is no this.up as this here is global.
To make your code working you need to pass the scope when calling your function, just replace
listeners: {
select : function(combo, records) {
filterCombo(combo, records);
}
}
with
listeners: {
select : function(combo, records) {
filterCombo.apply(this,[combo, records]);
}
}
Notice the use of apply to alter the behavior of this in your method.
Solution:
function filterCombo(combobox, records) {
if (records.data.name == 'Postponed'){
var inp = combobox.up('window').getComponent('MyTextField');
console.log(inp);
inp.disable();
}
...
});
Explanation:
What you want to do is to get reference to your textfield and then disable it.
your texfield config uses itemId, so you must use texfield's container getComponent() method
to get textfield container use combobox.up('window'), not this.up('window')
I do not understand why I've got an error message, could anyone help me understand and sweat I can not do it again. I junior developer and I need your help
i have this The 'get' property does not exist on the 'any []' type.
let nodes = [];
nodes = [
{ id: 1, label: "PV Panels", color: "#3333ff" },
{ id: 2, label: "Gensets",color: "#cc00ff" },
{ id: 3, label: "Battery",color: "#ff0066" },
{ id: 4, label: "Wind Turbines",color: "#000099" }
];
net.on("selectNode", function (params) {
var selectedNode = nodes.get(params.nodes[0]);
alert("You've selected node: " + selectedNode.label);
});
With some modification the get() works.
let nodes = new vis.DataSet ([
{ id: 1, label: "PV Panels", color: "#3333ff" },
{ id: 2, label: "Gensets",color: "#cc00ff" },
{ id: 3, label: "Battery",color: "#ff0066" },
{ id: 4, label: "Wind Turbines",color: "#000099" }
]);
net.on("selectNode", function (params) {
var selectedNode = nodes.get(params.nodes[0]);
alert("You've selected node: " + selectedNode.label);
});
After this fact can you tell me how I display its information in an input.
I thought about using a getElementById.
What do you think?
The get method doesn't exist on an array. You might want to use the find method
More information can be found here: https://www.w3schools.com/jsref/jsref_find.asp
To show the result in an input field:
document.getElementById('yourInputFieldID').value = selectedNode
Assuming selectedNode variable is a string.
How can I browse a store and find the number of records which have one attribute the same?
I have tired filterBy but there you can only enter a concrete value not an attribute
Let's say I have this records:
record1{
name: 'John'
}
record2{
name'John'
}
record3{
name:'Steve'
}
Return the records with the same name
Just loop over the collection:
var seen = {};
store.each(function(rec) {
var name = rec.get('name');
if (!seen.hasOwnProperty(name)) {
seen[name] = 0;
}
++seen[name];
});
You might also be interested by Grouping:
var myStore = Ext.create('Ext.data.Store', {
groupField: 'name',
groupDir : 'DESC'
});
myStore.getGroups(); // returns:
[
{
name: 'yellow',
children: [{
name: 'John'
}, {
name: 'John'
}]
},
{
name: 'Steve',
children: [{
name: 'Steve'
}]
}
]
Then you can count how many children there is in each group.
(More details here: http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.data.Store)
i have created a tree select that shows a dijit.tree in the dropdown. Now I do not want the user to select a folder even if it is empty. User should only be able to select the end nodes or leaves. dijit.tree treats all empty folders as leafs. how do I get that sorted?
You need to override the _onClick or setSelected methods. This gets complicated if you use the multi-parental model ForestStoreModel.
See fiddle.net
Try doing as such, this will only work for select multiple false:
getIconClass: function fileIconClass(item, nodeExpanded) {
var store = item._S,
get = function() {
return store.getValue(item, arguments[0]);
};
// scope: dijit.Tree
if (item.root || get("isDir")) {
if (!item || this.model.mayHaveChildren(item) || get("isDir")) {
return (nodeExpanded ? "dijitFolderOpened" : "dijitFolderClosed");
} else {
return "dijitLeaf";
}
} else {
return "dijitLeaf";
}
},
onClick: function(item, treeNode, e) {
var store = item._S,
get = function() {
return store.getValue(item, arguments[0]);
};
if (get("isDir")) this.set("selectedItems", []);
}
Adapt as you see fit, matching your json data - in particular the isDir, the above works on a sample of json like this
{
identifier: 'id',
label: 'foo',
items: [
{
id: 'item1',
foo: 'file1',
isDir: false},
{
id: 'item2',
foo: 'emptyDir',
isDir: true},
{
id: 'item3',
foo: 'dir',
isDir: true,
children: [
{
id: 'item3_1',
foo: 'fileInDir',
isDir: false}
]}
]
}