I have combobox and button on a form. And I want if the combobox is empty then the button is disabled but if combobox have records button is enabled.
{
xtype: 'combobox',
name : 'book',
fieldLabel: 'BookName',
value: name
}
buttons : [
{
text: 'Add',
action: 'Add_book'
}
]
You can add a listener to your combobox, you can change the function of the listener like you want
{
xtype: 'combobox',
name : 'book',
fieldLabel: 'BookName',
value: name,
listeners: {
afterrender: function() {
if (this.getValue() === null) {
Ext.getCmp('yourButton').setDisabled(true);
}
else {
Ext.getCmp('yourButton').setDisabled(false);
}
}
}
}
Related
In an Ext.grid.panel I load a list of contents as rows with several columns. I would like the user to be able to select only one of these rows via a checkbox/radiogroup column, which has the ID of the respective entry as value.
I have already discovered the radiobuttons via the xtype widgtecolumn. But how can I set this column so that only one radiobutton in this column can be activated?
The current code for the radio column is the following:
{
xtype: 'widgetcolumn',
bind: {
text: 'Select topic'
},
dataIndex: 'defaultTopic',
widget: {
xtype: 'radio',
simpleValue: true
}
}
To ensure that the user can select only one radiobutton, you have to add the name property to your radio widget.
If you were using radiogroups like in this example, you'd have to add the name to each radiobutton. But for your use case, this configuration would be sufficient:
widget: {
xtype: 'radio',
simpleValue: true,
name: 'test'
}
See also this fiddle for an example.
You can use checkcolumn and change the records values that controls the check value using checkchange listener
Example:
{
xtype: 'checkcolumn',
text: 'Active',
dataIndex: 'active',
listeners: {
checkchange: 'onChangeDefaultTopic'
}
}
In your view controller:
onChangeDefaultTopic: function (column, rowIndex, checked, record) {
if (checked) {
store.getRange().forEach((rec) => {
if (record.get('id') !== rec.get('id')) {
rec.set('active', false)
}
});
}
}
I have a grid with an editable text column and an editable boolean column.
columns: [
{
dataIndex: '1',
header: 'String',
editor: {
allowBlank: false
}
},
{
xtype: 'checkcolumn',
header: 'Boolean',
dataIndex: '2'
}
],
I would like to do some checking before I allow someone to edit a cell, so I implement the beforeedit function like so :
listeners: {
beforeedit: function (e) {
alert('hi')
}
}
The beforeedit fires when I try and edit a text column, but for a checkbox it does not.
Why?
Fiddle demonstrating my problem :
http://jsfiddle.net/S8Tgm/16/
Just figured it out :
{
xtype: 'checkcolumn',
header: 'Boolean',
dataIndex: '2',
listeners: {
beforecheckchange: function() {
if (condition)
return false;
}
}
}
the checkcolumn needs a beforecheckchange listener.
I want that the CheckboxModel appear all checked when grid is rendered:
This is my code:
sm = Ext.create('Ext.selection.CheckboxModel', {
listeners: {
selectionchange: function (sm, selections) {
// Must refresh the view after every selection
sm.view.refresh();
}
}
})
The grid:
{
xtype: 'gridpanel',
title: 'gridTitle',
selModel: sm,
store: my_store,
columns: {
items:[
..
]
}
}
You could use afterrender listeners of the grid to select all the rows :
listeners:{
afterrender:function( thisObj, eOpts ){
var sm=thisObj.getSelectionModel();
sm.selectAll(true);
}
},
afterrender may not work, try afterlayout instead:
// in your grid
listeners: {
afterlayout : function (thisObj, eOpts) {
thisObj.getSelectionModel().selectAll();
}
},
// ...
i use a tab panel in extjs. I want to display an alert when clicked on a tab. But i am not sure how.
This is what i do now:
{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [
{
xtype: 'panel',
title: 'All',
items: [grid]
},
{
xtype: 'panel',
title: 'Closed'
},
{
xtype: 'panel',
title: 'Open'
}
],
listeners: {
click: function () {
alert('test');
}
}
}
How can is display All, Closed or Open when there is clicked on that tab?
There is no event for tab click in TabPanel, however you can bind into click event on each tab:
Ext.createWidget('tabpanel', {
items: [...],
listeners: {
render: function() {
this.items.each(function(i){
i.tab.on('click', function(){
alert(i.title);
});
});
}
}
});
Notice: this is ExtJS 4 based code.
I manage to do this by using tabchange event. In example below I used newCard.xtype property where value of xtype (i.e. task-archive) is just my panel with controls and corresponding xtype property.
Ext.define('ComplexBrigade.controller.taskArchive.TaskArchive', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'#tabWorks': {
tabchange: this.doTest
}
});
},
doTest: function ( tabPanel, newCard, oldCard, eOpts) {
switch (newCard.xtype) {
case "task-archive":
console.log("task-archive");
break;
case "task-creation":
console.log("task-creation");
break;
}
}
});
In my toolbar there is checkbox used for enabling and disabling tooltip. If the checkbox is checked then I should enable tooltip and it is working if not then I should disable it also working. After disabling tooltip, when click on toolbar not on any item in the toolbar then also it is enabling.
toogleTooltip is a handler of checkbox
function toggleTooltip() {
debugger;
if (Ext.getCmp("msai_tool_tip").checked) {
Ext.QuickTips.enable();
while (!Ext.QuickTips.isEnabled())
Ext.QuickTips.enable();
} else {
Ext.QuickTips.disable();
while (Ext.QuickTips.isEnabled())
Ext.QuickTips.disable();
}
}
This is my toolbar creation code:
Ext.QuickTips.init();
var tb = new Ext.Toolbar({
id: 'form_menu_bar',
renderTo: Ext.get('newproducttitle').dom,
items: [{
tooltip: {
text: "Click on this button to generate the template and save it in server.",
title: "Save",
xtype: "quicktip"
},
iconCls: 'msai_save_template',
handler: generateTemplate
}, {
tooltip: {
text: "Click on this button to generate the template.",
title: "Save to clipboard",
xtype: "quicktip"
},
iconCls: 'msai_save_clipboard',
handler: generateTemplateClipboard
}]
});
Please suggest some solution so that I should not show tooltip, if user click on toolbar not in any item.
Please find the below fiddle to check working example:
https://fiddle.sencha.com/#view/editor&fiddle/2c7k
Code snippet:
Ext.QuickTips.init();
var tb = new Ext.Toolbar({
renderTo: document.body,
width: 600,
height: 100,
items: [{
// xtype: 'button', // default for Toolbars, same as 'tbbutton'
text: 'Button',
tooltip: 'button'
}, {
xtype: 'splitbutton', // same as 'tbsplitbutton'
text: 'Split Button',
tooltip: 'Split Button'
}, {
xtype: 'checkbox',
boxLabel: 'enable tooltip',
checked: true,
listeners: {
check: function (checkbox, newValue, oldValue) {
if (newValue) {
Ext.QuickTips.enable();
} else {
Ext.QuickTips.disable();
}
}
}
}]
});