Můj web

Jak na formulářový „autocomplete“ v ExtJS

Publikováno 26.9.2013

Formuláře v moderních prohlížečích mají tu příjemnou vlastnost, že si pamatují uživatelem vkládané údaje z minula. Jedná se o atribut autocomplete formulářového pole. Někdy to může velmi pomoci, pokud se například často přihlašujete do nějaké aplikace a vaše přihlašovací jméno je komplikované. Javascriptový framework ExtJS4 však tuto vlastnost potlačuje specifickým vytvářením formulářů. Jak ho donutit k očekávanému chování?

ExtJS defaultně vypíná autocomplete u formulářových polí. Vytvoříme si tedy speciální typ ACField, který si bude zadané hodnoty pamatovat.

Ext.define('MyApp.form.field.ACField', {
  extend: 'Ext.form.field.Text',
  alias: 'widget.acfield',
  initComponent: function() {
    Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) {
    if (Ext.isString(oneTpl)) {
      allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"');
    }
  });
  this.callParent(arguments);
  }
});

Jak je vidět jde o přepsání atributu formulářového pole. Dále potřebujeme nadefinovat, aby byl formulář skutečně HTML formulářem. K tomu využijeme autoEl:

xtype: 'form',
autoEl: {
  tag: 'form',
  action: './myaction.php',
  method: 'post'
},
defaults: {
  listeners: {
    specialkey: this.keyEnter
  }
}

Hodnota zadaná v poli autocomplete bude skutečně zapamatovaná ve chvíli, kdy dojde u formuláře k události submit. Je možné místo volání skriptu potlačit refresh stránky hodnotou javascript: void(0); v atributu action. Přidali jsme si také listener, který budeme potřebovat k odchycení stisku klávesy Enter – běžný způsob odesílání formuláře namísto kliknutí na submit button. A jak vypadá implementace listeneru?

keyEnter: function(field, e) {
  if (e.getKey() == e.ENTER) {
    var form = field.up('form').getForm();
    if (form.isValid()) {
      var button = field.up('form').down('button[name="submit"]');
      if (button) {
        button.fireEvent('click', button);
      }
    }
  }
}

Pokud došlo k stisku Enter a formulář je platný, vyvoláme akci click na tlačítku pro odeslání formuláře. Kontrola na validitu formuláře nám zajistí neodeslání formuláře už ve chvíli, kdy vybíráme z našeptávače hodnotu pomocí stisku Enter. (Jedná se pouze o prohlížeč FireFox. U ostatních prohlížečů nebylo v takovém případě zaznamenáno vyvolání obsluhy události stisku tlačítka.)

Obsloužíme si událost kliknutí na tlačítko a nakonec ještě zavoláme submit na formuláři. Jak už bylo řečeno, bez něj by se hodnota nezapamatovala. Submit můžeme volat např. jen v případě, že vložené hodnoty byly zvalidovány, takže se nám nebudou ukládat překlepy nebo jiné chybné hodnoty. Pokud by k tomu přece došlo – nebo pokud ladíme aplikaci, můžeme nežádoucí hodnoty vymazat v prohlížeči Chrome výběrem položky ze seznamu a stiskem kláves Shift + Del.

Komentáře

Komentáře jsou vypnuty.