I am new to jsTree. As I am in need to represent the node types also along with node names, I have moved to jsTreeGrid. I am in a need to create nodes, rename, delete, edit the tree nodes as well as edit the node types in the second column of the jsTreeGrid. Somehow I could edit the second column (ie.,type column) but the jsTree just displays the contextmenu but their corresponding functions are not called. Help on this would be very useful. Here is my code:
<div id="container"></div>
<script type="text/javascript">
$(document).ready(function(){
var data;
data = [{
text: "Satellite City",
data: {type: "<b>Project</b>", size: "30",spanclass:"root"},
children: [
{text: "Phase-1", data: {type: "<i>Phase</i>", size: "50",spanclass:"first"}},
{text: "Phase-2", data: {type: "<i>Phase</i>", size: "50",spanclass:"second"}, children:[
{text:"Ruby Towers",data:{type: "<i>Tower</i>",size:"50",spanclass:"third"}}
]}
]
}];
$("div#container").jstree({
plugins: ["themes", "json", "grid", "dnd", "contextmenu", "search"],
core: {
data: data
},
grid: {
columns: [
{width: 300, header: "WBS Tree",title:"_DATA_"},
{width: 100,
cellClass: "col1",
value: "type",
header: "<i>Node Type</i>",
valueClass:"spanclass"
},
],
resizable:true,
contextmenu:true
},
dnd: {
drop_finish : function () {
},
drag_finish : function () {
},
drag_check : function (data) {
return {
after : true,
before : true,
inside : true
};
}
}
});
$("input#search").keyup(function (e) {
var tree = $("div#container").jstree();
tree.search($(this).val());
});
});
</script>
I think your problem might be in the jsTree config. Try adding "check_callback": true to its core.
Or check out working fiddle - JS Fiddle.
Related
I try to implement flutter chart with high_chart: ^2.0.3 library.
When come to the implement the navigator its not showing on the chart. I enable the navigator but
Chart only show like this.
navigator: {
enabled: true
},
What i looking for get like this.
I add the chart data string like this.
final String _chartData = '''{
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
navigator: {
enabled: true
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2007-2008',
data: [
[Date.UTC(1970, 9, 27), 0 ],
//data
]
}, {
name: 'Winter 2008-2009',
data: [
[Date.UTC(1971, 5, 7), 0 ]//data
]
}, {
name: 'Winter 2009-2010',
data: [
[Date.UTC(1970, 9, 9), 0 ],
//data
]
}],
}''';
Also i add this for the index.html file
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
Full source code Here..
You need to load Highstock only, Highcharts is already included in Highstock:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/series-label.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
Live demo: http://jsfiddle.net/BlackLabel/hnxvqpyj/
Docs: https://www.highcharts.com/docs/stock/understanding-highcharts-stock
This is a custom control created for my previous question Custom font for currency signs
I have two span elements coming next to each other. They sit in the FormattedText. The FormattedText itself sits in the HBox.
I want popover fired when user mouses over/out from the hbox. Unfortunately, as I have 2 spans this fires separately when user hovers overs them (thus showing 2 separate popovers, when in fact it should be one). My assumption is that this causes because onmouseover/out is attached to both spans under the hood. Can I restrict these events to hbox only?
sap.ui.define([
'sap/ui/core/Control',
'sap/m/FormattedText',
'sap/m/HBox',
], function (Control, FormattedText, HBox) {
return Control.extend('drex.control.TherapyCosts', {
metadata: {
properties: {
rank: {
type: 'int',
defaultValue: 0
},
},
aggregations: {
_rankedTherapyCost: {type: 'sap.m.FormattedText', multiple: false, singularName: '_rankedTherapyCost'},
_popover: {type: 'sap.m.Popover', multiple: false, singularName: '_popover'},
_hbox: {type: 'sap.m.HBox', multiple: false}
}
},
init: function () {
Control.prototype.init.apply(this, arguments);
},
onBeforeRendering: function () {
const highlighedCurrency = this.getCurrency().repeat(this.getRank());
const fadedCurrency = this.getCurrency().repeat(7 - this.getRank());
const _popover = new sap.m.Popover({
showHeader: false,
placement: 'VerticalPreferredBottom',
content: new sap.m.Text({text: 'test'})
});
this.setAggregation('_popover', _popover);
const _formattedText = new FormattedText({
htmlText:
`<span class="currencyHighlighted">${highlighedCurrency}</span>` +
`<span class="currencyFaded">${fadedCurrency}</span>`
});
this.setAggregation('_rankedTherapyCost', _formattedText);
const _hbox = new HBox(
{ items: [this.getAggregation('_rankedTherapyCost')]})
.addEventDelegate({
onmouseover: () => {
this.getAggregation('_popover').openBy(this);
},
onmouseout: () => {
this.getAggregation('_popover').close()
}
});
this.setAggregation('_hbox', _hbox)
},
renderer: function (rm, oControl) {
const _hbox = oControl.getAggregation('_hbox');
rm.write('<div');
rm.writeControlData(oControl);
rm.write('>');
rm.renderControl(_hbox);
rm.write('</div>');
}
});
});
Here is the video of the issue
https://streamable.com/fjw408
The key here is the mouseout event is triggered when the mouse moves out of any child element of the element that is listening for the event. In this case, for example, moving from the emphasised text to the faded text, you get a mouseout event when moving off the emphasised text, which closes the popup, then a mouseover event on the faded text which opens it again.
Since you opening an already open popup doesn't do anything, you only need add a line on mouseout to inspect the element that you've gone to. If it is not a child of the current element, only then close the popover.
if (!this.getDomRef().contains(e.toElement)) {
popOver.close()
}
Building on D.Seah's answer, I've added this to the JSBin. I personally don't like using onBeforeRendering and onAfterRendering like this, so I've refactored a little to construct everything on init and simply change the controls on property change. This way, you're doing less on rendering for performance reasons.
sap.ui.define([
'sap/ui/core/Control',
'sap/m/FormattedText',
], function (Control, FormattedText) {
Control.extend('TherapyCosts', {
metadata: {
properties: {
rank: {
type: 'int',
defaultValue: 0
},
currency: {
type: "string",
defaultValue: "$"
}
},
aggregations: {
_highlighted: {type: 'sap.m.FormattedText', multiple: false},
_faded: {type: 'sap.m.FormattedText', multiple: false},
_popover: {type: 'sap.m.Popover', multiple: false, singularName: '_popover'}
}
},
init: function () {
Control.prototype.init.apply(this, arguments);
this.addStyleClass('therapy-cost');
const highlight = new FormattedText();
highlight.addStyleClass("currency-highlight");
this.setAggregation('_highlighted', highlight);
const faded = new FormattedText();
faded.addStyleClass("currency-faded");
this.setAggregation('_faded', faded);
const _popover = new sap.m.Popover({
showHeader: false,
placement: 'VerticalPreferredBottom',
content: new sap.m.Text({text: 'test'})
});
this.setAggregation('_popover', _popover);
},
_changeAggr: function () {
const highlighedCurrency = this.getCurrency().repeat(this.getRank());
const highlight = this.getAggregation("_highlighted");
highlight.setHtmlText(highlighedCurrency);
const fadedCurrency = this.getCurrency().repeat(7 - this.getRank());
const faded = this.getAggregation("_faded");
faded.setHtmlText(fadedCurrency);
},
setRank: function(rank) {
if (this.getProperty("rank") !== rank) {
this.setProperty("rank", rank);
this._changeAggr();
}
},
setCurrency: function(curr) {
if (this.getProperty("currency") !== curr) {
this.setProperty("currency", curr);
this._changeAggr();
}
},
renderer: function (rm, oControl) {
rm.write('<div');
rm.writeControlData(oControl);
rm.writeClasses(oControl);
rm.writeStyles(oControl);
rm.write('>');
rm.renderControl(oControl.getAggregation('_highlighted'));
rm.renderControl(oControl.getAggregation('_faded'));
rm.write('</div>');
},
onmouseover: function (e) {
const popOver = this.getAggregation('_popover');
popOver.openBy(this);
},
onmouseout: function (e) {
if (!this.getDomRef().contains(e.toElement)) {
const popOver = this.getAggregation('_popover');
popOver.close();
}
}
});
(new TherapyCosts({
rank: 5,
currency: "£"
})).placeAt('content')
});
.therapy-cost {
display: inline-flex;
flex-direction: row;
}
.therapy-cost .currency-highlighted {
color: black;
}
.therapy-cost .currency-faded {
color: lightgrey;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
</head>
<body class="sapUiBody sapUiSizeCompact">
<div id='content'></div>
</body>
</html>
https://jsbin.com/gukedamemu/3/edit?css,js,output
i think you can do without the hbox; by just having two formatted text or any sapui5 controls will be ok too.
sap.ui.define([
'sap/ui/core/Control',
'sap/m/FormattedText',
], function (Control, FormattedText) {
Control.extend('TherapyCosts', {
metadata: {
properties: {
rank: {
type: 'int',
defaultValue: 0
},
currency: {
type: "string",
defaultValue: "$"
}
},
aggregations: {
_highlighted: {type: 'sap.m.FormattedText', multiple: false},
_faded: {type: 'sap.m.FormattedText', multiple: false},
_popover: {type: 'sap.m.Popover', multiple: false, singularName: '_popover'}
}
},
init: function () {
Control.prototype.init.apply(this, arguments);
this.addStyleClass('therapy-cost')
},
onBeforeRendering: function () {
const highlighedCurrency = this.getCurrency().repeat(this.getRank());
const highlight = new FormattedText({
htmlText: highlighedCurrency
});
this.setAggregation('_highlighted', highlight);
const fadedCurrency = this.getCurrency().repeat(7 - this.getRank());
const faded = new FormattedText({
htmlText: fadedCurrency
});
this.setAggregation('_faded', faded);
const _popover = new sap.m.Popover({
showHeader: false,
placement: 'VerticalPreferredBottom',
content: new sap.m.Text({text: 'test'})
});
this.setAggregation('_popover', _popover);
},
renderer: function (rm, oControl) {
rm.write('<div');
rm.writeControlData(oControl);
rm.writeClasses(oControl);
rm.writeStyles(oControl);
rm.write('>');
rm.renderControl(oControl.getAggregation('_highlighted'));
rm.renderControl(oControl.getAggregation('_faded'));
rm.write('</div>');
},
onAfterRendering: function () {
const popOver = this.getAggregation('_popover');
const highlighted = this.getAggregation("_highlighted");
highlighted.$().addClass("currency-highlighted");
highlighted.$().hover(function() {
popOver.openBy(highlighted);
}, function() {
popOver.close();
});
const faded = this.getAggregation("_faded");
faded.$().addClass("currency-faded");
},
});
(new TherapyCosts({
rank: 5
})).placeAt('content')
});
https://jsbin.com/razebuq/edit?css,js,output
My grid panel:
new Ext.grid.GridPanel({
title: "Utilisateurs",
layout: 'fit',
style: marginElement,
columns: mesColonnesUtil,
id: 'gridPanelUtil',
width: '70%',
colspan: 2,
collapsible: false,
layout: 'fit',
autoWidth: true,
monitorResize: true,
height: 200,
store: storeUtil,
stripeRows: true,
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
listeners: {
click: function () {
this.selModel.getSelected();
}
}
});
My store:
var storeUtil = new Ext.data.JsonStore({
proxy: proxyGrUtil,
baseParams: {
method: 'storeUtil',
gr: ''
},
autoLoad: true,
fields: ["Nom", "Prenom", "LDAPUser"],
root: "rows",
totalProperty: "total",
successProperty: "success"
});
My combobox with select event, I load my grid panel with params:
{
xtype: 'combo',
store: storeGrUtil,
id: 'comboGrUtil_GrUtil',
width: 300,
valueField: "id",
displayField: "lib",
triggerAction: 'all',
mode: 'local',
listeners: {
select: function () {
Ext.getCmp('gridPanelUtil').store.load({
params: {
gr: Ext.getCmp('comboGrUtil_GrUtil').getValue() // this the value of items selected combobox
}
})
}
}
}
After this event, I can't select a row in my grid panel, why ?
I don't understand.
The problem is the call of the load event of the store. You have to execute the row selection in this event and not after the call. If I remember well, the grid is completely loaded in this event. Take a look of the code tag above.
If it not working, I suggest to take a look at other event. Maybe with rowinserted of the gridView.
var storeUtil = new Ext.data.JsonStore({ proxy: proxyGrUtil,
baseParams: { method: 'storeUtil', gr: '' },
autoLoad: true,
fields: ["Nom", "Prenom", "LDAPUser"],
root: "rows",
totalProperty: "total",
successProperty: "success",
listeners:
load: function(e, records, options){
Ext.getCmp("gridPanelUtil").getSelectionModel().selectRow(maLigneASelectionner);
}
}
});
you need to use the selectionModel of the grid, maybe you can pass a callback when calling load to the store
store.load({
callback: function(records, operation, success) {
//operation object contains all of the details of the load operation
//records contains all the records loaded
console.log(records);
}
});
the you can call
grid.getSelectionModel( ).select(object/index);
//you need to pass record instance or index
Can anyone explain me, what am I doing wrong?
I'm trying to load data to store and select some of that on form load.
Here is what I came up with so far:
https://fiddle.sencha.com/#fiddle/cjd
Ext.define('TagModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'some_id',
type: 'int'
}, {
name: 'some_value',
type: 'string'
}]
});
Ext.define('MyPanel',{
extend: 'Ext.panel.Panel',
renderTo: Ext.getBody(),
title: 'Some title',
width: 200,
heigh: 500,
layout: 'anchor',
items: [{
xtype: 'tagfield',
anchor: '100%',
displayField: 'some_value',
valueField: 'some_id',
store: Ext.create('Ext.data.Store', {
model: 'TagModel',
data: [{
some_id: 0,
some_value: 'value0'
}, {
some_id: 1,
some_value: 'value1'
}]
}),
// value: ['0']
}]
});
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('MyPanel');
}
});
It works well, but if you uncomment line 40, which should tell component to select items by their valueField config, it shows error in the console:
Uncaught TypeError: Cannot read property 'isModel' of undefined ext-all-debug.js:144157
According to the specification, value can be set as an array of strings associated to this field's configured valueField.
As posted by the OP Панов Владимир:
OK, I've found a solution:
The problem is in the source code of ExtJS. If anyone have same problem, you can use this override:
Ext.override(Ext.form.field.Tag, {
findRecord: function(field, value) {
var store = this.store,
matches;
if (store) {
matches = store.queryBy(function(rec) {
return rec.get(field) === value;
});
}
return matches ? matches.getAt(0) : false;
},
});
I'm new to Sencha, trying to implement a Sencha formpanel with a field to pick from a list of objects in a store. This seems like a sufficiently basic pattern that there must be a simple solution. I have a model which defines an ajax endpoint returning a json array (places) of name/id pairs:
Ext.define('MyApp.model.Place', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'string'},
{name: 'id', type: 'int'},
],
proxy: {
type: 'ajax',
url: '/m/places/',
reader: {
type: 'json',
rootProperty: 'places',
},
},
},
});
And a store:
Ext.define('MyApp.store.Place', {
extend: 'Ext.data.Store',
requires: ['MyApp.model.Place'],
config: {
model: 'MyApp.model.Place',
autoLoad: true,
sorters: [
{
property : 'name',
direction: 'ASC',
},
],
},
});
I want a read-only text field for the place name and a hidden field to submit the place id:
{
xtype: 'textfield',
name: 'place_name',
label: 'Place',
readOnly: true,
listeners: {
focus: function () {
var place_picker = Ext.create('Ext.Picker', {
slots: [
{
name: 'place_name',
title: 'Choose a Place',
store: Ext.create('MyApp.store.Place'),
itemTpl: '{name}',
listeners: {
itemtap: function (obj, index, target, record, e, eOpts) {
var form = Ext.getCmp('entityform');
form.setValues({
place_name: record.get('name'),
place_id: record.get('id'),
});
// how to dismiss the picker?
obj.parent.hide();
},
},
},
]
});
Ext.Viewport.add(place_picker);
place_picker.show();
},
},
},
{
xtype: 'hiddenfield',
name: 'place_id',
},
At this point, tapping the field causes the picker to slide up from the bottom and display the loading animation, but it is not being populated with the list of place names, although I can see that the ajax request has been made and that it has returned the expected json document.
I'll stop here and ask if I'm on the right track or is there some better approach out there?
Why isn't the picker being populated with the results of the ajax request? Is my use of itemTpl incorrect?
Am I setting the form fields in a sencha-appropriate way?
How should I dismiss the picker on itemtap? I somehow doubt that my use of hide() is the proper way.
Picker slots has an data config which is an array of objects. It should have a specific format with text and value.
slots :[
data : [{
text : someValue,
value : someValue1,}] ]
You need to add objects which has the fields text and value to slots.