I have two Ext.menu.CheckItem's in a group. How would I change the checked item's disc icon to something else? I would like to retain the radio button functionality (only one selected), but have a check mark instead of the disc.
var options = new Ext.Button({
allowDepress: false,
menu: [
{checked:true,group:'labels',text:'Option 1'},
{checked:false,group:'labels',text:'Option 2'}
]
});
You can achieve that effect (radio controls that look like check boxes) by setting the inputType configuration option to 'checkbox':
var options = new Ext.Button({
allowDepress: false,
menu: [
{inputType:'checkbox',checked:true,group:'labels',text:'Option 1'},
{inputType:'checkbox',checked:false,group:'labels',text:'Option 2'}
]
});
As an example, here are two screenshots that show the effect of inputType:'checkbox':
First screenshot http://www.freeimagehosting.net/uploads/2f662f202c.png
Second screenshot with the "Red" option http://www.freeimagehosting.net/uploads/66c002aad2.png
I modified Ext JS' Checkbox/Radio Groups demo and only added the option to the "Red" radio component configuration.
Related
I am trying to put button with fieldLebel. Both are coming fine but fieldLabel appearing on top of Button. How to make it horizontal alignment.
My code :
var dButton = new Ext.SplitButton({
text: "Before",
id:"B4"
fieldLabel: "Expiry Date",
width : 150,
scope: this,
labelAlign:'left',
disabled : false
}
I am trying to achieve by style but no luck.
Try to use the labelStyle property inside your SplitButton config.
I am using fullcalendar and I have trouble to give the 2 view buttons I use in the header a unique name. Both Timelineday and agendaDay view give me the default value "Day" and that is confusing.
If I use buttonText property as mentioned here: http://fullcalendar.io/docs/text/buttonText/ to change the buttons, I can only rename both buttons at the same time and not just one.
Who knows the solution?
To assign a custom name to a button you place your buttons on the header and then with that name you assign them with buttonText.
header: {
left: "month,agendaWeek,agendaDay today prev,next",
center: "title"
},
buttonText: {
agendaWeek: "Custom Agenda Week Title"
}
I have a simple button with menu. There is a treepanel inside the menu.
Whenever user selects some node in tree, i update the container buttons text.
In treepanel's afterrender event i make a default node selection in the tree and this fire selection event and the button's text is updated.
However, when the button is rendered for the very first time, the treepanel inside the menu is not yet rendered.
How can i make menu & treepanel render silently (adding to dom but not shown to user until button is clicked) after button is rendered?
Actually there is a workaround which i hesitate to use:
btn.showMenu();
btn.hideMenu();
Any better ideas?
JsFiddle: http://jsfiddle.net/exGk3/
Code:
var selectedNodeIndex = 1;
var onItemSelect = function (selModel, node, index) {
var treePanel = selModel.view.up();
var btn = treePanel.up("button");
btn.setText(node.data.text);
};
var afterTreeRender = function (t) {
t.selModel.select(selectedNodeIndex);
}
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
menu: {
items: {
xtype: "treepanel",
id: "tree",
indent: false,
width: 150,
height: 200,
rootVisible: false,
root: {
children: [{
text: "item 1",
leaf: true
}, {
text: "item 2",
leaf: true
}, {
text: "item 3",
leaf: true
}]
},
listeners: {
select: {
fn: onItemSelect
},
afterrender: {
fn: afterTreeRender
}
}
},
showSeparator: false
}
});
I think the easiest thing to do here is to pass along the text needed for the button. It seems that you already know which node to select in the tree, then you probably know which text corresponds to the selected index.
If that's somehow not possible or API is not changeable here is a way for you to set button text programmatically:
http://jsfiddle.net/dbrin/XSn7X/3/
The changes from what you have done are 2 fold:
Use Ext.define method to define your class with initComponent method.
The initComponet method is a hook after the constructor to setup aditional properties. The key here is that the instance of the class exists at this point and *this* context references the class instance.
Use Ext.create to create an instance of your customized button component.
In the initComponment method you just traverse the tree looking for the data you need and set the button text.
I have a grid panel in ExtJS 4 with the following features:
extend : 'Ext.grid.Panel',
multiSelect: true,
alias : 'widget.negativeMoviesView',
frame : true,
autoScroll : true,
height: 690,
renderTo: Ext.getBody(),
store : 'NegativeMovieStore',
columns : [{
header : 'Name',
dataIndex : 'name',
flex : 1
}]
multiSelect is set to true, and if I check in firebug it is in fact true and the selectionMode is MULTI, however it only allows me to select one row at a time. What am I doing wrong?
As sha pointed out. The multiSelect option only enables the grid to have multiple selections by making use of the Shift or Ctrl keys to select a batch or add to the selection in the same way a native application allows.
If you are looking for single click to add/remove from the selection you can use the simpleSelect or selModel property to achieve this.
This will enable single click to add/remove from the selection
simpleSelect: true
This will render an extra column which will let you check the rows you wish to select.
selModel: Ext.create('Ext.selection.CheckboxModel')
Demo for ExtJs 4.0
Demo for ExtJs 4.1
I try to add a text filed and a button to the grid panel in extjs with following code:
var shopIdInput = new Ext.form.TextField({
emptyText: "请输入商户Id",
width: 200
});
var deleteOneShopCacheBtn = new Ext.Button({
text : '删除商户缓存',
handler: deleteOneShopCache,
minWidth : 100,
cls: "delBtn"
});
......
var grid = new Ext.grid.GridPanel({
store: store,
columns: columns,
bbar: [shopIdInput, deleteOneShopCacheBtn],
buttons: [clearRedressWordCacheBtn, clearSplitWordCacheBtn, clearRegionCacheBtn, clearCategoryCacheBtn, runCommandBtn],
items: [commandForm],
buttonAlign: 'center',
stripeRows: true,
autoExpandColumn: 'serverUrl',
//title: '批量执行指令',
sm: checkboxSelect,
frame: true,
autoHeight: true,
enableColumnHide: false,
renderTo : 'serverInfoList'
});
But the button deleteOneShopCacheBtn in bbar doesn't look like a common button as button clearRedressWordCacheBtn in buttons. It changes to a button when the mouse is on it. I have tried to fix the problem by set the property cls and fail, so what can I do?
I usually just add an icon to the button which helps it stand out. so just set a value for
iconCls: 'mybuttonicon'
and in your css
.mybuttonicon { background-image: url(../path/to/icon) !important;}
the cls config allows you to specify additional classes to which to apply to your renderable object (in your case a button) but does NOT do anything with making it change based on the mouse hovering over it, etc.
What you need is a listener on deleteOneShopCacheBtn and listen to the mouseover event(also see Sencha docs for the list of events a button responds to). You can fire off a function and make your button look like whatever you want. I am currently at work. If you still have this question when I get home tonight I can post some code.
Also see following example:
Button click event Ext JS
}