EXTJs Add items to panel from dynamic array - javascript

I have an accordion layout which has 3 panel sections within it.
I want to use one of the sections to displays the months for the past 90 days. This can be between 3-5 months. I have a function that calculates these months and stores them in an array similar to:
months["May", "June, "July", "August"]
Based on the values in this array, I want these to display as links in the accordion panel. I have no idea how to dynamically add these as items to the accordion section. The links will be used to load grids into the Container of the overall border layout.
This is my accordion setup:
title : 'Navigation',
region : 'west',
collapsible : false,
margins: '100 0 0 0',
cmargins: '5 5 0 0',
width: 175,
minSize: 100,
maxSize: 150,
layout: {
type: 'accordion',
animate: true
},
items:[{
id:'main'
,title:'Summary'
,collapsed:false
,frame:true
//captures the expand function to call the getgrids functionality
//don't want it to expand as it only displays 1 thing
,expand : function(){
getGrids();
}
},
{
id:'month'
,title:'Month View'
,collapsed:false
,frame:true
,items:[{
}]
},{
id:'search'
,title:'Search'
,html: 'Search'
,collapsed:true
,frame:true
}]
},

Are you sure you want add links as an items? There is no built-in link widget (at least I haven't heard of any). But add method and items config ARE for widgets. So if you would like to define your own link-widget you would be able to add it using such code:
var monthsWidget = Ext.getCmp('month');
for (var i = 0; i < months.length; i++)
monthsWidget.add(new YourLinkWidget(/*config*/));
But creating new widget? ... for link? ... doesn't make sense to me. Why just not appending DOM elements to Ext.getCmp('month').body:
var monthsWidget = Ext.getCmp('month');
for (var i = 0; i < months.length; i++) {
var link = Ext.createDom({
tag: 'a',
href: 'http://example.com'
});
Ext.fly(link).on('click', function(e) {
// click handling here
return false;
});
monthsWidget.body.appendChild(link);
}

Related

How to implement a vertical scrollbar?

Does anyone know how to implement a vertical scrollbar for a vis.js timeline? I have read the visjs.org documentation, other threads here on stack overflow and on GitHub, but I still can't implement the scrollbar.
Should it be enough to write verticalScroll: true in the configuration for a vis.js timeline? This is what I have as configuration at the moment. Do I need to write it in some other way? Or do I need to implement the vertical scroll in a totally different way?
// Configuration for the Timeline
var options = {
width: '100%',
height: '100%',
minHeight: '300px',
padding: '0px',
orientation: 'top',
max: futureDate,
min: pastDate,
groupOrder: 'start',
zoomMin: '86400000',
margin: {item: {horizontal: 0, vertical: 5}, axis: 5},
verticalScroll: true,
zoomKey: 'ctrlKey'
};
A priori the options taken are good, It would be enough to reduce the height of the timeline directly in the options rather than to use "minHeight" in this case. Normally, this should bring up the scroll bar.
To check this, reduce the timeline height to 150 px in the options (e.g)
You can also generate a large number of groups so that they exceed the vertical left pannel capacity of timeline so that the vertical scrollbar displays.
UPDATED with minimal example adapted from "vis.js examples"
See also the timeline documentation on website for configuring options...
<html>
<head>
<title>Timeline | Vertical Scroll Option</title>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" />
</head>
<body>
<h1>Timeline vertical scroll option</h1>
<h2>With <code>
verticalScroll: true,
zoomKey: 'ctrlKey'</code>
</h2>
<div id="mytimeline1"></div>
<script>
// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet()
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: 'Truck ' + i
})
}
// create items
var numberOfItems = 1000;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date);
var orderIndex = order + itemsPerGroup * truck
items.add({
id: orderIndex,
group: truck,
start: start,
end: end,
content: 'Order ' + orderIndex
});
}
}
// specify options
var options = {
stack: true,
verticalScroll: true,
zoomKey: 'ctrlKey',
height: 200, // you can use also "300px"
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
};
// create a Timeline
var container1 = document.getElementById('mytimeline1');
timeline1 = new vis.Timeline(container1, items, groups, options);
</script>
</body>
</html>
It sounds like you can get a scrollbar using overflow-y: scroll. Also, height: 100% will most likely never cause this to kick in (unless this element is contained within another element that has a set height) as the element that you are editing will keep growing in height rather than staying a certain height and have a scrollbar. So I would recommend removing height: 100% and using max-height instead (if your element isn't contained within another element), so if the element content grows to something larger than your max-height, it will begin to scroll. If you're looking to style that scrollbar, that's a whole different story.
https://www.w3schools.com/cssref/css3_pr_overflow-y.asp

How Can I create a custom binding for a SpreadJs datagrid to align a defined column?

When I am creating a new column for my SPreadJs grid, I don't see any property to align my columns. For example:
var nameColInfo = { name: "Name", displayName: "Name", size: "150", resizable: true };
I would like to add a new custom binding to my grid called align. Something like this
var nameColInfo = { name: "Name", displayName: "Name", size: "150", resizable: true, **align: right** };
I don't know if this is already done by someone else. If not I will appreciate your help. I don't want to loop over my datagrid, row by row to align every cell that I need.
Column alignment is done through CSS.
[data-column="Name"] {
text-align: right;
}
another option is to use the cssClass property, we already have a classname called align-right. cssClass: "align-right" or you can use your reference your own CSS class that sets the alignment such as: cssClass: "myStyle";
Hope this helps.
This is how I fixed my problem
// setting horizontal alignment of Col B to left
sheet.getRange(-1, 1, -1, 1, GC.Spread.Sheets.SheetArea.viewport).hAlign(GC.Spread.Sheets.HorizontalAlign.left);
// setting vertical alignment of Col B to top
sheet.getRange(-1, 1, -1, 1, GC.Spread.Sheets.SheetArea.viewport).vAlign(GC.Spread.Sheets.VerticalAlign.top);

How to change options based on number of items in the carousel using Owl Carousel 2?

I'm using Owl Carousel 2 on a project with dynamic content with an unlimited amount of slides that can be added.
So there could be an instance where there is only three slides or an instance where there is six.
My desired functionality is that if there is less than four slides (the carousel shows four items at a time), then add the mouseDrag: false and touchDrag: false options.
Here is my JS:
$('.owl-carousel').owlCarousel({
loop:false,
margin:20,
responsive : {
// breakpoint from 0 up
0: {
items: 1,
mouseDrag:true,
touchDrag:true
},
// breakpoint from 480 up
500: {
items: 2,
mouseDrag:true,
touchDrag:true
},
// breakpoint from 768 up
740: {
items: 3,
mouseDrag:true,
touchDrag:true
},
// breakpoint from 1024 up
980: {
items: 4,
mouseDrag:false,
touchDrag:false
}
}
})
So, currently when the viewport is over 1024px wide, it will remove the dragging functionality regardless of how many items there are. Which means you can't see any more than 4 (if there are any).
Thanks,
Jay
Please see this answer you can alter to fit what you need.
http://stackoverflow.com/a/33252395/3794783
here is my code for V2 with that in use:
Notice I use the variable value based on the item_count and if 1 only of .item exists, then apply the "false" to: loop:true_false, nav:true_false ..
$(function () {
var owl_instance = $('.sectionlist .owlcarousel');
var item_count = parseInt(owl_instance.find('.item').length);
var true_false = 0;
if (item_count <=1) {true_false = false;} else {true_false = true;}
//
// control nav visiblity thumbs shown vs thumbs allowed visible
// see: http://stackoverflow.com/a/33252395/3794783
//
owl_instance.on('initialized.owl.carousel resized.owl.carousel', function(e) {
$(e.target).toggleClass('owl-nonav', e.item.count <= e.page.size);
});
owl_instance.owlCarousel({
themeClass: 'owltheme-smallnav',
items:3,
responsive:{
0:{items:1,nav:true},
605:{items:3},
670:{items:3},
1250:{items:3},
1520:{items:3}
},
//margin:0,
navRewind:false, // Go to first/last.
// *****************
loop:true_false,
nav:true_false,
// backport the classes to older used ones
navContainerClass: 'owl-buttons',
dotsClass: 'owl-pagination',
dotClass: 'owl-page',
navText: [
'',
''
],
autoplayHoverPause:true, //false
lazyLoad: true,
dots:true // false
});
});

Hide scrollbar in SAPUI5 page

I have a problem.
I have a list of tweets to show in a page. For mobile devices I don't want to show the right vertical scrollbar.
I've build the page, with its slider and its tweets list. Then I put this page in a scroll container.
Then I return the scroll container.
The code is this:
sap.ui.jsview("ttest.initView", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* #memberOf ttest.initView
*/
getControllerName : function() {
return "ttest.initView";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* #memberOf ttest.initView
*/
createContent : function(oController) {
var oTweetList = new sap.m.List("items", {
threshold: 2,
inset : false,
showUnread : true,
scrollToLoad : true,
columns : [
new sap.m.Column({
styleClass : "data",
hAlign : "Left",
})
]
});
var oSlider = new sap.m.Slider({
id: "tweetSlider",
width: '100%',
min: 0,
change : function(oEvent){
//Update tweet list
var startIndex = 0;
var endIndex = this.getValue();
oController.updateTweetList("update", startIndex, endIndex);
}
});
var oPage = new sap.m.Page({
title: "Tweet list for #matteorenzi",
enableScrolling : false,
headerContent: [
new sap.m.Button({
icon: "sap-icon://refresh",
press : function(oEvent){
//Update tweet list with all tweets
oController.updateTweetList("first", "", "");
}
})
],
content: [
oSlider,
oTweetList
]
});
var oScroller = new sap.m.ScrollContainer({
vertical : true,
horizontal : false,
content : [
oPage
]
});
oEventBus.subscribe("it.besolution.PopulateList", "Go", function(chId, evId, data){
var template = new sap.m.ColumnListItem({
type : "Navigation",
cells : [
new it.besolution.Tweet({
user : "{user/name}",
username : "{user/screen_name}",
tweet : "{text}",
press : function(oEvent){
var path = this.getBindingContext().getPath();
sap.ui.getCore().byId("iduserDetails").setModel(oGlobalModel).bindElement(path);
app.to("iduserDetails");
}
})
]
});
oSlider.setMax(oGlobalModel.getProperty("/size") - 1);
oTweetList.setModel(oGlobalModel);
oTweetList.bindAggregation("items", "/tweets/", template);
});
return oScroller;
}
});
The page didn't load. I don't know how to do. Why the list is invisible?
Obviously, if I remove the scroll container and I return the oPage element, the list is visible.
Why? How I have to write my code to show the list without the scrollbar?
If you don't want to show the right vertical scrollbar. There is a property called enableScrolling.And you really want to use ScrollContainer, put it as Page content, not the other way around.
enableScrolling default: true
Whether the Page takes special measures to make page content scrollable and keep headers fixed. If set to false, there will be no scrolling at all; for performance reasons this is highly recommended when scrolling is not needed. The Page only allows vertical scrolling because horizontal scrolling is discouraged in general for full-page content. If it still needs to be achieved, disable the Page scrolling and use a ScrollContainer as full-page content of the Page. This allows you to freely configure scrolling. It can also be used to create horizontally-scrolling sub-areas of (vertically-scrolling) Pages.

How to add a jquery ui slider to each cell of slickgrid?

I need to add a jquery ui slider to each cell of slickgrid. Number of records is over 10,000 with over 150 columns. The problem is that the initial set of sliders are rendered fine but as I scroll (left or right), they disappear. Somehow, the grid is not getting invalidated for those cells. I am using the following formatter on the column:
SliderFormatter = function (row, cell, value, colDef, dataContext) {
var html = "<div class='mySlider' id='slider_" + dataContext['id'] + "'></div>" + value;
return html;
}
and invoking the slider from my document.ready callback.
Any help will be appreciated. Thanks in advance !
SlickGrid renders only what's visible in the viewport, plus a small buffer. As you scroll, rows/cells are dynamically added and removed.
What this means for your case, is that when you initialize the slider widget in your document.ready callback, you're only initializing a tiny portion of them, and the ones that did get initialized, don't get re-initialized when the cells they are in are removed and recreated by SlickGrid.
SlickGrid doesn't allow you to use jQuery widgets like the slider in cells and requires that formatters output pure HTML in order to make it hard to implement the grid in a way that will slow it down. (I won't get into my reasoning behind that admittedly controversial decision.)
My advice here is to avoid using the jQuery UI slider here. It is simply not scalable or performant enough. Without virtualization, what you're trying to do is impossible - initializing 100 sliders is going to be really slow; initializing 10'000 x 150 of them is out of the question. With virtualization, you'll need to initialize and destroy them on the fly as you're scrolling around, and that's just too slow to scroll smoothly.
Consider using an HTML5 range input - <INPUT type="range">. It's supported by all major browsers with the exception of IE <10. See http://caniuse.com/#feat=input-range.
I've created an example using SlickGrid's async post-render option. #Tin is probably right that it would be better to use the native <input type="range"> but just in case you need to support older browsers here's how you can do it.
function waitingFormatter(value) {
return '<div class="slider"></div>';
}
function renderSlider(cellNode, row, dataContext, colDef) {
var cell = $(cellNode);
cell.find('.slider').slider({
value: dataContext.value,
slide: function(e, ui) {
data[row].value = ui.value;
cell.prev().html(ui.value);
}
});
}
var grid;
var data = [];
var columns = [
{ id: "title", name: "Title", field: "title", sortable: false, width: 120, cssClass: "cell-title" },
{ id: "value", name: "Value", field: "value", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator },
{ id: "chart", name: "Slider", sortable: false, width: 425, formatter: waitingFormatter, rerenderOnResize: true, asyncPostRender: renderSlider }
];
var options = {
editable: true,
enableAddRow: false,
enableCellNavigation: true,
asyncEditorLoading: false,
enableAsyncPostRender: true
};
$(function () {
for (var i = 0; i < 500; i++) {
var d = (data[i] = {});
d["title"] = "Record " + i;
d["value"] = Math.round(Math.random() * 100);
}
grid = new Slick.Grid("#myGrid", data, columns, options);
})

Categories