more autogridding
authorerickson <erickson@dcc99617-32d9-48b4-a31d-7c20da2025e4>
Mon, 6 Apr 2009 13:06:54 +0000 (13:06 +0000)
committererickson <erickson@dcc99617-32d9-48b4-a31d-7c20da2025e4>
Mon, 6 Apr 2009 13:06:54 +0000 (13:06 +0000)
git-svn-id: svn://svn.open-ils.org/ILS/trunk@12794 dcc99617-32d9-48b4-a31d-7c20da2025e4

Open-ILS/web/js/ui/default/acq/financial/list_funding_sources.js
Open-ILS/web/js/ui/default/acq/financial/list_funds.js
Open-ILS/web/js/ui/default/conify/global/config/standing_penalty.js
Open-ILS/web/js/ui/default/conify/global/config/z3950_source.js
Open-ILS/web/templates/default/acq/financial/list_funding_sources.tt2
Open-ILS/web/templates/default/acq/financial/list_funds.tt2
Open-ILS/web/templates/default/conify/global/config/standing_penalty.tt2
Open-ILS/web/templates/default/conify/global/config/z3950_source.tt2

index ae76f21..8d09576 100644 (file)
@@ -8,6 +8,7 @@ dojo.require('dojo.data.ItemFileWriteStore');
 dojo.require('dojox.grid.DataGrid');
 dojo.require('openils.Event');
 dojo.require('openils.Util');
+dojo.require('openils.widget.AutoGrid');
 
 function getOrgInfo(rowIndex, item) {
     if(!item) return ''; 
@@ -23,18 +24,14 @@ function getBalanceInfo(rowIndex, item) {
 }
 
 function loadFSGrid() {
-    var store = new dojo.data.ItemFileWriteStore({data:acqfs.initStoreData()});
-    fundingSourceListGrid.setStore(store);
-    fundingSourceListGrid.render();
-
     fieldmapper.standardRequest(
         ['open-ils.acq', 'open-ils.acq.funding_source.org.retrieve'],
         {   async: true,
             params: [openils.User.authtoken, null, {flesh_summary:1}],
-            onresponse : function(r) { /* request object */
+                onresponse : function(r) { /* request object*/ 
                 if(fs = openils.Util.readResponse(r)) {
                     openils.acq.FundingSource.cache[fs.id()] = fs;
-                    store.newItem(acqfs.toStoreItem(fs));
+                    fsGrid.store.newItem(acqfs.toStoreItem(fs));
                 }
             }
         }
index 5245ae4..11bb2ba 100644 (file)
@@ -8,6 +8,7 @@ dojo.require('openils.acq.CurrencyType');
 dojo.require('openils.Event');
 dojo.require('openils.Util');
 dojo.require('openils.acq.Fund');
+dojo.require('openils.widget.AutoGrid');
 
 function getOrgInfo(rowIndex, item) {
      
@@ -24,9 +25,6 @@ function getBalanceInfo(rowIndex, item) {
 }
 
 function loadFundGrid() {
-    var store = new dojo.data.ItemFileWriteStore({data:acqf.initStoreData()});
-    fundListGrid.setStore(store);
-    fundListGrid.render();
     var yearStore = {identifier:'year', name:'year', items:[]};
     var yearsAdded = {}; /* don't duplicate the years in the selector */
     
@@ -37,7 +35,7 @@ function loadFundGrid() {
             onresponse : function(r) {
                 if(lf = openils.Util.readResponse(r)) {
                     openils.acq.Fund.cache[lf.id()] = lf;
-                    store.newItem(acqf.toStoreItem(lf));
+                   lfGrid.store.newItem(acqf.toStoreItem(lf));
                     var year = lf.year();
                     if(!(year in yearsAdded)) {
                         yearStore.items.push({year:year});
@@ -58,12 +56,15 @@ function loadFundGrid() {
 }
 
 function filterGrid() {
+    console.log('filtergrid called');
     var year = fundFilterYearSelect.getValue();
+    console.log(year);
     if(year) 
-        fundListGrid.query = {year:year};
+        lfGrid.setQuery({year:year});
     else
-        fundListGrid.query = {id:'*'};
-        fundListGrid.update();
+        lfGrid.setQuery({id:'*'});
+    
+    lfGrid.update();
 }
 
 openils.Util.addOnLoad(loadFundGrid);
index d51417a..172bb09 100644 (file)
@@ -3,85 +3,18 @@ dojo.require('dojo.data.ItemFileWriteStore');
 dojo.require('dojox.form.CheckedMultiSelect');
 dojo.require('dijit.form.TextBox');
 dojo.require('dojox.grid.cells.dijit');
+dojo.require('openils.widget.AutoGrid');
 
  var spCache = {};
 
 function spBuildGrid() {
-    var store = new dojo.data.ItemFileWriteStore({data:csp.initStoreData()});
-    spGrid.setStore(store);
-    spGrid.render();
-    dojo.connect(store, 'onSet', spGridChanged);
-
-    fieldmapper.standardRequest(
-        ['open-ils.pcrud', 'open-ils.pcrud.search.csp'],
-        {   async: true,
-            params: [openils.User.authtoken, {id:{'!=':null}}, {order_by:{csp:'id'}}],
-            onresponse: function(r) {
-                if(sp = openils.Util.readResponse(r)) 
-                    store.newItem(csp.toStoreItem(sp));
-                spCache[sp.id()] = sp;
-            } 
-        }
-    );
-}
-
-function spCreate(args) {
-    if(!(args.name && args.label)) return;
-
-    var penalty = new csp();
-    penalty.name(args.name);
-    penalty.label(args.label);
-    penalty.block_list(args.block_list); 
-
-    fieldmapper.standardRequest(
-        ['open-ils.permacrud', 'open-ils.permacrud.create.csp'],
-        { async: true,
-          params: [openils.User.authtoken, penalty],
-          oncomplete: function(r) {
-              if(obj = openils.Util.readResponse(r))
-                  spGrid.store.newItem(csp.toStoreItem(obj));
-            }
-        }
-    );
-}
-function spGridChanged(item, attr, oldVal, newVal) {
-    var sp = spCache[spGrid.store.getValue(item, 'id')];
-    console.log("changing cm " + sp.id() + " object: " + attr + " = " + newVal);
-    sp[attr](newVal);
-    sp.ischanged(true);
-    spSaveButton.setDisabled(false);
-}
-function saveChanges() {
-    spGrid.doclick(0);   
-    var changedObjects = [];
-    for(var i in spCache){
-        var sp = spCache[i];
-        if(sp.ischanged())
-            changedObjects.push(sp);
-    }   
-    _saveChanges(changedObjects, 0);
-}
-function _saveChanges(changedObjects, idx) {
-    
-    if(idx >= changedObjects.length) {
-        // we've made it through the list
-        spSaveButton.setDisabled(true);
-        return;
+    spGrid.disableWidgetTest = function(field, obj) {
+        if(field == 'name') return true;
+        if(obj.id() > 100) return false;       
+        return false;
     }
-
-    var item = changedObjects[idx];
-         
-    fieldmapper.standardRequest(
-        ['open-ils.permacrud', 'open-ils.permacrud.update.csp'],
-        {   async: true,
-            params: [openils.User.authtoken, item],
-            oncomplete: function(r) {
-                if(stat = openils.Util.readResponse(r)) {
-                    _saveChanges(changedObjects, ++idx);
-                }
-            }
-        }
-    );
+ spGrid.loadAll({order_by:{csp : 'name'}});
+   
 }
 
 function formatId(inDatum) {
@@ -91,35 +24,6 @@ function formatId(inDatum) {
     return inDatum;
         
 }
-function deleteFromGrid() {
-        _deleteFromGrid(spGrid.selection.getSelected(), 0);
-}   
-
-function _deleteFromGrid(list, idx) {
-    if(idx >= list.length) // we've made it through the list
-        return;
-
-    var item = list[idx];
-    var id = spGrid.store.getValue(item, 'id');
-
-    if(id < 100) { // don't delete system penalties
-        _deleteFromGrid(list, ++idx);
-        return;
-    }
-
-    fieldmapper.standardRequest(
-       ['open-ils.permacrud', 'open-ils.permacrud.delete.csp'],
-       {    async: true,
-            params: [openils.User.authtoken, id],
-            oncomplete: function(r) {
-                if(obj = openils.Util.readResponse(r)) {
-                    spGrid.store.deleteItem(item);
-                }
-                _deleteFromGrid(list, ++idx);
-            }
-        }
-    );
-}
 
 openils.Util.addOnLoad(spBuildGrid);
 
index 79622f0..ff2de10 100644 (file)
@@ -4,48 +4,11 @@ dojo.require('dijit.form.NumberTextBox');
 dojo.require('dijit.form.CheckBox');
 dojo.require('fieldmapper.OrgUtils');
 dojo.require('openils.widget.OrgUnitFilteringSelect');
-
+dojo.require('openils.widget.AutoGrid');
 var zsList;
 
 function buildZSGrid() {
-    fieldmapper.standardRequest(
-        ['open-ils.pcrud', 'open-ils.pcrud.search.czs.atomic'],
-        {   async: true,
-            params: [openils.User.authtoken, {name:{'!=':null}}],
-            oncomplete: function(r) {
-                if(zsList = openils.Util.readResponse(r)) {
-                    var store = new dojo.data.ItemFileReadStore(
-                        {data:czs.toStoreData(zsList, 'name',{identifier:'name'})});
-                    zsGrid.setStore(store);
-                    zsGrid.render();
-                }
-            }
-        }
-    );
-}
-
-function zsCreate(args) {
-    return alert(js2JSON(args));
-    if(!args.name || args.owner == null) 
-        return;
-    if(args.default_price == '' || isNaN(args.default_price))
-        args.default_price = null;
-
-    var zsype = new czs();
-    zsype.name(args.name);
-    zsype.owner(args.owner);
-    zsype.default_price(args.default_price);
-
-    fieldmapper.standardRequest(
-        ['open-ils.permacrud', 'open-ils.permacrud.create.czs'],
-        {   async: true,
-            params: [openils.User.authtoken, zsype],
-            oncomplete: function(r) {
-                if(new String(openils.Util.readResponse(r)) != '0')
-                    buildBTGrid();
-            }
-        }
-    );
+    zsGrid.loadAll({order_by:{czs : 'name'}});
 }
 
 openils.Util.addOnLoad(buildZSGrid);
index 5df3cf1..63bb10a 100644 (file)
 [% WRAPPER 'default/base.tt2' %]
-<div id='oils-acq-list-header' class='container'>
-    <div id='oils-acq-list-header-label'>Funding Sources</div>
-</div>
 
 <!-- load the page-specific JS -->
 <script src='[% ctx.media_prefix %]/js/ui/default/acq/financial/list_funding_sources.js'> </script>
 
-<script type="text/javascript">
-    function createFS(fields) {
-        /** Creates a new funding source */
-        openils.acq.FundingSource.create(
-            fields, 
-            function(fsId) {
-                var evt = openils.Event.parse(fsId);
-                if(evt) {
-                    alert(evt); /* XXX */
-                    return;
-                } else {
-                    location.href =  /* go to the details page for this fs */
-                        '[% ctx.base_uri %]/acq/funding_source/view/'+fsId;
-                }
-            }
-        );
-    }
-</script>
-
-<div class='oils-acq-actions-div'>
-    <div dojoType="dijit.form.DropDownButton">
-        <span>New Funding Source</span>
-
-        <div dojoType="dijit.TooltipDialog" execute="createFS(arguments[0]);">
-            <script type='dojo/connect' event='onOpen'>
-                openils.acq.CurrencyType.loadSelectWidget(fsCurrencySelector);
-                new openils.User().buildPermOrgSelector('ADMIN_FUNDING_SOURCE', fsOwnerSelect);
-            </script>
-
-            <table class='dijitTooltipTable'>
-                <tr>
-                    <td><label for="name">Name: </label></td>
-                    <td><input dojoType="dijit.form.TextBox" name="name"/></td>
-                </tr>
-                <tr>
-                    <td><label for="name">Code: </label></td>
-                    <td><input dojoType="dijit.form.TextBox" name="code"/></td>
-                </tr>
-                <tr>
-                    <td><label for="currency_type">Currency Type:</label></td>
-                    <td>
-                        <input jsId='fsCurrencySelector' name="currency_type" 
-                            dojoType="dijit.form.FilteringSelect" searchAttr='code' labelAttr='code'>
-                        </input>
-                    </td>
-                </tr>
-                <tr>
-                    <td valign='top'><label for="owner">Owning Location:</label></td>
-                    <td>
-                        <input dojoType="openils.widget.OrgUnitFilteringSelect" jsId='fsOwnerSelect'
-                            searchAttr="shortname" name="owner" autocomplete="true" labelAttr='shortname'> </input>
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan='2' align='center'>
-                        <button dojoType=dijit.form.Button type="submit">Create</button>
-                    </td>
-                </tr>
-            </table>
-        </div>
-    </div> 
-
-    <button dojoType="dijit.form.Button" 
-            onclick="openils.acq.FundingSource.deleteFromGrid(
-                fundingSourceListGrid, function(){location.href = location.href})">
-        Delete Selected
-    </button>
-</div>
-
 <!-- The main grid lives here -->
 <script>
     function getName(rowIndex, item) {
         if(!item) return '';
-        var name = this.grid.store.getValue(item, 'name');        
+        var name = this.grid.store.getValue(item, 'name');
         var id = this.grid.store.getValue(item, 'id');
         return '<a href="[% ctx.base_uri %]/acq/funding_source/view/'+id+'">'+name+'</a>';
     }
 </script>
-<div dojoType="dijit.layout.ContentPane" layoutAlign="top"> 
-     <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style='height:600px;'> 
-         <table jsId="fundingSourceListGrid" dojoType="dojox.grid.DataGrid" query="{id: '*'}" rowSelector='20px'>
-            <thead> 
-                <tr> 
-                    <th field="id">ID</th> 
-                    <th field="name" width='auto' get='getName'>Name</th> 
-                    <th field="owner" width='auto'get='getOrgInfo'>Owner</th> 
-                    <th field="code" width='auto'>Code</th>
-                    <th field="currency_type" width='auto'>Currency Type</th> 
-                    <th field="balance" width='auto' get='getBalanceInfo'>Balance</th> 
-                </tr> 
-            </thead> 
-        </table>     
-    </div> 
-</div> 
+
+ <div dojoType="dijit.layout.ContentPane" layoutAlign="client">
+        <div dojoType="dijit.layout.ContentPane" layoutAlign="top" class='oils-header-panel'>
+            <div>Funding Sources</div>
+            <div>
+                <button dojoType='dijit.form.Button' onClick='fsGrid.showCreateDialog()'>New Funding Source</button>
+            </div>
+        </div>
+
+        <table  jsId="fsGrid"
+                dojoType="openils.widget.AutoGrid"
+                fieldOrder="['id', 'name', 'owner', 'code', 'currency_type', 'balance']"
+                query="{name: '*'}"
+                defaultCellWidth='20'
+                fmClass='acqfs'
+                editOnEnter='true'>
+            <thead>
+                <tr>
+                    <th field="name" get='getName'/>
+                    <th field="owner" get='getOrgInfo'/>
+                    <th field="balance" get='getBalanceInfo'/>
+                </tr>
+            </thead>
+        </table>
+    </div>
+</div>
+
+
+
 [% END %]
index f4834b4..31cb284 100644 (file)
@@ -1,9 +1,5 @@
 [% WRAPPER 'default/base.tt2' %]
 
-<div id='oils-acq-list-header' class='container'>
-    <div id='oils-acq-list-header-label'>Funds</div>
-</div>
-
 <!-- load the page-specific JS -->
 <script src='[% ctx.media_prefix %]/js/ui/default/acq/financial/list_funds.js'> </script>
 
     }
 </script>
 
-<div class='oils-acq-actions-div'>
-    <div dojoType="dijit.form.DropDownButton">
-        <span>New Fund</span>
-
-        <div dojoType="dijit.TooltipDialog" execute="createFund(arguments[0]);">
-            <script type='dojo/connect' event='onOpen'>
-                openils.acq.CurrencyType.loadSelectWidget(fundCurrencySelector);
-                new openils.User().buildPermOrgSelector('ADMIN_FUND', fundOwnerSelect);
-            </script>
-
-            <table class='dijitTooltipTable'>
-                <tr>
-                    <td><label for="name">Name: </label></td>
-                    <td><input dojoType="dijit.form.TextBox" name="name"/></td>
-                </tr>
-                <tr>
-                    <td><label for="name">Code: </label></td>
-                    <td><input dojoType="dijit.form.TextBox" name="code"/></td>
-                </tr>
-                <tr>
-                    <td><label for="year">Year: </label></td>
-                    <td><input dojoType="dijit.form.TextBox" name="year"/></td>
-                </tr>
-                <tr>
-                    <td><label for="currency_type">Currency Type: </label></td>
-                    <td>
-                        <input jsId='fundCurrencySelector' name="currency_type" 
-                               dojoType="dijit.form.FilteringSelect" searchAttr='code' labelAttr='code'>
-                        </input>
-                    </td>
-                </tr>
-                <tr>
-                    <td valign='top'><label for="org">Owning Location: </label></td>
-                    <td>
-                        <input dojoType="openils.widget.OrgUnitFilteringSelect" jsId='fundOwnerSelect'
-                               searchAttr="shortname" name="org" autocomplete="true" labelAttr='shortname'> </input>
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan='2' align='center'>
-                        <button dojoType=dijit.form.Button type="submit">Create</button>
-                    </td>
-                </tr>
-            </table>
-        </div>
-    </div> 
-
-    <button dojoType="dijit.form.Button" 
-            onclick="openils.acq.Fund.deleteFromGrid(
-                     fundListGrid, function(){location.href = location.href})">
-        Delete Selected
-    </button>
-
-    <label>Year</label>
-    <select dojoType='dijit.form.FilteringSelect' onchange='filterGrid();' style='width:100px;'
-            jsId='fundFilterYearSelect' labelAttr='year' searchAttr='year'> </select>
-</div>
-
-<!-- The main grid lives here -->
+  <!-- The main grid lives here -->
 <script>
     function getName(rowIndex, item) {
         if(!item) return;
         return '<a href="[% ctx.base_uri %]/acq/fund/view/'+id+'">'+name+'</a>';
     }
 </script> 
-<div dojoType="dijit.layout.ContentPane" layoutAlign="top"> 
-    <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style='height:600px;'> 
-        <table jsId="fundListGrid" dojoType="dojox.grid.DataGrid" query="{id: '*'}" rowSelector='20px'> 
-            <thead> 
-                <tr> 
-                    <th field="id">ID</th> 
-                    <th field="name" width='auto' get='getName'>Name</th> 
-                    <th field="code">Code</th> 
-                    <th field="year">Year</th> 
-                    <th field="org" get='getOrgInfo'>Location</th> 
-                    <th field="currency_type">Currency Type</th> 
-                    <th field="combined_balance" get='getBalanceInfo'>Combined Balance</th>
-                </tr> 
-            </thead> 
-        </table>     
-    </div> 
-</div> 
+
+<div dojoType="dijit.layout.ContentPane" layoutAlign="client">
+        <div dojoType="dijit.layout.ContentPane" layoutAlign="top" class='oils-header-panel'>
+            <div>Funding Types</div>
+            <div>
+                <button dojoType='dijit.form.Button' onClick='lfGrid.showCreateDialog()'>New Fund</button>
+            </div>
+        </div>
+        <label>Year</label>
+        <select dojoType='dijit.form.FilteringSelect' onchange='filterGrid();' style='width:100px;'
+                jsId='fundFilterYearSelect' labelAttr='year' searchAttr='year'> </select>
+
+
+        <table  jsId="lfGrid"
+                dojoType="openils.widget.AutoGrid"
+                fieldOrder="['id', 'name', 'code', 'year', 'org', 'currency_type', 'combined_balance']"
+                query="{id: '*'}"
+                defaultCellWidth='20'
+                fmClass='acqf'
+                editOnEnter='true'>
+            <thead>
+                <tr><th field='owner' get='getOrgInfo'/>
+                </tr>
+            </thead>
+        </table>
+    </div>
+</div>
+
+
 [% END %]
 
index 22d6332..83dcfdd 100644 (file)
@@ -6,6 +6,7 @@
 <h1>Standing Penalty Types</h1><br/>
 
 <script>
+  
     if(!dojo._hasResource['openils.widget.StandingPenaltyBlockedSelector']) {
         dojo.provide('openils.widget.StandingPenaltyBlockedSelector');
         dojo.require('dojox.form.CheckedMultiSelect');
             } 
         );
     }
+
 </script>
+  <div dojoType="dijit.layout.ContentPane" layoutAlign="client">
+        <div dojoType="dijit.layout.ContentPane" layoutAlign="top" class='oils-header-panel'>
+            <div>Standing Penalty Types</div>
+            <div>
+                <button dojoType='dijit.form.Button' onClick='spGrid.showCreateDialog()'>New Penalty Type</button>
+            </div>
+        </div>
 
-<div dojoType="dijit.form.DropDownButton">
-    <span>New Standing Penalty</span>
-    <div dojoType="dijit.TooltipDialog" execute="spCreate(arguments[0]);">
-        <table class='dijitTooltipTable'>
-            <tr>
-                <td><label for="name">Code: </label></td>
-                <td><input dojoType="dijit.form.TextBox" name="name"/></td>
-            </tr>
-            <tr>
-                <td><label for="label">Label: </label></td>
-                <td><input dojoType="dijit.form.TextBox" name="label"/></td>
-            </tr>
-            <tr>
-                <td><label for="block_list">Blocked Actions: </label></td>
-                <td>
-                    <select style='overflow-y:auto;' multiple='true' dojoType="openils.widget.StandingPenaltyBlockedSelector" name="block_list">
-                </td>
-            </tr>
-            <tr>
-                <td colspan='2' align='center'>
-                    <button dojoType='dijit.form.Button' type="submit">Create</button>
-                </td>
-            </tr>
-        </table>
-    </div>
-</div> 
- <button dojoType='dijit.form.Button' onClick="deleteFromGrid();">Delete Selected</button>
- <button dojoType='dijit.form.Button' onclick='saveChanges();' disabled='disabled' jsId='spSaveButton'>Save Changes</button>
-<div dojoType="dijit.layout.ContentPane" layoutAlign="top">
-    <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style='height:600px;'>
-        <table jsId="spGrid" dojoType="dojox.grid.DataGrid" query="{id: '*'}" rowSelector='20px'>
+        <table  jsId="spGrid"
+                dojoType="openils.widget.AutoGrid"
+                fieldOrder="['id', 'name', 'label', 'block_list']"
+                query="{name: '*'}"
+                defaultCellWidth='15'
+                fmClass='csp'
+                editOnEnter='true'>
             <thead>
                 <tr>
-                    <th field="id" width='auto' formatter='formatId'>ID</th>
-                    <th field="name" width='auto' editable='true' 
-                        cellType='dojox.grid.cells._Widget' widgetClass='dijit.form.TextBox'>Name</th>
-                    <th field="label" width='auto' editable='true' 
-                        cellType='dojox.grid.cells._Widget' widgetClass='dijit.form.TextBox'>Label</th>
-                    <th field="block_list" width='auto' editable='true' 
-                        cellType='dojox.grid.cells._Widget'
-                        widgetClass='openils.widget.StandingPenaltyBlockedSelector'>Block List</th>
+                    <th field="id" formatter='formatId'/>
                 </tr>
+
             </thead>
-        </table>    
+        </table>
     </div>
 </div>
-
 [% END %]
 
 
index 343ef62..8cd3ff3 100644 (file)
@@ -1,69 +1,23 @@
 [% WRAPPER default/base.tt2 %]
 <script src='[% ctx.media_prefix %]/js/ui/default/conify/global/config/z3950_source.js'> </script>
-<h1>Z39.50 Servers</h1><br/>
 
-<div dojoType="dijit.form.DropDownButton">
-    <span>Z39.50 Servers</span>
-    <div dojoType="dijit.TooltipDialog" execute="zsCreate(arguments[0]);">
-        <table class='dijitTooltipTable'>
-            <tr>
-                <td><label for="name">Name: </label></td>
-                <td><input dojoType="dijit.form.TextBox" name="name"/></td>
-            </tr>
-            <tr>
-                <td><label for="label">Label: </label></td>
-                <td><input dojoType="dijit.form.TextBox" name="label"/></td>
-            </tr>
-            <tr>
-                <td><label for="host">Host: </label></td>
-                <td><input dojoType="dijit.form.TextBox" name="host"/></td>
-            </tr>
-            <tr>
-                <td><label for="port">Port: </label></td>
-                <td><input dojoType="dijit.form.NumberTextBox" name="port"/></td>
-            </tr>
-            <tr>
-                <td><label for="db">Database: </label></td>
-                <td><input dojoType="dijit.form.TextBox" name="db"/></td>
-            </tr>
-            <tr>
-                <td><label for="record_format">Record Format: </label></td>
-                <td><input dojoType="dijit.form.TextBox" name="record_format"/></td>
-            </tr>
-            <tr>
-                <td><label for="transmission_format">Transmission Format: </label></td>
-                <td><input dojoType="dijit.form.TextBox" name="transmission_format"/></td>
-            </tr>
-            <tr>
-                <td><label for="auth">Requires Authentication: </label></td>
-                <td><input dojoType="dijit.form.CheckBox" name="auth"/></td>
-            </tr>
-            <tr>
-                <td colspan='2' align='center'>
-                    <button dojoType='dijit.form.Button' type="submit">Create</button>
-                </td>
-            </tr>
-        </table>
-    </div>
-</div> 
+<div dojoType="dijit.layout.ContentPane" layoutAlign="client">
 
-<div dojoType="dijit.layout.ContentPane" layoutAlign="top">
-    <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style='height:600px;'>
-        <table jsId="zsGrid" dojoType="dojox.grid.DataGrid" query="{name: '*'}" rowSelector='20px'>
-            <thead>
-                <tr>
-                    <th field="name">Name</th>
-                    <th field="label" width='auto'>Label</th>
-                    <th field="host" width='auto'>Host</th>
-                    <th field="port">Port</th>
-                    <th field="db" width='auto'>Database</th>
-                    <th field="record_format" width='auto'>Record Format</th>
-                    <th field="transmission_format" width='auto'>Transmission Format</th>
-                    <th field="auth" width='auto'>Requires Authentication</th>
-                </tr>
-            </thead>
-        </table>    
-    </div>
+    <div dojoType="dijit.layout.ContentPane" layoutAlign="top" class='oils-header-panel'>
+        <div>Z39.50 Servers</div>
+        <div>
+            <button dojoType='dijit.form.Button' onClick='zsGrid.showCreateDialog()'>New Z39.50 Server</button>
+        </div>
+    </div>       
+
+    <table  jsId="zsGrid"
+            dojoType="openils.widget.AutoGrid"
+            fieldOrder="['name', 'label', 'host', 'port', 'db', 'record_format', 'transmission_format', 'auth']"
+            query="{name: '*'}"
+            defaultCellWidth='15'
+            fmClass='czs'
+            editOnEnter='true'>
+    </table>
 </div>
 
 [% END %]