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.
Related
I am trying to create and endless draggable wall on wordpress using this script: http://wall.plasm.it/ .
The problem I am facing, is that I don't know how could I grab wordpress posts, and insert them into the wall grid.
This is the code that initialises the wall:
window.addEvent("domready", function(){
// Define The Wall
var maxLength = 100; // Max Number images
var counterFluid = 1;
var wallFluid = new Wall("wall", {
"draggable":true,
"inertia":true,
"width":150,
"height":150,
"rangex":[-100,100],
"rangey":[-100,100],
callOnUpdate: function(items){
items.each(function(e, i){
var a = new Element("img[src=/your/folder/images/"+counterFluid+".jpg]");
a.inject(e.node).fade("hide").fade("in");
counterFluid++;
// Reset counter
if( counterFluid > maxLength ) counterFluid = 1;
})
}
});
// Init Fluid Wall
wallFluid.initWall();
});
I should find a way to make 'new Element', grab an already existing wordpress post, or add a new one using ajax, although I think this would make it really slow. Any ideas how I could make this work?
I think what you want to do is setup a Wordpress Query to get the posts you want via an ajax query. These would be returned into your items array instead of the images in your example.
If the page is based on a standard Wordpress structure I do not see any benefit from using AJAX here. The easiest way would be to grab the posts and place them inside the wall. So this script, in the case of more than one post, creates html elements of the wall, sets the basic css, takes the posts and places them inside the wall. Is based on this example.
window.addEvent( "domready", function() {
if ( $$( '.post' ).length > 1 ) {
// create base container for the wall
new Element( 'div#wall_container' ).setStyles({
width: 608,
position: 'relative',
margin: '0 auto'
}).inject( $$( '.post' )[0], 'before' );
// create viewport, wall, and navigation
new Element( 'div#viewport' ).setStyles({
width: 608,
height: 450,
position: 'relative',
overflow: 'hidden',
}).inject( 'wall_container' );
new Element( 'div#wall' ).inject( 'viewport' );
new Element( 'div#wall-list' ).inject( 'viewport', 'after' );
// collect all posts ( elements with class="post" ) and dispose them
var posts = $$( '.post' ).dispose();
new Wall( "wall", {
"draggable": true,
"inertia": true,
"autoposition": true,
"preload": true,
"width": 608,
"height": 450,
"rangex": [ 0, posts.length ], // use number of posts for number of items in the wall
"rangey": [ 0, 1 ], // only one line
callOnUpdate: function( items ) {
items.each( function(e, i) {
posts[e.y].inject(e.node); // inject posts into wall
});
}
}) .initWall()
.getListLinksPoints( "wall-list" );
}
});
The Wall script is intended primarily for images, and not for text, because all the elements are absolutely positioned with fixed dimensions (unless the posts are similar in length, which can be also fixed with the use of more tag).
The examle is tested with WP 3.8.1, on the default themes. In order to work you need to enqueue the following scripts:
mootools-core-1.4.5-full-compat.js
mootools-more-1.4.0.1.js
wall.js
I have an object that creates a slideshow:
Banner = SlideShowScroller.create({
height : 300,
auto : true,
navigation : {
color : "#000",
},
slides : [
{ image : "/images/1.jpg" },
{ image : "/images/2.jpg" },
]
});
How do I insert a new "slides" entry?
{ image : "/images/3.jpg" },
Is there a way to add an array to populate the slides?
It looks like the js Object you created has a field "slides" which is an array of js Objects
I would try this:
Banner.slides.push({ image : "/images/3.jpg" });
additionaly, you can use chrome element inspector (or firebug in firefox) with the break point to look at the structure of "Banner". Once you figured how to access the field "slides" I think you can just push your new image Object
I am working with a TabContainer having several different ContentPane children. Each of them is equipped with a href param to fetch external AJAX content shown when a tab is being selected:
dojo.addOnLoad(function() {
var tc_nav = new dijit.layout.TabContainer({
style: 'width: 98%;',
doLayout: false
}, 'tc_nav');
var cp1 = new dijit.layout.ContentPane({
title: 'Test 1',
href: 'ajax?test1',
style: 'padding: 10px;',
selected: true
});
dojo.connect(cp1, 'onShow', function() {
cp1.refresh();
});
/*
* ...
*/
tc_nav.addChild(cp1);
/*
* ...
*/
tc_nav.startup();
});
Now I want to integrate a tab among the others which should be different in its behaviour: Instead of loading content into a ContentPane the tab should follow a simple link in the same window (like a Link), leaving the page containing the js/dojo app. I didn't find any satisfying solution yet, nor a dojo widget matching this requirement. What would be the best approach?
As an unpleasant workaround I created an overridden onShow event firing a window.location.href = '...';:
var cp2 = new dijit.layout.ContentPane({
title: 'Test 2',
style: 'padding: 10px;'
});
dojo.connect(cp2, 'onShow', function() {
window.location.href = 'http://www.google.com/';
});
An annoying disadvantage of this workaround is the fact the ContentPane is loaded first and afterwards the window.location.href is set, which leads to a quite peculiar lazy reload effect and consequently to a bad user experience. I would like to avoid this intermediate step.
ContentPanes are not actually iframes, so setting window.location.href would change the url of your entire page (dojo app) not just the ContentPane. Have you tried something like this:
cp2.set('href', 'http://www.google.com/')
A possible workaround to meet the above mentioned requirements is to override the onClick event of the ContentPane's controlButton:
/*
* ...
*/
var cp2 = new dijit.layout.ContentPane({
title: 'Test 2',
style: 'padding: 10px;'
});
/*
* ...
*/
tc_nav.addChild(cp2);
/*
* ...
*/
tc_nav.startup();
/*
* ...
*/
cp2.controlButton.onClick = function() {
window.location.href = 'http://www.google.com/';
};
Please note not to attach another function to the onClick event (e. g. by dojo.connect(cp2.controlButton, 'onClick', function() { /* ... */ });), but rather to override it, otherwise the ContentPane's content would be called up first.
Please note further the TabContainer's startup() function has to be invoked first to make the controlButton object accessible.
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);
}
I want to write my own layout.. (like vbox, border and so one)... What i want to do is to create layout that will place it's content in the middle (verticall - middle, horisontal - middle)..
Is there some one who could show me how this control will look like in extJs or can provide some links that may be usefull?
I have this example from
http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html
Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
// private
setItemSize : function(item, size){
this.container.addClass('ux-layout-center');
item.addClass('ux-layout-center-item');
if(item && size.height > 0){
if(item.width){
size.width = item.width;
}
item.setSize(size);
}
}
});
Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;
But it gives me more questions than answers.. What is setItemSize How it works? When? Why? ect. What is item.setSize called for? How it works? When? Why? ect.
check the examples of ExtJS 3, there is an Ext.ux.Layout.CenterLayout under custom layouts there already, maybe a good point to start?
http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html
Edit: Try this layout user extension, it centers an item in the horizontal and vertical center of it's container
Ext.ns('Ext.ux.layout');
Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.ContainerLayout, {
monitorResize:true,
type: 'ux.center',
getLayoutTargetSize : function() {
var target = this.container.getLayoutTarget();
if (!target) {
return {};
}
return target.getStyleSize();
},
onLayout : function(ct, target){
Ext.ux.layout.CenterLayout.superclass.onLayout.call(this, ct, target);
if(!ct.collapsed){
this.setItemSize(this.activeItem || ct.items.itemAt(0), this.getLayoutTargetSize());
}
},
setItemSize : function(item, size){
var left = (size.width - item.getWidth()) / 2;
var top = (size.height - item.getHeight()) / 2;
var pos = Ext.apply(item.getEl().getPositioning(), {
position : 'absolute',
left : left,
top : top
});
item.getEl().setPositioning(pos);
}
});
Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;
Ext.layout.ContainerLayout (the base class for layouts) has a doLayout method that triggers your container rendering.
In the case of FitLayout, its overriden and it calls a custom setItemSize function who calls the native setSize for the first container item (or the selected item if any), to fit the container size (maximize i guess).
Check also these custom layouts : http://layoutscroll.demo.revolunet.com/
Ext.create('Ext.container.Viewport', {
layout: {
type: 'hbox',
pack: 'center',
align: 'middle'
},
items: [
{
html: 'Hello World'
}
]
});