Would like another pair of eyes regarding layout

edited September 2012 in General
Hello. I have a set of four panels controlled by a card arranger and in the first panel I have a three input fields and then an enyo.List. The arranger works fine, firing events is fine, but the height of the first panel is something like 100000 pixels, and in the interest of speed and time I was hoping that someone could spot the problem (I believe I'm incorrectly nesting, but posting here may prove faster than man handling code further).

enyo.kind({ name: "AddCasePanels", kind: "FittableRows", classes: "enyo-fit", components: [ {kind: "FittableColumns", noStretch: true, classes: "onyx-toolbar onyx-toolbar-inline", components: [ {kind: "Scroller", thumb: false, fit: true, touch: true, vertical: "hidden", style: "margin: 0;", components: [ {classes: "onyx-toolbar-inline", style: "white-space: nowrap;", components: [ { kind: "onyx.GroupboxHeader", content: "Add Case", }, ]} ]} ]}, {kind: "Panels", name:"addCasePanels", fit:true, realtimeFit: true, classes: "panels-sample-panels enyo-border-box", components: [ //PANEL ONE { kind:"Scroller", fit:true, horizontal: "hidden", components:[ { style:"padding:5px", components:[ { kind: "onyx.GroupboxHeader", content: "Patient Info", }, ] }, { name:"groupPatientInfo", style:"width:100%", components:[ { name:"inputDecMRN", kind: "onyx.InputDecorator", style: "width: 92%", components: [ {kind:"onyx.Input", placeholder:"MRN", name: "MRN", defaultFocus:true, style: "width: 100%", onkeyup: 'patientIDFocus'}, ] }, { layoutKind:"FittableColumnsLayout", components:[ { name:"inputDecFN", kind: "onyx.InputDecorator", style:"width:49%", components: [ {kind:"onyx.Input", placeholder:"Last name", name: "lastName", style: "width: 100%", onkeyup:'patientIDFocus'}, ] }, { name:"inputDecLN", kind: "onyx.InputDecorator", style:"width:49%", components: [ {kind:"onyx.Input", placeholder:"First name", name: "firstName", style: "width: 100%", onkeyup:'patientIDFocus'}, ] }, ] } ] }, { style:"padding:5px", components:[ { kind: "onyx.GroupboxHeader", content: "Patient Results", }, ] }, { name: "patientList_AddCase", //kind: "FlyweightRepeater", count: 10, kind:"List", fit: true, onSetupItem: "listSetupRow", components: [ { name:"item", kind: "onyx.SwipeableItem", ontap: "clickItem", contentClasses:"patientItem", //style:"padding:0px !important; padding-bottom:2px; margin:0px;", components: [ { name:"itemContent", fit:true, components: [ { layoutKind:"FittableColumnsLayout", components:[ { name: "patname", style:'color:black;', classes: "patient name", content: 'name' }, { name: "patdob", classes: "patient dob", style:"float:right;color:black;", content: 'DOB' }, ] } ], }], }, ] }, {kind: "FittableColumns", noStretch: true, classes: "onyx-toolbar onyx-toolbar-inline", components: [ {kind: "Scroller", thumb: false, fit: true, touch: true, vertical: "hidden", style: "margin: 0;", components: [ {classes: "onyx-toolbar-inline", style: "white-space: nowrap;", components: [ {kind: "onyx.Button", content: "Back", ontap: "prevPanel"}, {kind: "onyx.Button", content: "Continue", ontap: "nextPanel"}, ]} ]} ]}, ], }, //PANEL TWO { kind:"Scroller", fit:true, horizontal: "hidden", components:[ { style:"padding:5px", components:[ { kind: "onyx.GroupboxHeader", content: "CASE DETAILS", }, ] }, {kind: "FittableColumns", noStretch: true, classes: "onyx-toolbar onyx-toolbar-inline", components: [ {kind: "Scroller", thumb: false, fit: true, touch: true, vertical: "hidden", style: "margin: 0;", components: [ {classes: "onyx-toolbar-inline", style: "white-space: nowrap;", components: [ {kind: "onyx.Button", content: "Back", ontap: "prevPanel"}, {kind: "onyx.Button", content: "Continue", ontap: "nextPanel"}, ]} ]} ]}, ], }, //PANEL THREE { kind:"Scroller", fit:true, horizontal: "hidden", components:[ { style:"padding:5px", components:[ { kind: "onyx.GroupboxHeader", content: "STAFF INFO", }, ] }, {kind: "FittableColumns", noStretch: true, classes: "onyx-toolbar onyx-toolbar-inline", components: [ {}, {kind: "Scroller", thumb: false, fit: true, touch: true, vertical: "hidden", style: "margin: 0;", components: [ {classes: "onyx-toolbar-inline", style: "white-space: nowrap;", components: [ {kind: "onyx.Button", content: "Back", ontap: "prevPanel"}, {kind: "onyx.Button", content: "Continue", ontap: "nextPanel"}, ]} ]} ]}, ], }, //PANEL FOUR { kind:"Scroller", fit:true, horizontal: "hidden", components:[ { style:"padding:5px", components:[ { kind: "onyx.GroupboxHeader", content: "ADD CASE ", }, ] }, { style:"padding:5px", components:[ { kind: "onyx.GroupboxHeader", content: "Patient Information", }, ] }, { style:"padding:5px", components:[ { kind: "onyx.GroupboxHeader", content: "Surgery Information", }, ] }, { style:"padding:5px", components:[ { kind: "onyx.GroupboxHeader", content: "Staff Information", }, ] }, {kind: "FittableColumns", noStretch: true, classes: "onyx-toolbar onyx-toolbar-inline", components: [ {kind: "Scroller", thumb: false, fit: true, touch: true, vertical: "hidden", style: "margin: 0;", components: [ {classes: "onyx-toolbar-inline", style: "white-space: nowrap;", components: [ {kind: "onyx.Button", content: "Back", ontap: "prevPanel"}, {kind: "onyx.Button", content: "Continue", ontap: "nextPanel"}, ]} ]} ] }, ], }, ]} ], panelArrangers: [ {name: "CardArranger", arrangerKind: "CardArranger"}, ], create: function() { this.inherited(arguments); this.panelCount=this.$.addCasePanels.getPanels().length; }, rendered: function() { this.inherited(arguments); }, prevPanel: function() { this.$.addCasePanels.previous(); console.log(this.$.addCasePanels.index); }, nextPanel: function() { this.$.addCasePanels.next(); console.log(this.$.addCasePanels.index); }, listSetupRow: function(inSender, inEvent) { console.log('item setup event', inEvent); }, clickItem: function(inSender, inEvent) { console.log('click event', inEvent); } });

Comments

  • For longer bits of code like this, we really prefer that you post to jsfiddle.net and post a link to that, especially posting working code.

    I've done that for you and put it up at http://jsfiddle.net/uaDn5/5/ -- I had to clean up the posted code quite a bit.

    onyx.SwipeableItem is still a work-in-progress control, so it's not guaranteed to work very well.

    The very large height of the first panel may be due to your using a enyo.List. The fittable layout might not be actually fitting things until after the initial arrangement, I've not had a chance to debug it.

  • I was going to use jsfiddle but time was arbitrarily made urgent. And so I completely agree as to the quality of the posted code; it's without refinement and was was posted against my own advice. Nevertheless, you arrived at the conclusions I found as well shortly after I posted it, so thanks for the applied knowledge, my friend.
Sign In or Register to comment.