Popup & Grid

The demo below features a popup with a resiabled layout with two panels. One panel has a grid and the second has a form. The grid and the form are connected to each other.
// widget configuration var config = { layout: { name: 'layout', padding: 4, panels: [ { type: 'left', size: '50%', resizable: true, minSize: 300 }, { type: 'main', minSize: 300 } ] }, grid: { name: 'grid', columns: [ { field: 'fname', caption: 'First Name', size: '33%', sortable: true, searchable: true }, { field: 'lname', caption: 'Last Name', size: '33%', sortable: true, searchable: true }, { field: 'email', caption: 'Email', size: '33%' }, { field: 'sdate', caption: 'Start Date', size: '120px', render: 'date' }, ], records: [ { recid: 1, fname: 'John', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' }, { recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' } ], onClick: function(event) { var grid = this; var form = w2ui.form; event.onComplete = function () { var sel = grid.getSelection(); if (sel.length == 1) { form.recid = sel[0]; form.record = $.extend(true, {}, grid.get(sel[0])); form.refresh(); } else { form.clear(); } } } }, form: { header: 'Edit Record', name: 'form', fields: [ { name: 'recid', type: 'text', html: { caption: 'ID', attr: 'size="10" readonly' } }, { name: 'fname', type: 'text', required: true, html: { caption: 'First Name', attr: 'size="40" maxlength="40"' } }, { name: 'lname', type: 'text', required: true, html: { caption: 'Last Name', attr: 'size="40" maxlength="40"' } }, { name: 'email', type: 'email', html: { caption: 'Email', attr: 'size="30"' } }, { name: 'sdate', type: 'date', html: { caption: 'Date', attr: 'size="10"' } } ], actions: { Reset: function () { this.clear(); }, Save: function () { var errors = this.validate(); if (errors.length > 0) return; if (this.recid == 0) { w2ui.grid.add($.extend(true, { recid: w2ui.grid.records.length + 1 }, this.record)); w2ui.grid.selectNone(); this.clear(); } else { w2ui.grid.set(this.recid, this.record); w2ui.grid.selectNone(); this.clear(); } } } } } $(function () { // initialization in memory $().w2layout(config.layout); $().w2grid(config.grid); $().w2form(config.form); }); function openPopup() { w2popup.open({ title : 'Popup', width : 900, height : 600, showMax : true, body : '
', onOpen : function (event) { event.onComplete = function () { $('#w2ui-popup #main').w2render('layout'); w2ui.layout.content('left', w2ui.grid); w2ui.layout.content('main', w2ui.form); }; }, onMax : function (event) { event.onComplete = function () { w2ui.layout.resize(); } }, onMin : function (event) { event.onComplete = function () { w2ui.layout.resize(); } } }); }