extJs (Hbox issue) - javascript

I am developing a portal as in http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html . I have developed the following code that shows a panel with two items.Their height and width is adjusted automatically. But what i want to do is to make them stand in a row.Currently the second item is placed below the first item.I have replaced vbox with hbox but the chart just disappeared. Please help....
Your help is appreciated
Ext.define("Ext.app.ChartPortlet", {extend:"Ext.panel.Panel",alias:"widget.chartportlet",requires: ["Ext.data.JsonStore","Ext.chart.theme.Base","Ext.chart.series.Series","Ext.chart.series.Li ne","Ext.chart.axis.Numeric"],
generateData:function(){var b=[{name:"x",djia:10000,sp500:1100}],a;for(a=1;a<50;a++) {b.push({name:"x"+a,sp500:b[a-1].sp500+ ((Math.floor(Math.random()*2)%2)?-1:1)*Math.floor(Math.random()*7),djia:b[a-1].djia+ ((Math.floor(Math.random()*2)%2)?-1:1)*Math.floor(Math.random()*7)})}return b}
,initComponent:function()
{Ext.apply(this,{layout: {
type: 'vbox',
align: 'stretch'
}
,width:600,height:300,items:
[{xtype:"chart",animate:false,shadow:false,store:Ext.create("Ext.data.JsonStore",
{fields:["name","sp500","djia"],data:this.generateData()}),legend: {position:"bottom"},axes:[{type:"Numeric",position:"left",fields:["djia"],
title:"Dow Jones Average",label:{font:"11px Arial"}}, {type:"Numeric",position:"right",grid:false,fields:["sp500"],title:"S&P 500",label: {font:"11px Arial"}}],
series:[{type:"line",lineWidth:1,showMarkers:false,fill:true,axis: ["left","bottom"],xField:"name",yField:"djia",style:{"stroke-width":1}}, {type:"line",lineWidth:1,showMarkers:false,
axis:["right","bottom"],xField:"name",yField:"sp500",style:{"stroke-width":1}}]}]
});this.callParent(arguments)}});

The code you show uses VBox with align stretch that means the items will be placed underneath each other. Align stretch means their width should take 100 percent of parent container so u should not specify the width.
Your current code as posted: http://jsfiddle.net/dbrin/kcd9g/show/light/
I corrected missing ; and width setting, the rest is yours.

Related

Forbid horizontal scroll in a <div> (jquery.gantt)

how to dissable horizontal scroll in a container? E.g. via JS.
I'm using https://taitems.github.io/jQuery.Gantt/ in the max. zoom-level, so that i don't need to horizontal scroll. nevertheless, some bars are longer and when I hover with my mouse over the of the gantt, the horizontal scroll activates.
How to forbid that?
Many thanks in advance!
You need to block the scroll event with with js because the horizontal-scroll is activate on the whole container, not only the gantt one. So you should search into js files.
Did you try to comment those lines (264, 265, 267 in *jquery.fn.gantt.js) ?
//element.scrollNavigation.panelMargin = parseInt($dataPanel.css("left").replace("px", ""), 10);
//element.scrollNavigation.panelMaxPos = ($dataPanel.width() - $rightPanel.width());
//element.scrollNavigation.canScroll = ($dataPanel.width() > $rightPanel.width());
OR as #Wimanicesir commented try to set element.scrollNavigation.canScroll = false; right below the line I show you above.

How does 'min' 'max' works in Highcharts? I can't get the scrollbar to work

So I have a huge array of data and I'm using Highcharts's Heatmap. However I can't get the scrollbar to work, it let me scroll the whole page instead of letting me scroll inside the container. Picture :
I looked around and found out that it had something to do with min and max properties. But I have no idea how it's suppose to works, I tried messing with it after read the documentation but no luck so far.
Here's my JSFiddle : http://jsfiddle.net/ngendk2o/9/
Any help will be appreciated. Thanks
The command suppose to be:
scrollbar: {
enabled: true
}
Additional you have to set the xAxis.max visible columns on the x axis.
xAxis: {
max: 7 // herewith you define the width
}
Also your chart.width blocks the scrolling as it is defined over the total length, don't use it!
// width: data.length * 3,
See the modified jsfiddle here.

ExtJS Panel always "in front" / always "on top"

Scenario description: I have a border layout with an ExtJS container containing one-to-many windows an a panel (acting as a Taskbar). I want the taskbar to be always on top. If a Window is active and consequently in front, calling toFront does not put it in front as expected.
The ExtJS Windows which remain in front is within the center area of the Border layout, whereas the panel acting as taskbar is within the south area, as follows:
items: [
{
xtype: 'maincontainer', id:'maincontainer',
region : 'center'
},
{
xtype: 'launchpanel', id:'launchpanel',
region: 'south',
collapsible : true,
}
],
where maincontainer and launchpanel extend Ext.container.Container and Ext.panel.Panel respectively. This code is within the main container which is the only item in the ExtJS MVC application's Viewport.
How do I get the launchpanel to be always in front / on top?
From what I've read in the meantime what appears in front is determined by the CSS z-index property.
Then I found this answer about how to set the z-index for a panel. Hence I set the z-index for the Panel each time it is rendered by having the following snippet in the controller:
'launchpanel': {
expand: function(panel) {
panel.getEl().setStyle('z-index','80000');
},
...
Still, if anyone has a better way of doing the above, please share!

Relatively Positioning drop down menu

I'm building a website for a company and having a hard time with positioning. I want the drop-down menus to position either left or right based on where they are on the screen. Here's a screenshot of what happens currently: link
Also, If you want to take a look at the live site, here's a link to the demo.
Any help would be appreciated.
Thanks!
Edit: Not to throw another confusing element in, but this particular site is responsive. When I go down to an Ipad size screen the problem get's worse.
Your container is 960px. The dropdown menu has an auto width so you'll need to estimate the width of each menu (let's say 200px).
Now, you can use document.body.offsetWidth to determine the width of the browser window. This is what I would suggest:
function on_hover() {
...
dropdown_width = 200;
container_width = 960;
if (document.body.offsetWidth < container_width + dropdown_width) {
dropdown_from_left();
} else {
dropdown_from_right();
}
...
}
Hopefully this is enough for you to get started. Enjoy and good luck!

Change sorting direction of Isotope plugin in jQuery

I am using Isotope for a home page menu layout.
This is my current layout: cellsByColumn and the settings for it follows:
cellsByColumn : {
columnWidth : 50,
rowHeight : 50
}
This works well, except for one problem. The sorting is top to bottom. Is there any way to make the sorting left to right?
Best regards,
Tony.

Categories

Resources