I need to create a window that will be always visible unless it is made hidden by clicking on an icon. Clicking on that icon a second time will make the window re-appear. The icon needs to be stuck at the top left corner of the window and outside of the window. I am planning to create a window without title and with two items 1: Button to hide/show and 2: the actual panel. The fiddle can be found at: https://fiddle.sencha.com/#fiddle/bi7 I need to make the portion behind the button transparent. Is there a way to do that?
You would do this manually, ideally with CSS classes. The following is crude, using inline styling, but works. Add the following listeners attribute to your button
{
xtype: 'button',
...
listeners: {
click: function(){
var panel = Ext.getCmp("togglePanel");
if (panel.el.dom.style.display == "none") {
panel.el.dom.style.display = "block";
} else {
panel.el.dom.style.display = "none";
}
}
}
}
and include the id 'togglePanel to your green panel containing the slider
id: "togglePanel",
Clicking the button will show/hide your panel
Related
with the tutorials on qooxdoo.org I found out how to theme my widgets. This works great for overall styling.
If I configure "label", all my labels become a yellow textcolor. If I configure "button/label", all labels on my buttons become a red textcolor while every other remains yellow. Good so far.
What's not working is if I try to set a textcolor for labels inside a window:
"window/label", "window/pane/label", "window/widget/label" With none of these keys I can change the style for label-widget inside my window.
What is the correct key to give labels as child-elements inside my window a different style?
Thanks a lot
Ricky
A qx.ui.window.Window is a container wich implements RemoteChildrenHandling. That means, that the chain of child controls stops when it comes to the window content.
Depending on what you want to achieve, you can:
add a Label to a Window and set the Label appearance directly
inherit from Window (i.e. a custom Dialog class of your own), add a content label as a childControl of your dialog and adjust the Label color in your theme by using the choosen child control path
The first option would lead to this code:
var win = new qx.ui.window.Window("My Title");
win.setLayout(new qx.ui.layout.VBox(10));
win.add(new qx.ui.basic.Label("My content").set({
appearance: 'custom-label-appearance'
}));
If you've just some appearances for Label objects and you don't want to add the appearance every time, you also could subclass it:
qx.Class.define("my.Label", {
extend: qx.ui.basic.Label,
properties: {
appearance: {
refine: true,
init: 'custom-label-appearance'
}
}
});
var win = new qx.ui.window.Window("My Title");
win.setLayout(new qx.ui.layout.VBox(10));
win.add(new my.Label("My content"));
Here is an example for the second option:
qx.Class.define("my.Dialog", {
extend: qx.ui.window.Window,
construct: function(title, label) {
this.base(arguments, title);
this.setLayout(new qx.ui.layout.Atom());
this.getChildControl('my-label').setValue(label);
},
members: {
//overridden
_createChildControlImpl : function(id)
{
var control;
switch (id)
{
case "my-label":
control = new qx.ui.basic.Label();
this.add(control);
break;
}
return control || this.base(arguments, id);
}
}
});
You can then set the appearance path window/my-label in this case.
Note that both solutions will not keep you away from setting appearances to all labels that you add to the window.
I'm using ExtJs. I want my scroll still in the bottom (last row) when i click 'add' button on my grid. I do some code like this:
xtype: 'button',
text: 'Add',
iconCls: "icon-grid-add",
id: 'ReqAddBtn',
handler: ReqWinAdd,
listeners: {
'click': function () {
var records = Ext.getCmp('prGrid').getStore().data.length + 1;
Ext.getCmp('prGrid').getView().focusRow(records);
}
}
i created event click like that. It works when the first click. But when the next click, the scroll is moving up.
What should i do to make scroll always still in the bottom of grid?
The preferred way is to get the grid view and scroll it:
grid.getView().scrollBy(0, 999999);
or
grid.getView().scrollBy(0, 999999, true);
if you want to animate the scroll
Finally i've got the answer.
I change my event to:
var scrollPosition = 100;
YourGrid.getEl().down('.x-grid-view').scroll('bottom', scrollPosition, true);
it makes the scroll still in the bottom of the grid. Thanks people.
I have a panel and a grid on this panel. Both of them have a button with itemId=remove
Also have two controllers with controls like:
'panel_alias #remove' : {
click : someAction ...
'inner_grid_alias #remove' : {
click : anotherAction ...
But, when i click on grid "remove" button, "someAction" are called.
Set a different itemId for buttons is not a solution, because controls builds dynamically.
I have context menu on a panel (geoext 2 map panel)
This is how I init it :
var ctxMenu;
Ext.get("mapPanel-body").on("contextmenu", function (event, element) {
event.stopEvent();
if (!ctxMenu) {
ctxMenu = Ext.create('Ext.menu.Menu', {
width:100,
height:100,
margin: '0 0 10 0',
items: [{ text: 'test', action: 'test'}]
});
}
ctxMenu.showAt(event.getXY());
return false;
});
What happens is that right click on the map opens the context menu ... but it stays open till I choose an item from the menu (left click outside it doesnt close it)
I'm using ExtJS 4.2.1
Why it behaves like this ?
May be the reason is , panel doesnot contain a default contextMenu event.
But you are defining a contextMenu by using the on on the panel.
For this issue you can define a click event for the panel by using the same on config and check whether the object contextMenu is present or not.
If it is present , then hide the contextMenu by using contextMenuObject.hide().
I have designed Fieldset and checkboxtoggled set to true,My requirement is click on check box(uncheck) of fieldset, Hide some controls in fieldset, again check on checkbox show all controls (need not to collapse fieldset when click on checkbox).
What is the right way to handle this?
(I am using collapse/expand listeners for fieldset, but unable to achieve it)
You can use the beforecollapse & beforeexpand event to override the default behavior. Here is what you can do:
listeners: {
'beforecollapse' : function(panel,ani) {
// Hide all the form fields you need to hide
return false; // this will avoid collapse of the field set
},
'beforeexpand' : function(panel,ani) {
// Display all the fields
return false; // this will avoid the default expand behaviour
}
}