I have a list in tab panel and i added onItemDisclosure which supposed to switch to an into page (inside the tab panel).
The setActiveItem does not work, and the error I got is that: [undefined] is not a function.
Code:
Toolbar.views.listPanel = Ext.extend(Ext.List,{
id:'mylist',
store:ListStore,
itemTpl: '<div class="stores"><b>{name}</b><br/><p style="font-size:small">{address}{distance}Km</p></div>',
//grouped:true,
onItemDisclosure: function(){
//Ext.Msg.alert("closure works!");
//Toolbar.views.detailPanel.update();
//alert(Toolbar.views.detailPanel);
Toolbar.views.Searchcard.setActiveItem(Toolbar.views.detailPanel,{type:'slide',direction:'left'});
}
});
The panel to switch to:
Toolbar.views.detailPanel = Ext.extend(Ext.Panel,{
id:'detailpanel',
tpl:'Hello!'
});
Ext.reg('searchcard', Toolbar.views.Searchcard);
Ext.reg('listPanel', Toolbar.views.listPanel);
Ext.reg('detailPanel', Toolbar.views.detailPanel);
Thanks in advance,
The problem is you're referencing the class not the instance of the Searchcard. You have to reference it using a component query.
Generally it follows this way:
masterComponent.getComponent('your_component_itemID');
Or you can use panel.query(selector)
http://docs.sencha.com/touch/1-1/#!/api/Ext.Panel-method-query
Really instead of just hacking it through have a look at this article:
http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap/
Related
I am trying to replace the default Back button to a custom image button in a Titanium iOS project.
I am opening several windows in a tab with the following code:
currentTab.open(childWindow);
How do I "pop" back to the previous (parent) window?
I tried the following:
childWindow.close();
and:
currentTab.close(childWindow);
But both don't work. What am I doing wrong?
They added a method named popToRootWindow in Ti SDK 6.2
Reference : http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Tab-method-popToRootWindow
It's hard to say what is wrong on your side without checking the actual code. However here is the snippet of code which does exactly what you are looking for. It allows to open two windows in one tab. The onclick listener on the second window simple closes this window. It in turn triggers the first window to come up. Maybe it can be helpful to spot a problem in your code.
Here is the contents of index.js:
$.index.open();
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({title: 'Window 1'});
win1.add(Titanium.UI.createLabel({text: 'Window 1'}));
var button1 = Titanium.UI.createButton({bottom: 0, title: 'Next'});
win1.add(button1);
button1.addEventListener('click', function (e) {
var win2 = Titanium.UI.createWindow({title: 'Window 2'});
win2.add(Titanium.UI.createLabel({text: 'Window 2'}));
var button2 = Titanium.UI.createButton({bottom: 0, title: 'Back to Window 1'});
win2.add(button2);
button2.addEventListener('click', function (e) {
win2.close();
});
tab.open(win2);
});
var tab = Titanium.UI.createTab({title: 'Tab 1', window: win1});
tabGroup.addTab(tab);
tabGroup.open();
Note: index.xml file for this example can be very simple: with only one empty element Window class="container"
Andrew's answer helped and I solved the problem with win.close() function call.
The reason it was giving the following error:
Undefined is not a variable.
was because I was trying to access the window variable with a wrong reference.
this.backButton.addEventListener("click", function() {
this.win.close();
});
this.win was the variable for the child window, and stupidly I used the same inside the backButton event listener, where this was recognized as the callback function and it gave me the above error.
Just changing it to the following helped.
_this = this;
this.backButton.addEventListener("click", function() {
_this.win.close();
});
As the title of this post already says: I'm trying to toggle an icon in my tabcontainer.
I got a TabContainer with some ContentPanes in it.
If I get some values from the database I show them in the ContentPane and set the IconClass so the user see that there is some data.
In the my ContentPane I also got a delete and a save button.
If there was some data and the delete button is pressed I'd like to remove or to hide the Icon in the Tab.
Of course I want to do the other way, too.
But how do I do it?
I tried it with registry.byId("myIdOfTheContentPaneWhereTheIconClasswasDefined").className="dijitNoIcon"
without an effect.
Any ideas?
Try setting iconClass instead of className.
Proof-of-concept:
require([
'dijit/layout/TabContainer',
'dijit/layout/ContentPane'
], function(TabContainer, ContentPane){
var container = new TabContainer({ id: 'container' }).placeAt(document.body);
var pane = new ContentPane({
iconClass: 'dijitIconSave',
title: 'Tab'
}).placeAt(container);
container.startup();
setTimeout(function () {
pane.set('iconClass', '');
}, 2000);
});
registry.byId returns you a widget, not a domNode.
This should work:
registry.byId("myIdOfTheContentPaneWhereTheIconClasswasDefined").domNode.className="dijitNoIcon
although it is not elegant at all...
I think it is a common sense that providing a simple way to hide/show and enable/disable a button, but I cannot find any document that describe dojo has done such thing.
Any way, I hope it is my fault that I have missed out something while googling, thanks!
The following coding is what I have tried but they just make the button's text invisible:
dojo.style(btnInsert, {'visibility':'hidden'});
dojo.style(btnInsert, {'display':'none'});
UPDATE Question:
To oborden2:
I have tried your code, the result is same as the above code, here is the captured screen:
To MiBrock:
I have also tried your code and also get the result that same as the above code:
Form widgets in Dijit are special. For all normal Dijit widgets, the domNode (outermost node) of the widget receives the id property. However, with form widgets, the focusNode (which corresponds to the <input> element) receives the ID instead, so that things like <label for="foo"> work properly. In this case, the outermost node has no ID, and you’re actually just hiding the inner HTML input element.
If you already have reference to the widget:
require([ 'dojo/dom-style' ], function (domStyle) {
domStyle.set(widget.domNode, 'display', 'none');
});
If you only have a reference to the ID of the widget/original DOM node:
require([ 'dojo/dom-style', 'dijit/registry' ], function (domStyle, registry) {
domStyle.set(registry.byId(nodeId).domNode, 'display', 'none');
});
Try
require(["dojo/dom-style","dojo/domReady!"], function(domStyle){
domStyle.set(dojo.byId(domNode),'display','none');
});
The variable "domNode" stays for the id of the Node that should be influenced. This is the way we make it.
Regards, Miriam
Try using the Toggler module
require(["dojo/fx/Toggler"], function(Toggler),{
// Create a new Toggler with default options
var toggler = new Toggler({
node: "btnInsert"
});
// Hide the node
toggler.hide();
// Show the node
toggler.show();
});
http://dojotoolkit.org/reference-guide/1.9/dojo/fx/Toggler.html
I imagine you would want to link this to some event using Dojo's on module. Link it up to whatever condition triggers the button's need to be hidden.
In Designer I set my grid name to equal MyGrid
On clicking the button addRecord is called, it fails where rows is attemting to get an undefined grid.
How do I define this MyGrid so that it references the grid within the panel?
Ext.define('MyApp.view.MyPanel', {
extend: 'MyApp.view.ui.MyPanel',
initComponent: function() {
var me = this;
me.callParent(arguments);
var button = me.down('button[text=Submit]');
button.on('click', me.onSubmitBtnClick, me);
},
addRecord: function(myRecordArray) {
var rows = grid.getStore().getRange(); // ERROR happens here
console.log(rows);
},
onSubmitBtnClick: function() {
this.addRecord(["ll", "kk", "mm"]);
}
});
Chrome Javascript Debugger Console ->
Uncaught ReferenceError: grid is not defined
Before you call grid.getStore() you need to define "grid". You can just do var grid = this; right before the call because you are defining the addRecord function from inside of the grid.
EDIT:
I just noticed that this wasn't being called from inside the grid panel with the store but some other panel. What you will have to do to is set an id config on your grid panel. E.g. id: MyGridPanel There may already be an id config set on it and you just have to find out what it is. If you are using the ExtJS designer it may actually already be set to "MyGridPanel". Then you would call it like so:
var grid = Ext.getCmp("MyGridPanel");
then you would do:
grid.getStore().getRange()
try changing button.on('click', me.onSubmitBtnClick, me) to button.on('click', Ext.bind(me.onSubmitBtnClick, me), me)
This looks like a scope issue, in your onSubmitBtn() method, this probably refering to the wrong object (e.g. window, or the button), and not the grid object, which is what you want.
I'm trying to create programatically an EnahncedGrid with a menu. I've got the grid to work, but I've been unable to use the menu. It just not shows up. The code is as follows:
<script>
sMenu = new dijit.Menu({});
sMenu.addChild(new dijit.MenuItem({
label: "Delete Record",
iconClass: "dijitEditorIcon dijitEditorIconCancel",
onClick : function(){
alert(1);
}
}));
sMenu.startup();
/**
* El grid propiamente dicho
*/
var grid = new dojox.grid.EnhancedGrid({
id: "grid_"+i,
query: {
idDocument: '*'
},
plugins: {
nestedSorting: true,
indirectSelection: true,
menus: {rowMenu:sMenu}
},
onRowDblClick: openFile,
structure: layout
})
</script>
Any idea what I'm doing wrong?
I haven't used this myself, but I have two possible suggestions:
First, make sure you're dojo.require-ing "dojox.grid.enhanced.plugins.Menu" and are only instantiating the widgets within a dojo.addOnLoad or dojo.ready.
If you've already done that, the second thing I'd suggest is giving your menu an id, and passing that id to the rowMenu property of the menus object (in other words, pass a string, not the widget itself). Although, the way you're doing it seems like it should work, judging from the code.
You can see a test page with working menus here: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/enhanced/test_enhanced_grid_menus.html