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.
Related
I want to process mouse up/down events in the empty area(marked in color) which belongs to container.
As shown in the picture, container has menu bar to the left and window standard buttons to the right. Expected behavior is : click on menu items/buttons must trigger their event handlers and click on empty area(marked in color) must be processed by container to support window drag.
I tried this in container:
listeners: {
mousedown: {
fn: function() {
_mousepressed = true;
},
element: 'el'
},
mouseup: {
fn: function() {
_mousepressed = false;
},
element: 'el'
},
When clicked on menu item button, the event is first coming to container's mouseup handler and then button handler is called. Instead , I expect not to receive event in container when child items are clicked. I need clicks on empty areas in container.
Is there any extjs way to identify events on parent container and not on its chid items?
I have column holding the checkbox on a MVC kendo grid. When I click on the column but not on the checkbox, the checkbox position is slipping (moving towards right) and the click event is not delegating to checkbox.
I tried Change event and DataBound to suppress the click even on column but couldn't do it.
Any suggestions to disable the click event on this Kendo Grid checkbox-column or to delegate the column's click event to checkbox!
Below is the code snippet that I have used to build the checkbox column,
columns.Bound(p => p.IsSelected).Title("Select").Width(11).ClientTemplate("<input type='checkbox' #= (IsSelected) ? checked='checked' : '' # id=chk#=(Id)# class='exclchkbx' />").HtmlAttributes(new { style = "text-align: center;" }).Width(10).HeaderHtmlAttributes(new { style = "text-align:center;" });
Output of my grid column
Dislocated checkbox after clicking the checkbox column (but not on checkbox)
Appreciated in advance!
The reason why the checkbox position is slipping is that there is default padding applied. Instead of using the HeaderHtmlAttributes method, you can wrap up the template in a div with text-center as follows:
columns.Bound(p => p.IsSelected).Title("Select").Width(11).ClientTemplate("<div class=\"text-center\"><input type='checkbox' #= (IsSelected) ? checked='checked' : '' # id=chk#=(Id)# class='exclchkbx' /></div>");
I am building an ExtJS4 Web Application and I have a "page" where I have a Grid whose records come from a database. After loading the store of the grid, I want the first item to be selected.
This is what I've tried so far:
store.load({
callback: function() {
if(store.count() > 0){
grid.getSelectionModel().select(0);
//grid.getView().select(0);
}
}
});
The store loads the database records properly as they're shown in my grid. The first row is also highlighted as if it was clicked. However, my listener/controller for the itemclick event isn't firing as opposed to when I manually click the row.
I've also tried grid.getView().select(0); as well as grid.getSelectionModel().selectFirstRow(); but apparently, both those aren't functions.
My grid row appears to be selected by the itemclick function isn't being called at all.
You should use 'selectionchange' listener in 'Ext.selection.Model' instead of 'itemclick' in grid class. This listener will be fired in both cases when rows are clicked in grid and rows are selected programmatically.
Probably the code will be like this:
Ext.create('Ext.grid.Panel', {
selModel: Ext.create('Ext.selection.Model', {
...
listeners: {
selectionchange: function( this, selected, eOpts ) {
// Write your listener here or fire another event in view controller
}
}
}
store: ...
});
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
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
}
}