PDA

View Full Version : Select menu with checkbox on top



arraybarray
4 Jul 2013, 3:50 AM
Hi experts,

I am new to extjs and need your help in designing toolbar with select all menu containing a checkbox on top, as in gmail inbox toolbar select menu, current code of my toolbar is something like this:


items: [
{
iconCls: 'select-menu',
tooltip: 'Select Orders',
menu: {
items: [
{
text: 'New',
iconCls: 'select-new'
}
]
}
}
]


best,
arraybarray

Farish
4 Jul 2013, 4:54 AM
you can simply add an HTML checkbox in your menu:


Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 500,
height: 40,
items: [
{
text: '<input type="checkbox">',
menu: Ext.create('Ext.menu.Menu', {
width: 100,
floating: true, // usually you want this set to True (default)
items:
[
{ text: 'regular item 1' },
{ text: 'regular item 2' },
{ text: 'regular item 3' }
]
})
}
]
});

The logic has to be added of course.

arraybarray
4 Jul 2013, 5:28 AM
Its showing a checkbox but not changing checked state on click. Showing menu items on click.

Farish
4 Jul 2013, 5:34 AM
you have to implement the logic to change its state (checked/unchecked). e.g. you can listen for some event and change the button text (to set checkbox to checked).

arraybarray
4 Jul 2013, 5:48 AM
Ok I, got it.
Thank you very much for your support,