I have a form panel and i have added a tabpanel to it. Tab Panel has 2 tabs. When the form panel is loaded the first tab's grid loads fine but when i click on the second tab i do see the grids but data is not loaded by default. But it does refresh with data When i click on the grid header.
Below is the piece of code that i use to load the grids from controllers.
var store = this.getDeficiencyDeficiencyStoreStore();
store.on('load',function() {
var accountDeliverySettingsGrid = Ext.getCmp('accountDeliverySettingsGrid');
accountDeliverySettingsGrid.reconfigure(model.allQuartesListStore);
accountDeliverySettingsGrid.getView().refresh();
})
Any help/suggestions/advice is appreciated.
I finally figured this out. I had to use event: activate to explicitly invoke refresh method to get the grids loaded. Below is the piece of code.
listeners: { activate: function(tab)
{ //alert("Put Your Logic Here");
Ext.getCmp('accountDeliverySettingsGrid').getView().refresh();
Ext.getCmp('compositeRelationship').getView().refresh();
}
Related
I'm using dojo toolkit dijit.layout.TabContainer to switch 3 tabbed pages.
Right now I click on tabs to switch them, but I want to switch them by mouse over instead.
Can a TabContainer be configured to switch by mouse over, or should I write a code to handle mouse over events to explicitly switch tabs?
I'd appreciate any suggestions!
-Sari
Yes. For this functionality, we need to add the onmouseover event to the tabs label fields. Add this code inside the dojo/ready (or addOnLoad) function.
require(["dojo/ready","dojo/query"], function(ready,query){
ready(function(){
var tabs = dijit.byId("TabContainerID");
query("#TabContainerID.dijitTabInner").onmouseover(function(evt){
var tablabelid = dijit.getEnclosingWidget(evt.target).id;
var currentId = dijit.byId("TabContainerID").selectedChildWidget;
var tabwidid = tablabelid.split("_").pop();
if(tabwidid && currentId!=tabwidid) {
tabs.selectChild(tabwidid);
}
});
});
});
I am to create a view with a titlebar and a row of two buttons and a list.
When tapped on,each of the two buttons will make an ajax request to the server and update the list below.That is I will give each button a handler in which the store of the list will be fetched to have its proxy assigned with different params and then to call load() to refresh the list.
So my problem is : how to make the buttons and the list masked when the list is loading and unmasked when it finishes.
At first i wrap the buttons and the list with a container and masks it when the list is loading,but i can not unmask it when the list finish loading.I tried to listen the refresh event of the store,but not work.
Second,i tried to disable one button when the list is loading and enable it when the list finish loading.But i can not figure out how to make a call to enable the button when the mask of the list disappear.
How should i do ?
you will have to add load event of store before you call load() method and in load event's call back function you can unmask..just like below code
store.on({
load: {
fn: function( store ) {
//you can write code for unmask over here
},
scope: me,
single: true
}
});
store.load();
I have a custom menubutton in my tinyMCE editor that uses specific HTML elements elsewhere on the page as the menu items. I use a jQuery selector to get the list of elements and then add one each as a menu item:
c.onRenderMenu.add(function(c,m) {
m.add({ title: 'Pick One:', 'class': 'mceMenuItemTitle' }).setDisabled(1);
$('span[data-menuitem]').each(function() {
var val = $(this).html();
m.add({
title: $(this).attr("data-menuitem"),
onclick: function () { tinyMCE.activeEditor.execCommand('mceInsertContent', false, val) }
});
});
});
My problem is that this only happens once when the button is first clicked and the menu is first rendered. The HTML elements on the current page will change occasionally based on user clicks and some AJAX, so I need this selector code to run each time the menu is rendered to make sure the menu is fully up-to-date. Is that possible?
Failing that, is it possible to dynamically update the control from the end of my AJAX call elsewhere in the page? I'm not sure how to access the menu item and to update it. Something using tinyMCE.activeEditor.controlManager...?
Thanks!
I found a solution to this problem, though I'm not sure it's the best path.
It doesn't look like I can make tinyMCE re-render the menu, so instead I've added some code at the end of my AJAX call: after it has updated the DOM then it manually updates the tinymce drop menu.
The menu object is accessible using:
tinyMCE.activeEditor.controlManager.get('editor_mybutton_menu')
where mybutton is the name of my custom control. My quick-and-dirty solution is to call removeAll() on this menu object (to remove all the current menu items) and then to re-execute my selector code to find the matching elements in the (new) DOM and to add the menu items back based on the new state.
It seems to work just fine, though tweaks & ideas are always welcome!
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'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.