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
}
}
Related
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 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.
In ExtJs I would like to achieve the equivalent of:
<input type="radio"><label><input type="text"></label>
Where the input box is associated to the radio button.
new Ext.form.RadioGroup({
id:"alerts",
items: [
new Ext.form.Radio({
boxLabel:'Now',
}),
new Ext.form.Radio({
boxLabel:'On',
})
]
);
I would like the "On" label to have a Ext.form.TextField next to it.
I have tried adding a Ext.form.TextField to the RadioGroup but it will not show (as I assume its because its not a Radio) and I am unable to add items to the Radio object.
Any advice apprecaited, thanks.
Add an <input/> element in the boxLabel, then on the RadioGroup render event create a TextField and apply it to that element
new Ext.form.RadioGroup({
id:"alerts",
items: [
{boxLabel: 'Now',},
{boxLabel: 'On <input id="on_date" type="text"/>'}, // contains <input/> id is "on_date"
],
listeners: {
change: function() {
// really, check if "on" was clicked
if(true) {
Ext.getCmp('on_date_field').focus();
} else {
// otherwise, disable the field?
}
},
render: function() {
new Ext.form.TextField({
id: 'on_date_field',
applyTo: 'on_date', // apply textfield to element whose id is "on_date"
});
}
}
});
I've confirmed that this works with TextField, and although I haven't tried it, it should work with DateField or ComboBox too. Also untested, but instead of creating an <input/>, you could create a container element and create the TextField and renderTo that element.
I don't think that's possible unless you override the RadioButton class and change its rendering logic (and I think that would be more complex than you would think to make a textfield render correctly the way you proposed). A better approach would be to simply add the radio and the textfield as two separate fields and link them programmatically. In Ext 3.2 you could use a CompositeField to do this easily. In the radio's handler fn you can set focus to its associated textbox or whatever other logic you'd need.