i extended a panel containing
-Panel
-Toolbar with button
and i registered it as a xtype using Ext.reg().There is one more panel in which i want to add the registered xtype and did it. How can i add/remove a component/html content dynamically to the outer panel on button click.
Thanks in advance.
I hope it will help you :
var component = ...;
var position = 0;
component.insert(position, new Ext.Panel({html : "inserted"}));
component.doComponentLayout();
While an older question, you can use .add or .addDocked
http://docs.sencha.com/touch/1-1/#!/api/Ext.Panel-method-add
This is far simpler since it allows the panel to add the element and manage the height ect.
Related
I have a view that contains 2 parts:
+ Part 1: an ADD button
+ Part 2: a container LIST that has scroll attribute is auto.
When user clicks on button ADD, the system will add a container to container LIST. User can add as much as they want.
But my container LIST has limit height so I want to scroll to new container that added to container LIST when user clicks ADD button.
Anyone help me. Thanks
I tried to use:
var scroller = pan.getScrollable().getScroller();
scroller.scrollToEnd(true);
But it's not working.
Then I tried another way:
var scroller = pan.getScrollable().getScroller();
scroller.scrollTo(x,y,true);// y = 100000000000
It's work :)
var scroller = myListObject.getScrollable().getScroller();
scroller.scrollToEnd();
I need to create links of available views in database on Navigator Control. I did not find any computed formula area for that control. Just like we use code for combobox:
var v = database.getViews();
var a = []
for(var i=0; i<v.size(); i++) {
a[i] = v[i].getName()
}
return a
After achieving that, the select view will display by Dynamic View Panel of ext library.
Please guide me how to do this. Thanks in advance.
-MAK
You can create a navigation entry for each view in you database using the <xe:repeatTreeNode> in the <xe:navigator>:
<xe:navigator id="outline" expandable="true">
<xe:this.treeNodes>
<xe:repeatTreeNode loaded="true" indexVar="index" var="crrView" value="#{javascript:return database.getViews();}">
<xe:this.children>
<xe:basicLeafNode label="#{javascript:crrView.getName();}" loaded="true">
</xe:basicLeafNode>
</xe:this.children>
</xe:repeatTreeNode>
</xe:this.treeNodes>
</xe:navigator>
This code will generate a in you navigation for each view in your Database. You can use the variable crrView in the <xe:basicleafNode> to get current element of the Vector returned by database.getViews() in the loop.
You can also use other elements then the <xe:basicLeafNode> in the <xe:repeatTreeNode>.Select the RepeatNode in the NavigationItems window of the navigatior control and click on add Child.
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 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.
I'm new with Appcelerator and I encountered an annoying problem regarding layout.
I have to do a menu bar that is very easy to do with plain html (ul>li>a and that's all). The problem is that it seems that all button-related functions are not... customizable. I want buttons to be displayed as plain text, not buttons.
The first thought was to use labels (instead of buttons). But... Is this a right way? I need a menu bar, not a text paragraph! Besides that, the menu is somehow flexible, not like labels.
This is one (of many!) things i tried:
var menu_color = Titanium.UI.createButton({
title:Ti.Locale.getString("menu_color") || "Color",
height:24,
top:10
});
I also added borderWidth:0 (no effect) and backgroundColor:none/transparent with no luck.
Help? :)
I usually use views when I need to create what you described above.
For example:
I use a view with a vertical layout, then add my child views. The child views then have listeners for the click or whatever event.
This allows you to have more control over the formatting. A side effect of this is you will need to create your own "press" ui cue in some cases.
var demo = {win : Ti.UI.currentWindow};
(function(){
//Create the container view
demo.vwMain = Ti.UI.createView({height:100, layout:'vertical', backgroundColor:'yellow'});
demo.win.add(demo.vwMain);
demo.fakebutton1 = Ti.UI.createView({height:40, backgroundColor:'blue',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton1);
demo.fakebutton2 = Ti.UI.createView({top:5,height:40, backgroundColor:'green',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton2);
demo.fakebutton1.addEventListener('click', function(e) {
alert('Clicked fake button 1');
});
demo.fakebutton2.addEventListener('click', function(e) {
alert('Clicked fake button 2');
});
})();
create a view with layout property is set to vertical and add label or button which you want.View is like in HTML.Hope you understand.