Below is the markup i am using to render an EXT.NET container containing a collapsible panel(west) and another panel containing my content (center).
how do i make it resizable when i resize my browser?
currently its not resizing as i specified width and height and if i do not specify Width and Height, it does not show me anything, it shows blank.
#Html.X().Container().Layout(LayoutType.Border).Width(500).Height(300).Items(
Html.X().Panel()
.ID("Panel1")
.Region(Region.West)
.AutoDoLayout(true)
.Collapsible(true).Border(true).Title("West Panel").Items(
Html.X().Label().Text("Item 1"),
Html.X().Label().Text("Item 2")
),
Html.X().Panel().ID("Panel2").Region(Region.Center).Title("Center")
)
EDIT : I Cannot use ViewPort as its distracting my layout
I am not ure container support this but viewport.
Use instead of the container an viewport
#Html.X().Viewport().Layout(LayoutType.Border).Items(
Html.X().Panel()
.ID("Panel1")
.Region(Region.West)
.AutoDoLayout(true)
.Collapsible(true).Border(true).Title("West Panel").Items(
Html.X().Label().Text("Item 1"),
Html.X().Label().Text("Item 2")
),
Html.X().Panel().ID("Panel2").Region(Region.Center).Title("Center")
)
another solution I can imagine ,to get the resize event and set the width and height of container with the appropriate values
Related
I have an image area in my application with width:530px and height:510px. I want to place images in that area but the images comes in different different sizes. how to crop or scale the image without losing aspect ratio to fill that area. Is there any native methods available in winjs?
You have a few options for that.
One is to use the ViewBox control that WinJS provides you. The ViewBox can only have a single child (so you would have your tag as its only child perhaps or a div that contains your img) and it will scale that child (using CSS transforms) up to fit into its container (without changing the aspect ratio). It's pretty slick.
Another option is to set the image as the CSS background-image property of a container (such as a div) and set the background-size property to contain. This will stretch the image up to the size of the container.
A final option that you have to resort to if your case is a bit special is not such a bad option after all. In the updateLayout method of your page, you can refer to the element and explicitly set its CSS properties to fit. At that point you'll know all about the layout and can easily do the math to figure out what size image should be. Here's some code from one of my projects where I do this. Notice that I'm comparing the aspect ratio of the screen and the image to determine whether I should size to the width or the height. Unlike your situation (I'm guessing), my code makes sure the image fills the screen and excess is clipped. I'm guessing you want your img to be contained.
function setImagePosition() {
var img = q(".viewCamera #viewport img");
if (outerWidth/outerHeight > img.naturalWidth/img.naturalHeight) {
img.style.width = format("{0}px", outerWidth);
img.style.height = "";
img.style.top = format("{0}px", (outerHeight - img.clientHeight) / 2);
img.style.left = "0px";
} else {
img.style.width = "";
img.style.height = format("{0}px", outerHeight);
img.style.top = "0px";
img.style.left = format("{0}px", (outerWidth - img.clientWidth) / 2);
}
}
Hope that helps!
Are you referring to scaling HTML images? If so, you can set either one, width or height. Whichever you set, the other will scale and keep image aspect ratio.
I am trying to scroll a panel using button tap, and the panel is scrolling as I want. But my problem is that,
After scroll end it back again to its initial position, doesn't stick to its new position.
Why this behavior and how can I get leave from this?
Code I used (working just fine)
var container = this.getDealdetails();
container.getScrollable().getScroller().scrollTo(x , y, true);
The scrollable container will scroll back if the scroll to position is greater than the height of the container.
This is best demonstrated with an example. Run this fiddle: http://www.senchafiddle.com/#8Qnt8
Make your browser window smaller in height and note how it behaves. Hope this makes sense.
var panel= Ext.getCmp('iObserveCreateRecords');
panel.getScrollable().getScroller().scrollTo(0, 0, true);
//iObserveCreateRecords is panel id
How can I set button width to wrap content?
Default html button wraps content, but default sencha button use all width of parent.
Next question. If button width wraps content, how to align button?
Thanks
As far as I know, there is no Ext.Button config like textWrap: true in Sencha Touch 2. But you can try a work-around. Normally you can use width and height config to set absolute size of the button, and minWidth, maxWidth or minHeight, maxHeight for the lowerbound and upperbound of width and height, you should combine them with CSS styles of your text.
About alignment: Ext.Button is just like other Ext components, if it belongs to a parent container, then the config centered:true should align it to the center of the parent container.
I am trying to slide a Panel from the bottom, so that it covers the entire viewport, like the Bookmarks panel in iOS Safari. This is similar to the ActionSheet, but fulscreen, and without the dark frame around it.
this.advSearch = Ext.ComponentMgr.create({xtype: 'advanced_search', itemId: 'pnlAdvancedSearch'});
this.advSearch.autoRender = true;
this.advSearch.show({type: 'slide', direction: 'up'});
This sort of works, but the new panel doesn't fill the whole screen, and parts of it appear behind the background panel. I've tried various layouts, including fit, vbox, with varying degrees of ugliness, but the root problem seems to be that the panel doesn't know how tall it needs to be. Maybe because it doesn't have a container?
Any suggestions? Is this even the right approach, or should I try to hack the ActionSheet to expand to fullscreen, and show without the border?
Thanks.
Because your panel is floating (or I presume it is), you will need to give the panel a fixed height in Sencha Touch 1. You are very restricted in that respect. This following code should work:
var sheet = new Ext.Sheet({
html: 'hello',
style: 'color:#fff',
height: window.innerHeight,
stretchX: true
});
// replace this show with your animation
sheet.show();
As you can see, I give it a fixed height of the window and then stretch it on the X axis (y doesn't work).
Is it possible to use a custom color or image for the white dot of the pagingControl in a Titanium.UI.Scrollableview?
var scrollableView =Titanium.UI.createScrollableView({
views:[view1,view2,view3],
showPagingControl:true,
pagingControlHeight:30,
pagingControlColor:'transparent',
width : 200,
height : 90,
left : 120,
top:40,
maxZoomScale:2.0,
currentPage:0
});
Answer (as you said) found on http://developer.appcelerator.com/question/130397/color-pages-dot-in-a-titaniumuiscrollableview#227004 :
sorry, i dont have an example.. but here is it:
create a container view.
then create the small "dot" views, and add them to the container view. set the positions.
there is an event, when the scrollable view "scrolls" or changing.. and you can set the small dot view to active (of course you should set up the active state as well)