ZK List box inline Editing with Add New and Delete action

In my previous example, i showed how to add New record and delete existing record in the inline Editing of grid. This one is same as previous, but i have used ZK List box. Only zul file has been changed, rest all the same code.

<zk>
	<style>
		.z-label { display:block; } tr.z-row td.z-row-inner { padding:
		2px 5px; } .z-row-cnt, .z-column-cnt { text-align: center; }

	</style>
	<div apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('demo.grid.inline_editing.InlineEditingViewModel')">
		<separator></separator>
		<separator></separator>
		<button onClick="@command('onAddNew')" label="Add New" />
		<separator></separator>
		<listbox id="demoGrid"
			model="@load(vm.allBooks) @template((vm.displayEdit and each.editingStatus) ? 'editable' : 'noneditable')">
			<listhead sizable="true">
				<listheader label="Title" />
				<listheader label="Author" />
				<listheader visible="@load(vm.displayEdit)" />
				<listheader visible="@load(vm.displayEdit)" />
			</listhead>
			<template name="editable">
				<listitem>
					<listcell>
						<textbox cols="60" id="titletext"
							value="@load(each.title) @save(each.title, before='confirm')" />
					</listcell>
					<listcell>
						<textbox
							value="@load(each.author) @save(each.author, before='confirm')" />
					</listcell>
					<listcell>
						<div>
							<button image="pencil-small.png"
								onClick="@command('confirm', currentBook=each)" />
							<button image="cross-small.png"
								onClick="@command('changeEditableStatus', currentBook=each )" />
						</div>
					</listcell>
				</listitem>
			</template>
			<template name="noneditable">
				<listitem>
					<listcell>
						<label value="@load(each.title)" />
					</listcell>
					<listcell>
						<label value="@load(each.author)" />
					</listcell>
					<listcell>
						<button image="pencil-small.png"
							onClick="@command('changeEditableStatus', currentBook=each )" />
					</listcell>
					<listcell>
						<button image="DeleteRecord.png"
							onClick="@command('onDelete', currentBook=each )" />
					</listcell>
				</listitem>
			</template>
		</listbox>
	</div>
</zk>