Auto resizing for grids based on collapsing and resizing of other components

[htsworkflow.git] / htsworkflow / frontend / static / js / htsw.js

diff --git a/htsworkflow/frontend/static/js/htsw.js b/htsworkflow/frontend/static/js/htsw.js
index 83f4ac05bd0ed3011ead4db4fbae3f9bce9e00bd..40ddf09eff33020158bc3939fa360b519bb265c8 100644 (file)
--- a/htsworkflow/frontend/static/js/htsw.js
+++ b/htsworkflow/frontend/static/js/htsw.js
@@ -21,6 +21,20 @@ var goto_url = function(www_url)
     window.location = www_url; 
 }
 
+var RESIZEME_ARRAY = new Array();
+
+var resize_registered_panel = function(pnl){
+  Ext.each(RESIZEME_ARRAY, function(fnc){
+    fnc();
+  });
+}
+
+var resize_registered = function(cmp, adj_w, adj_h, raw_w, raw_h){
+  Ext.each(RESIZEME_ARRAY, function(fnc){
+    fnc();
+  });
+}
+
 $(document).ready(function(){
     //----------------------------------------
     // Django Library Page CSS Fix
@@ -146,8 +160,10 @@ $(document).ready(function(){
     // Main Viewport Setup
     //-------------------------------
     var mainBorderPanel = new Ext.Viewport({
+       //id: 'main_viewport',
        layout: 'border',
        items: [{
+           id: 'north_border_panel',
             region: 'north',
             layout: 'vBox',
             layoutConfig: {
@@ -175,14 +191,19 @@ $(document).ready(function(){
                    height: 30
                    //margins: '2 0 0 0'
                }],
-           height: 90
+           height: 90,
+           collapsible: true,
+           collapseMode: 'mini',
+           split: true
        },menuPanel,{
             //title: 'Body',
+           id: 'body_content_panel',
             region: 'center',
             xtype: 'panel',
            //autoScroll: true,
             layout: 'fit',
             margins: '2 0 2 0',
+           monitorResize: true,
             items: [{
                 //title: 'Inner Panel',
                 contentEl: 'body_content',
@@ -192,6 +213,15 @@ $(document).ready(function(){
            },eastPanel]
     });
     
+    // Using a little trick to resize registered components:
+    // i.e. just use RESIZEME_ARRAY.push(function() { <code> }); to register a function
+    // to be called during these events.
+    mainBorderPanel.on('resize', resize_registered);
+    var northBorderPanel = Ext.getCmp('north_border_panel');
+    northBorderPanel.on('collapse', resize_registered_panel);
+    northBorderPanel.on('expand', resize_registered_panel);
+    
+    
     //-------------------------------
     // Menu Bar Setup
     //-------------------------------
@@ -220,6 +250,24 @@ $(document).ready(function(){
     
     // Shifts the remaining toolbar options to the right side.
     main_tb.add({ xtype: 'tbfill' });
+    
+    //----------------------------------------
+    // ExtJS Barcode Magic Implementation
+    var bcmagic_ext_keyhandler = function(sObj, e){
+      //Process upon enter key as input.
+      if (e.getKey() == e.ENTER)
+       bcmagic_process();
+    }
+    
+    var bcmagic_input = new Ext.form.TextField({
+      id: 'bcmagic_input_field',
+      emptyText: 'barcode magic'
+    });
+    bcmagic_input.on('specialkey', bcmagic_ext_keyhandler);
+    
+    main_tb.add(bcmagic_input);
+    //--------------------------------------
+    
     var user_info = Ext.fly('login_info');
     var logout_url = user_info.getAttribute('logouturl');
     var login_url = user_info.getAttribute('loginurl');
@@ -255,5 +303,19 @@ $(document).ready(function(){
     add_buttons_from_html(app_tb, 'app_toolbar_east');
     app_tb.doLayout();
     
+    // Focus on barcode magic, because it's awesome and needs attention! ;-)
+    bcmagic_input.focus();
+    
+    // FIXME: grid target temp code.
+    var grid_target = Ext.fly('grid_target');
+    if (grid_target != null){
+      var grid = getInventoryDataGrid();
+      grid.render(grid_target);
+      RESIZEME_ARRAY.push(function() {
+       Ext.getCmp('inventory_item_panel').setHeight(Ext.getCmp('body_content_panel').getHeight()-4);
+      });
+      grid.setHeight(Ext.get('body_content_panel').getHeight()-4);
+    }
+    
     
 });
\ No newline at end of file