I am attempting to create a Dojo layout using this code:
require([ 'dijit/registry', 'dijit/layout/BorderContainer', 'dijit/layout/TabContainer', 'dijit/layout/ContentPane', 'dojo/store/Memory', 'gridx/core/model/cache/Sync', 'gridx/Grid', 'dojox/dgauges/components/default/HorizontalLinearGauge', 'dojox/charting/Chart', 'dojo/domReady!' ], function(
registry,
BorderContainer,
TabContainer,
ContentPane,
Memory,
Sync,
Grid,
HorizontalLinearGauge,
Chart
) {
Layout = new BorderContainer({
'design' : 'headline',
'class': 'borderContainerLayout'
}, 'dashboardLayout');
Layout.addChild(new ContentPane({
'id': 'layoutRight',
'region' : 'right',
'content': '<div id="days-between-purchases"></div>',
'splitter': true
}));
Layout.startup();
var hlg = new HorizontalLinearGauge({
'title': 'Purchase Cycle (Average # of days between purchases)',
'srcRefNode': 'abc',
'value': 20,
'class': 'gauge',
'noChange': true,
'width': 150,
'height': 150,
'min': 0,
'max': 100,
}, registry.byId('days-between-purchases'));
hlg.render();
There is more code to add a center, left, etc to the BorderContainer, but the problem I'm getting is "Unable to get property 'nodeType' of undefined or null reference. From the DOM captured at the time, it seems that the layout is not yet rendered into the DOM, so it cannot find registry.byId('days-between-purchases'). I have tried about 10 different ways of trying to put this together to render the layout and gauge during run time and searched heavily for a solution, but have come up with nothing.
What am I doing wrong? Do you know of a tutorial which shows how to fully render a layout with a gauge at runtime? Sample code?
Thanks, in advance.
FYI: I am using the latest version of dojo with this dojoConfig:
var dojoConfig = {
baseUrl : "//ajax.googleapis.com/ajax/libs/dojo/1.9.1/",
async : true,
isDebug : true,
parseOnLoad : false,
//gfxRenderer: "svg,silverlight,vml",
packages : [ {
name : "dojo",
location : "dojo"
}, {
name : "dijit",
location : "dijit"
}, {
name : "dojox",
location : "dojox"
}, {
'name': 'gridx',
'location': '/resources/common/javascript/gridx'
}]
};
Hard to understand what is going on as your sample does not seem to be fully runnable? In particular I don't think gauges have a render() method and you are calling render on it?
In dojox/dgauges/tests/test_all.html you will find a test showing gauges used in a BorderContainer. Maybe it can help.
Related
I'm developing an web application that handles and shows large amounts of live data from some devices. To visualise the data I decided to use HighStock. It seems to work well on most of the data:
However, when the bottom navigator touches right border, the picture becomes quite different:
The timeline is almost the same, but the number of points is different, also vertical scale is different... What is this happening? How to fix it?
My code looks this way:
const ch1 = Highcharts.stockChart('chart1', {
rangeSelector: {
selected: 1,
inputEnabled: false,
buttonTheme: {visibility: 'hidden'},
labelStyle: {visibility: 'hidden'},
},
title: {
text: 'Metrics',
},
series: [{
name: 'Sensor 1', data: [],
}, {
name: 'Sensor 2', data: [],
}, {
name: 'Sensor 3', data: [],
}]
});
// a,b,c gets values from the server
// They are arrays of pairs of timestamp & value
ch1.series[0].setData(a);
ch1.series[1].setData(b);
ch1.series[2].setData(c);
// tm_min & tm_max are dynamically calculated using the data
ch1.xAxis[0].setExtremes(tm_min, tm_max);
Update: Here is an example with 2% of my data – try to do the same as shown above.
I found the solution. The issue is caused by your data and xAxis.ordinal that is enabled by default in Highstock. Your data has many empty points on the right side of the chart and because of ordinal, the empty space was not rendered, yet dataGrouping grouped data differently.
Check this here https://jsfiddle.net/BlackLabel/x1tgqbw6/ (disabled ordinal):
xAxis: {
ordinal: true
}
So, the solution is to disable xAxis.ordinal or generate your data without null points:
https://jsfiddle.net/BlackLabel/ex054oy8/
API reference:
https://api.highcharts.com/highstock/xAxis.ordinal
I visited a lot of websites to find a solution.
My editor works in almost every browser except internet explorer.
In internet explorer the space(textarea) to change the content isnt showing up, the rest of the editor is visible. Does anyone knows a solution? I didn't find it on the internet.
Updating the editor maybe is a solution, but it took me a while to configure it together with ckfinder, so I'm afraid that it ckfinder isn't working after an update.
The editor worked a few months ago, but I didn't work on the website for a few months.
<textarea id="textarea" name='text' class='editor'></textarea>
To show my editor.
<script>
$(document).ready(function(){
$('textarea.editor').ckeditor(
function() {
/* callback code */
},
{
language : 'nl',
uiColor : '#e9eaee',
toolbarStartupExpanded : false,
toolbar :
[
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks', 'Source'] },{ name: 'document', items : ['DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar' ] }
],
height: '225',
extraPlugins : 'tableresize'
} );
});
</script>
Try to disable your add-ons, and if the problem was solved, enable add-ons one by one to find the one which cause the problem.
Based on the comments on the previous answer, the problem is with IE10, right? Sounds like a version issue. IE10 is not supported for CKFinder 2.2.2, so you could try updating CKF.
It would help if you include the CKFinder, CKEditor and Browser versions in the question :).
It could be a config or general JS issue too - do you have a JSfiddle or other link we could check out? Also, have you checked what the Developer tools for IE10 reports, there could very well be informative errors there.
I am trying to interact with a javascript api (bare in mind I have never done this before). An example of what I am attempting to work with is here:
SearchSpring.Catalog.init({
leaveInitialResults : true,
facets : '.leftNav',
results : '#results',
result_layout: 'list',
results_per_page : 12,
layout: 'top',
loadCSS: false,
filters: {
color: ['Blue']
},
backgroundFilters: {
category: ['Shirt', 'Shoes'],
department: ['Mens']
},
maxFacets: 5,
maxFacetOptions: 10,
sortText: 'Sort By ',
sortType: 'dropdown',
filterText: 'Refine Search Results',
previousText: 'Previous',
scrollType: 'scroll',
scrollTo: 'body',
backgroundSortField: 'price',
backgroundSortDir: 'desc',
compareText: 'Compare Items',
summaryText: 'Current Filters',
showSummary: true,
subSearchText: 'Subsearch:',
showSubSearch: true,
forwardSingle: false,
afterResultsChange: function() { $('.pagination').hide(); },
filterData: function(data) { console.debug(data); }
});
In the example I want to add a "backgroundFilter" to this with a value:
var cat="MyNewCategory";
cat.value="ANewValue;
How would I add this category and value to the backgroundFilters: listed above?
This is a very common framework initialization pattern when working with frameworks.
Your example code is passing a JavaScript Object {} as a parameter into a function () that is called init.
Taking out all definitions the pattern looks like this:
SomeFramework.frameworkFunction({});
In the above code the {} is an empty object used for initialization. There are two ways that you can work with that object in practice.
Regarding your first code snippet, you can add code into that 'object literal'.
backgroundFilters: {
category: ['Shirt', 'Shoes'],
department: ['Mens'],
cat: ['My value']
},
Notice the added comma, this is an important tripping point. This may or may not fit your needs, depending on a few factors.
Regarding your second code snippet, you can apply members to JavaScript objects at runtime. What I mean is, your var cat can be added to the anonymous object-literal that is being passed in. Hard to say, but a simple concept. Here is how:
//Say this is initialized in some separate way. //There is a bug here I'll describe later.
var cat="MyNewCategory";
cat.value="ANewValue";
//Extract and name the initialization object. It is verbatim at this point.
var initObject = {
leaveInitialResults : true,
facets : '.leftNav',
results : '#results',
result_layout: 'list',
results_per_page : 12,
layout: 'top',
loadCSS: false,
filters: {
color: ['Blue']
},
backgroundFilters: {
category: ['Shirt', 'Shoes'],
department: ['Mens']
},
maxFacets: 5,
maxFacetOptions: 10,
sortText: 'Sort By ',
sortType: 'dropdown',
filterText: 'Refine Search Results',
previousText: 'Previous',
scrollType: 'scroll',
scrollTo: 'body',
backgroundSortField: 'price',
backgroundSortDir: 'desc',
compareText: 'Compare Items',
summaryText: 'Current Filters',
showSummary: true,
subSearchText: 'Subsearch:',
showSubSearch: true,
forwardSingle: false,
afterResultsChange: function() { $('.pagination').hide(); },
filterData: function(data) { console.debug(data); }
};
//Now we can add variables (and functions) dynamically at runtime.
initObject.cat = cat;
//And pass them into the framework initialization in a separated way.
SearchSpring.Catalog.init(initObject);
Now for the bug. I don't know the solution because I do not know what it is intended to do, but I can point out what is potentially incorrect.
var cat="MyNewCategory";
cat.value="ANewValue;
This code is: 1 creating a String Object called cat. 2 changing the value to a new string.
I do not think this is what you really want.
To add a new backgroundFilter, in the separated way above, it would be:
initObject.backgroundFilters.cat = ['A', 'B'];
//Line above would give you this type of definition within the initObject (at runtime):
backgroundFilters: {
category: ['Shirt', 'Shoes'],
department: ['Mens'],
cat: ['A','B']
},
For this to work it will depend on what the framework is expecting regarding backgroundFilters.
Hope that helps.
All the best!
Nash
I don't quite understand - do you want to have the backgroundFilters categories as structured objects rather than plain strings? If you are in control of the entire API, you can do something like
...
backgroundFilters: {
category: [
new SearchSpring.Catalog.Category("Shirt"),
new SearchSpring.Catalog.Category("Shoes"),
new SearchSpring.Catalog.Category("MyNewCategory", "ANewValue")
],
department: 'Mens'
}
...
I am newbie to EXT and I am having problem with reloading EXT 4 tree. I have been trying with:
Ext.tree.getLoader().load(tree.root);
Ext.tree.load(tree.root);
Ext.tree.getRootNode().reload();
Ext.tree.TreePanel.root.reload();
Ext.data.TreeStore.reload();
And nothing helped, I hope someone could clarify this to me, here is the code:
Edit: I have added complete code, as you can see everything is inside extOnReady method, I have removed var before var tree and still I got the same result
Ext.QuickTips.init();
var store = Ext.create('Ext.data.TreeStore',{
proxy: {
type: 'ajax',
url: 'url1'
},
root: {
text: 'TOPP',
id: '1',
expanded: true
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
tree = Ext.create('Ext.tree.Panel',{
id:'company_tree',
store: store,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
renderTo: 'tree-div',
height: 300,
width: 766,
title: gettext('Companies'),
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [ {
text: gettext('Collapse All'),
handler: function(){
tree.collapseAll();
}
}]
}]
});
var loadingMask = new Ext.LoadMask(Ext.get('tree-div'),{
msg: gettext("Loading...")
});
tree.on('itemmove', function(tree, oldParent, newParent, index, options){
if(confirm(gettext('Are you sure you want to move this company?'))){
loadingMask.show();
Ext.Ajax.request({
scope: this,
url: 'url2/',
success:function(){
loadingMask.hide();
},
params: {
'ajaxAction[moveNode]': '',
index: index,
nodeid: tree.data.id,
parentNodeID: newParent.data.id,
oldParentNodeID: oldParent.data.id
}
});
}else{
Ext.getCmp('company_tree').getStore.load();
}
});
Also I have tried to reload through console[Ext.getCmp('company_tree').getStore.load();] and it worked. When I try it through code it returns an error regarding fly function
n is null
[Break On This Error]
Ext.fly(n.firstChild ? n.firstChild : n).highlight(me.dropHighlightColor);
Are you really trying to call these methods directly on Ext.tree namespace or Ext.tree.TreePanel class? If so you really need to educate yourself on the difference between objects and classes.
And don't just attempt to guess what a method might be named. Had you looked it up from the manual you would have found out that there is no such method as reload on Tree, TreeStore or TreeView.
What you need to call to reload the tree is the load method of TreeStore:
tree.getStore().load();
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.