hadv.de - Picker

Verwendung von Picker

Alle Eingaben bei Smartphone's und Tablet-PC's, ob nun normale Texteingaben, Zahleneingaben, Datumseingaben oder Auswahlentscheidungen, finden i.d.R. standardmässig im unteren Teil des Touch-Bildschirms statt. Deshalb existieren bei Smartphone's und Tablet-PC's statt DropDown-Listen sogenannte Picker. Mit Hilfe dieser Picker sind die Auswahlentscheidungen vorzunehmen. Hier wird nun eine allgemeine Implementierung eines Pickers mit einem Slot vorgestellt.

Genauso wie bei den DatePicker'n gilt, wird mit Sencha Touch gearbeitet, so kann der Einbau eines Picker's nach den Vorgaben des Framework's erfolgen. Bei der Migration von Excel liegt das Layout der Applikation als HTML-Code vor, sodass eine andere Art der Implementieren zweckmässig ist. Ziel ist es den Picker-Einbau automatisiert vornehmen zu können.

Normale Auswahlentscheidung mit einer DropDown-Liste

Eine Auswahlentscheidung kann normal mit einer DropDown-Liste vorgenommen werden. Die Auswahl erfolgt direkt in der Maske.

Picker 1

Das linke Bild zeigt den Picker im Einsatz. Die Auswahl erfolgt im unteren Bereich des Touch-Bildschirms.

Picker 2

Auch dieses Bild zeigt einem Picker im Einsatz. Beide Picker sind Instanzen der gleichen JavaScript-Klasse.

HTML-Code

Folgender Code zeigt die Einbettung des Picker's in der HTML-Datei.

<div class='picker'>
  <span>
    <input  class='innerOutputText' name="prf02_1_4_5" id="prf02_1_4_5" type="text" readonly="readonly" >
    <button class='selectArrowDown' name="arrowDownBtn" onclick="onShowPicker(this);" tabindex="1" />
  </span>
</div>

Implementierung des Picker's in JavaScript

Die Klassenimplementierung des Picker's zeigt folgender Code in JavaScript.

Select1Picker = Ext.extend(Object, {
    htmlRefObj : {},
    constructor: function(config) {
        Ext.apply(this, config || {});
        if (this.name == undefined) {
            throw "Es muss ein Name angegeben werden (name)!";
        }
        if (this.urlStore == undefined) {
            throw "Es muss eine URL fuer den Store angegeben werden (urlStore)!";
        }
        if (this.keyName == undefined) {
            throw "Es muss der Name des Key-Feldes angegeben werden (keyName)!";
        }
        if (this.modelFields == undefined) {
            throw "Es fehlt die Modelfelder (modelFields)!";
        }
        if (this.fieldsMap == undefined) {
            throw "Es fehlt das Mapping (fieldsMap)!";
        }
        if (this.onOwnChangeFn == undefined) {
            throw "Es fehlt die individuelle Change-Funktion !";
        }
        this.model = Ext.regModel(this.name, {
               fields: this.modelFields
        });
        this.storeProfil = new Ext.data.Store({
           model: this.model,
           proxy: {
              type: 'ajax',
              url: this.urlStore
          }
        });
	    this.storeProfil.load();
	    this.selectPicker = new Ext.Picker({
	       slots: [ {
	          align       : 'center',
	          name        : 'Choice',
	          valueField  : this.keyName,
	          displayField: this.keyName,
	          value       : '',
	          store       : this.storeProfil
	       } ],
	       listeners: {
	         change: this.onPickerChange,
	         scope: this
	       }
	     });
        },
	setValues : function() {
	   var i, tmpMapObj, tmpFrom, tmpTo, tmpVal;
	   var iVal = this.htmlRefObj.value;
 	   var tmpIdx = this.storeProfil.findExact(this.keyName, iVal);
	   if (tmpIdx < 0) {
		  tmpIdx = this.storeProfil.find(this.valueField, iVal);
	   }
	   if (tmpIdx >= 0) {
	   	  var tmpItem = this.storeProfil.data.items[tmpIdx];
	      for (i = 0; i < this.fieldsMap.length; i++) {
	   		 tmpMapObj = this.fieldsMap[i];
			 tmpFrom = tmpMapObj.from;
  		 	 tmpTo = tmpMapObj.to;
			 if (tmpFrom != "") {
			 	tmpVal = tmpItem.data[tmpFrom];
			 }
			 else {
			    tmpVal = "";
			 }
			 document.getElementById(tmpTo).value = tmpVal;
	   	  }
	   }
	   else {
	      for (i = 0; i < this.fieldsMap.length; i++) {
		  	tmpMapObj = this.fieldsMap[i];
		  	tmpTo = tmpMapObj.to;
		  	document.getElementById(tmpTo).value = "";
		  }
	   }
	},
    onShowPicker : function(iObj) {
       var tmpParent = iObj.parentElement;
       var tmpFirstChild = tmpParent.firstElementChild;
       var tmpValStr = tmpFirstChild.value;
       this.htmlRefObj = tmpFirstChild; 
       this.selectPicker.show();
    },
    onPickerChange : function(iPicker, iValue) {
       var iVal = iValue.Choice;
       this.htmlRefObj.value = iVal;
       this.setValues();
       this.onOwnChangeFn(this.htmlRefObj, iVal);
    }
});

Copyright © 11.03.2011 hadv.de. All Rights Reserved.