Split Button (Button with a menu)

[bizhub]

I would like to construct a split button.
That is...

1) A button with a main action when the button is clicked.
2) A combo-like dropdown image to the right of the button that, when clicked, will show a menu under the button for more options.

Can anyone provide some advice as to where to start with this?

Thanks in advance,
Mike.

[daliakamal]

Hello

Hello
I know it is an old issue, but in fact
I need the same component (Split Button) so i was ask if u made?
Thanks in advance

[Jose Gonzalez]

Possible solution...

Had a few minutes while my laptop defrags so (based on the MenuButton example):

isc.Menu.create({
    ID: "menu",
    autoDraw: false,
    showShadow: true,
    shadowDepth: 10,
    data: [
        {title: "New", keyTitle: "Ctrl+N", icon: "icons/16/document_plain_new.png"},
        {title: "Open", keyTitle: "Ctrl+O", icon: "icons/16/folder_out.png"},
        {isSeparator: true},
        {title: "Save", keyTitle: "Ctrl+S", icon: "icons/16/disk_blue.png"},
        {title: "Save As", icon: "icons/16/save_as.png"},
        {isSeparator: true},
        {title: "Recent Documents", icon: "icons/16/folder_document.png", submenu: [
            {title: "data.xml", checked: true},
            {title: "Component Guide.doc"},
            {title: "SmartClient.doc", checked: true},
            {title: "AJAX.doc"}
        ]},
        {isSeparator: true},
        {title: "Export as...", icon: "icons/16/export1.png", submenu: [
            {title: "XML"},
            {title: "CSV"},
            {title: "Plain text"}
        ]},
        {isSeparator: true},
        {title: "Print", enabled: false, keyTitle: "Ctrl+P", icon: "icons/16/printer3.png"}
    ]
});

isc.HLayout.create({
	height: 22,
	members:[
		isc.IButton.create({
			ID: "simpleButton",
			height: '100%',
			width: 25,
			icon: "icons/16/document_plain_new.png",
			click: function() {
				isc.say("hello");
			}
		}),
		isc.MenuButton.create({
			ID: "menuButton",
			title: "",
			width: 25,
			alignMenuLeft: false,
			menu: menu
		})
	]
});