panel-form-js-source.mustache revision b314fc1188609ac757efdb7f61cc5882a070a5e7
YUI().use('datatable-base', 'panel', 'dd-plugin', function (Y) {
// Create the datatable with some gadget information.
var idField = Y.one('#productId'),
nameField = Y.one('#name'),
priceField = Y.one('#price'),
addRowBtn = Y.one('#addRow'),
cols = ['id', 'name', 'price'],
data = [
{id:'ga-3475', name:'gadget', price:'$6.99'},
{id:'sp-9980', name:'sprocket', price:'$3.75'},
{id:'wi-0650', name:'widget', price:'$4.25'}
],
dt, panel, nestedPanel;
// Define the addItem function - this will be called when 'Add Item' is
// pressed on the modal form.
function addItem() {
id : idField.get('value'),
name : nameField.get('value'),
price: priceField.get('value')
});
idField.set('value', '');
nameField.set('value', '');
priceField.set('value', '');
dt.set('recordset', data).render();
panel.hide();
}
// Define the removeItems function - this will be called when
// 'Remove All Items' is pressed on the modal form and is confirmed 'yes'
// by the nested panel.
function removeItems() {
data = [];
dt.set('recordset', data).render();
panel.hide();
}
// Instantiate the nested panel if it doesn't exist, otherwise just show it.
function removeAllItemsConfirm() {
if (nestedPanel) {
return nestedPanel.show();
}
nestedPanel = new Y.Panel({
bodyContent: 'Are you sure you want to remove all items?',
width : 400,
zIndex : 6,
centered : true,
modal : true,
render : '#nestedPanel',
buttons: [
{
value : 'Yes',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
panel.hide();
removeItems();
}
},
{
value : 'No',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
}
}
]
});
}
// Create the DataTable.
dt = new Y.DataTable.Base({
columnset: cols,
recordset: data,
summary : 'Price sheet for inventory parts',
caption : 'Price sheet for inventory parts',
render : '#dt'
});
// Create the main modal form.
panel = new Y.Panel({
srcNode : '#panelContent',
headerContent: 'Add A New Product',
width : 250,
zIndex : 5,
centered : true,
modal : true,
visible : false,
render : true,
plugins : [Y.Plugin.Drag]
});
value : 'Add Item',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
addItem();
}
});
value : 'Remove All Items',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
removeAllItemsConfirm();
}
});
// When the addRowBtn is pressed, show the modal form.
addRowBtn.on('click', function (e) {
panel.show();
});
});