How to set the TabPanel Tab Width and Tab Height?
I tried:
var myTabPanel = Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'top',
resizeTabs: true,
tabWidth: 300,
//minTabWidth: 300
....
but it doesn't work
It's all that happening inside sencha css files. You need to modify it there.
good news,
I've found the way to do this programatically.
//assuming you are using the MVC structure as suggested
/*In the controller class of your view with the tab panel you must have reference to the tab panel in refs config.
The reference name for this case will be: myTabpanel
*/
//somewhere in the controller class
var tabPanelItems = this.getMyTabpanel().getItems; //get all the items inside the tab panel (if i'm not mistaken this will also return some "extra" item which is not panel
for (var i = 0; i < panels.length; i++) {
//due to that extra item i mentioned, need to make sure current item is a tab by confirming "tab" property existence
if (panels.items[i].tab) {
panels.items[i].setWidth('100px');
panels.items[i].setHeight('25px');
}
}
And that is it.
Key point is that its a Tab-panel (tab with panel) therefore to configure just the tab part we first need to get the tab part otherwise we'll just configuring the panel part by default.
Related
My application has a WinJS AppBar control at the bottom of the screen. I use .showOnlyCommands(buttonsToShowArray) to show and hide buttons on ListView itemSelectionChanged event.
The problem I have right now is that when every I call .showOnlyCommands, the buttons to be hidden (or you may say "replaced") are going to flash on the top of the screen.
I tried to use the Microsoft sample app, this doesn't happen. I tried to use .showCommands + .hideCommands method, it is the same behavior. Note that this didn't happen before the Release Preview version of Win8.
I have no idea what is going on. Any idea?
EDIT:
I did further investigation, the problem happens on hideCommands. Say I have 3 buttons displayed on the appbar. I call hideCommands to hide all 3 buttons. The icon of the 3 buttons would disappear on the appbar, then pile up at the top-left corner of the screen and then disappear. (i.e. there would be a flash of 3 piled up buttons at the corner of the screen).
You may be invoking showOnlyCommands when the AppBar is in the process of 'showing'. I've found that when calling these methods in the beforeshow or aftershow handler that this happens. This quote from Animating your UI sheds light on why:
Use fade in and fade out animations to show or hide transient UI or controls. One example is in an app bar in which new controls can appear due to user interaction.
The sample app shows/hides the buttons before the appbar is shown. You may be calling show on the app bar before calling showOnlyCommands.
A temporary hack for this problem is:
Set the button be invisible before calling showOnlyCommands or HideCommands.
Here is the code that I use for now:
/*
* #param {WinJS.UI.AppBar} appbar winControl
* #param {Array} array of appbar buttons to be shown
*/
function showOnlyCommands(appbarControl, buttonsToShow) {
var toShow = {};
for (var i = 0; i < buttonsToShow.length; i++) {
toShow[buttonsToShow[i].id] = true;
}
for (var i = 0; i < visibleButtonsList.length; i++) {
var id = visibleButtonsList[i].id;
if (!toShow[id]) {
// set the display property of the buttons to be hidden to "none"
var button = document.getElementById(id);
if (button) {
button.style.display = 'none';
}
}
}
// update the visible buttons list
visibleButtonsList = buttonsToShow;
// Note that we don't need to set the "display" property back for the buttons,
// because WinJS.UI.AppBar.showOnlyCommands would set it back internally
appbarControl.showOnlyCommands(buttonsToShow);
}
I'm creating a seemingly simple dojo 1.8 web page which contains an app layout div containing a tab container and an alarm panel below the tab container. They are separated by a splitter so the user can select how much of the alarms or the tabcontainer they want to see.
Here's the example on jsfiddle:
http://jsfiddle.net/bfW7u/
For the purpose of the demo, there's a timer which grows the table in the alarm panel by an entry every 2 seconds.
The problem(s):
If one doesn't do anything and just lets the table grow, no scroll bar appears in the alarm panel.
If one moves the splitter without having resized the browser window first, the splitter handle ends up in a weird location.
Resizing the browser window makes it behave like I would expect it to begin with.
Questions:
Am I doing something wrong in the way I'm setting things up and that's causing this problem?
How can I catch the splitter has been moved event (name?)
How do I resize the splitter pane to an arbitrary height? I've tried using domStyle.set("alarmPanel", "height", 300) and this indeed sets the height property... but the pane does not resize!
Any help greatly appreciated!
I forked your jsFiddle and made some modifications to it: http://jsfiddle.net/phusick/f7qL6/
Get rid of overflow: hidden in html, body and explicitly set height of alarmPanel:
.claro .demoLayout .edgePanel {
height: 150px;
}
This tricky one. You have two options: to listen to splitter's drag and drop or to listen to ContentPane.resize method invocation. Both via dojo/aspect:
// Drag and Drop
var splitter = registry.byId("appLayout").getSplitter("bottom");
var moveHandle = null;
aspect.after(splitter, "_startDrag", function() {
moveHandle = aspect.after(splitter.domNode, "onmousemove", function() {
var coords = {
x: !splitter.horizontal ? splitter.domNode.style.left : 0,
y: splitter.horizontal ? splitter.domNode.style.top : 0
}
dom.byId("dndOutput").textContent = JSON.stringify(coords);
})
});
aspect.after(splitter, "_stopDrag", function() {
moveHandle && moveHandle.remove();
});
// ContentPane.resize()
aspect.after(registry.byId("alarmPanel"), "resize", function(duno, size) {
dom.byId("resizeOutput").textContent = JSON.stringify(size);
});
Call layout() method after changing the size:
registry.byId("alarmPanel").domNode.style.height = "200px";
registry.byId("appLayout").layout();
Can anyone help me with a link where I find Dojo sliding panel ? I have been searching for it but still didn't got it. I have sliding panel for jQuery, I got it from this link : http://web-kreation.com/all/implement-a-nice-clean-jquery-sliding-panel-in-wordpress-27/
You could make use of the dojo.fx.wipeIn functionality.
http://dojotoolkit.org/reference-guide/1.7/dojo/fx/wipeIn.html
So if you create two divs, one above the other, have the top one with display: none, and the other as the bit that you click to slide the panel down. Then use dojo.connect to link the clicking of the bottom panel to a wipe in of your top panel.
e.g.
// Have your main body content
var mainBody;
// Create top panel
var myPanel = document.createElement("div");
// Set visibility to none
dojo.style(myPanel, "display", "none");
// Create tab to expand your panel (or slide it down)
var expand = document.createElement("div");
expand.innerHTML = "click here to slide down";
mainBody.appendChild(myPanel);
mainBody.appendChild(expand);
var self = this;
dojo.connect(expand, "onclick", this, slidePanel);
Then you'd have your slidePanel function do something like:
// Get reference to your panel
var myPanel;
var wipeArgs = {
node: myPanel
};
// Then just wipe the panel in or out respectively
if (myPanel.style.display == "none") {
dojo.fx.wipeIn(wipeArgs).play();
} else {
dojo.fx.wipeOut(wipeArgs).play();
}
I have an application where the UI components are added to a formField dynamically. As the UI controls to placed on screen is decided run-time depending on server response, sometime the screen gets filled with multiple components. As the screen elements are added, i required to scroll through the screen to select the fields place to the end of the screen. But when i scroll the form bounces, but the scroll is not happening the way expected. Now i am not able to select the UI controls placed to the end of the form.
The screen has 3 components, Title Bar, Button Dock bar, and a form field. Here is the code i have used for form field
var formBase = new Ext.form.FormPanel({
scroll: 'vertical',
xtype: 'form',
ui: 'round',
// i have added the items and it shows on UI, As things are dynamic i cant place it here
items: [{}];
});
Help me to fix the same.
Try this this should work.
Ext.apply(this, {
scroll: 'vertical',
pinHeaders: true,
dockedItems : [{}],
items : []
});
MyApp.views.MyScreenScreen.superclass.initComponent.call(this);
},
It happens because of the form height. Add height property to the object passed to the FormPanel. Something like this:
height: Ext.Viewport.getWindowHeight()-(the height of other compenents like toolbar)
Example for this would be:
height: Ext.Viewport.getWindowHeight()-50
Adding height config with some value might solve the issue.
I want to update the toolbar's content of the main view from a subview (HotelApp.views.hotelDetail)
This is my toolbar from HotelApp.views.mainView
this.topBar = new Ext.Toolbar({
dock:'top',
id:'main_page_topbar',
title:'H10 Sencha Demo',
items:[this.back,
{xtype: 'spacer'}
]
});
The toolbar already have a back button. The problem is i can see the shape of a button, but no text either ID. What i'm doing wrong??
I use this code:
var toolbar = HotelApp.views.mainView.getDockedItems()[1];
var images = new Ext.Button({
text:'Images',
id:'images',
ui:'drastic'
})
toolbar.setTitle(record.get('nombre'));
toolbar.add({items: images});
toolbar.doLayout();
Thanks!!!
I think that your problem is only that you have to add your button calling
toolbar.add(images);
instead of
toolbar.add({items: images});
I even suggest you to don't use 'id' config for your components but 'itemId'.
In this way you can always get your views components by calling
myView.getComponent('myComponentItemId');
or
myView.getDockedComponent('myComponentItemId');
for DockedComponents like toolbars.
Hope this helps.