I have a little problem with Dijit.Dialog.
I have some dialogs, which have a small size, and they are displayed in the center of my screen, so it's ok.
But I have also a Dialog with a height of 550px, and it's not displayed in the center of my screen but in the bottom : the browser scroll to the bottom and then displayed it.
I create the dialog simply by:
var dialogLodge = new dijit.Dialog({
id : "dialogLodge",
style : "width:700px;height:550px",
title : "Create lodge",
href : "/lodge/create.html",
preload : true,
draggable : false,
onCancel : function(){
…
},
onLoad : function(){
…
},
});
dialogLodge.startup();
So I don't know why it's not displayed at the center.
If anyone has an idea,
Thanks.
PS : I use Dojo 1.6.1 and I tested it with the 1.7 too
Creating a dialog puts a dom node in your page with css styles that hide it (display:none; visibility:hidden).
In order to make your dialog visible, you should use dialog.show().
You can use dialog.hide() to make it invisible again (and it will remain available in case you want to show it back).
Related
I have an dojo enhanced grid inside a title pane which inturn in Tabcontainer. I am creating a tab container dynamically and painting the title pane which contains grid. For the first time the grid is painted properly but if i close the tab and again try it to open a tabcontainer title pane is painted but grid inside the titlepane is not painted (or rather its not visible) until i do a browser resize.
So anybody have faced similar kind of issue? Please let me know the solution for this.
I tried resize(), update() & startup() methods on grid nothing worked out.
I am kind of stuck please share your thoughts on this.
Thanks,
Vikram
I had the same problem and found a workaround by doing a dojo connect like:
dojo.connect(Datagrid,"_onFetchComplete",DataGrid,"_resize");
So it should automatically be resized, when DataGrid finished loading data.
Hope I could help.
Greeting, Simon
Have you tried setting an absolute height on the Grid?
Which browsers did you try? (I experienced various problems with DataGrid in TabCointainer using IE)
You must call the TabContainer.layout() each time its container is changing size. For doing this, you could 1) monitor DOMEvents onunderflow and onoverflow on containing DOMNode or 2) when container becomes visible (once-n-forall).
Reason why a window.onresize event fixes it is, that the TabContainer hooks on said event and calls its own layout.
In your situation, where the TabController fiddles with TabContainer's panes, there may be missing a 'layoutChildren' somewhere. Optimally, you should place the grid as the first on only child to tab.
After the grid is deployed, it will take an absolute, calculated height - 'inherited' from the TabContainer. This is fired once the TabContainer chooses to resize or instructed to do so.
Manually, you should be able to implement these lines - after re-opening a tab. The script is taken from _Grid.js to illustrate
var grid = dijit.byId('MYGRIDID');
require(["dijit/layout/utils"], function(layerUtils) {
layoutUtils.layoutChildren(grid.domNode,
grid._contentBox,
[grid.tablist, {
domNode: grid.tablistSpacer,
layoutAlign: titleAlign
}, {
domNode: grid.containerNode,
layoutAlign: "client"
}]);
grid._containerContentBox = layoutUtils.marginBox2contentBox(grid.containerNode,
{
domNode: grid.containerNode,
layoutAlign: "client"
});
// note this line in particular
grid.selectedChildWidget.resize(grid._containerContentBox);
}
My issue
I had a similar situation as yours:
Grid is in a titlepane (closed by default).
Grid can be destroyed and re-created on the fly.
Issue appears when user:
opens the pane.
closes the pane.
re-creates the grid.
re-opens the pane.
grid is not visible, until browser window is resized!
My solution
My approach was to force a resize() on my grid whenever the title pane was being opened.
I used code like this, in a place where I had access to both the grid and the panes:
var titlePane = registry.byId("title-pane-id");
var handle = aspect.after(titlePane, "toggle", function(deferred) {
if (titlePane.open) {
grid.resize();
}
});
The dojo/aspect doc
Don't forget to remove the aspect from your grid if you destroy it.
I did this on dojo v1.8.1
My solution is too easy: define on declaration of grid the bold parameter write here:
grid = new EnhancedGrid({id: 'MyIDgrid',
store: dataStore = new ObjectStore({objectStore: myStore}),
structure: structureGrid,
plugins: pluginGrid,
style : 'width: 725px; height: 350px',
autoWidth : true,
**autoHeight : false,height:'200px',**
elasticView : '2'
}, document.createElement('div'));
this resolve all!
Enjoy!
style="height: auto;" will fit the purpose.
I have a Ext.panel.Panel within a Tab Panel. Tab Panel is again within a window. I have set the following configs for Ext.panel.Panel
border : false,
collapsible : true,
collapseDirection : 'left',
width : 300,
layout : {
type : 'vbox',
align : 'stretch'
},
On clicking the Toggle button in the Ext.panel.Panel, it collapses, but the toggle button disappears which doesn't allow me to expand the collapsed panel again. On resizing the window, the toggle button appears back.
Help is really appreciated.
Try the solution given in this thread, http://www.sencha.com/forum/showthread.php?175371-Panel-Disappears-When-Collapsed.
The main problem is that you have no layout declared for the panel which acts as your center region.
This also seems to be suggested by this thread http://www.sencha.com/forum/showthread.php?149446-Rendering-panel-collapsed-makes-it-disappear.
I would like to use an actionsheet but am unclear where to place it. I have tried adding it to a button event function but it doesn't show (the modal screen does however). I get a message about ActionSheet#show showing a component that currently doesn't have any container. Please use Ext.Viewport.add() to add this component to the viewport. Not sure how to do that - using Ext.Viewport.add() doesn't work for me - i may be because of my layout which is:
I have a viewport controller/view which is a card layout. When I click a button I have a function in the viewport controller that loads a new controller/view card in the viewport. The actionsheet is in one of these cards. The app is to big to post so hopefully it makes sense.
I have tried adding the actionsheet in my view items array but do not know how to make it show - making a reference to the xtype actionsheet doesn't return an object with a show() method it seems.
Edit: after more experiments it seems the issue is that I am placing it inside of a card - the card layout container has a relative position and the actionsheet absolute - somehow this is causing the actionsheet to go off screen. Setting card container to absolute fixes it but now I have problems with navbar positions. Suggestions?
So a bit stuck...
This is what you need to do to show your action sheet :
var actionSheet = Ext.create('Ext.ActionSheet', {
items: [
{
text: 'Delete draft',
ui : 'decline'
},
{
text: 'Save draft'
},
{
text: 'Cancel',
ui : 'confirm'
}
]
});
Ext.Viewport.add(actionSheet);
actionSheet.show();
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.
When I create a new window in Appcelerator I need to change the background image. This is done by setting “barImage”. The window itself is a child of a navigation group and has its own children. When I use the “barImage” parameter it hides the nav bar title text on the initial load of the window. If I navigate to its child window and then back the title text is displayed in the nav bar.
var sectionWindow = Titanium.UI.createWindow({
backgroundColor:'#fff',
fullscreen:false,
title:’My Sub Page',
modal:true,
barImage:'images/nav_bar.png'
});
How can I get the title text to consistently display?
I believe there are known issues with the barImage in the 1.7.2 release, please check the 1.8x CI builds where the issue has been addressed