Oct 202009
 

Combo Grid

Combo Grid

Ini adalah pengembangan dari source yang kemaren saya post. yaitu ComboBox TwinTrigger dengan combo kita akan membuat saat tombol combo di clik akan memunculkan grid di bawah combo tersebut.

Ide ini terpikirkan oleh saya setelah saya beberapa saat lalu pernah membuat combo multi colom dengan java swing, nah ternyata teorinya sama juga di sini, yaitu menggunakan PopUpMenu.

Ok langsung saja langkah – langkahnya seperti berikut :

  1. Buat grid dari ExtJs
  2. Buat menu juga
  3. isi menu dengan panel yang di dalam panel kita addkan komponen grid yang telah kita buat.

ok mudahkan lihat source di bawah ini :

var helpGrid = new Ext.menu.Menu();
helpGrid.add(
  new Ext.Panel({
    title:'CARI DATA',
    layout:'fit',
    buttonAlign:'left',
    modal:true,
    width:600,
    height:400,
    closeAction:'hide',
    plain: true,
    //items: [gridNPWPD1],
    buttons: [{
      text: 'BATAL',
      handler: function(){
        helpGrid.hide();
      }
    }]
  })
);

kita tinggal membuat combo yang akan memanggil popup menu tersebut berikut source code nya :

Ext.ux.TwinCombo = Ext.extend(Ext.form.ComboBox,{
  initComponent: Ext.form.TwinTriggerField.prototype.initComponent,
  getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
  initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
  onTrigger1Click: Ext.form.ComboBox.prototype.onTriggerClick,
  trigger1Class: Ext.form.ComboBox.prototype.triggerClass,
  onTrigger2Click : function(){
      helpGrid.showAt([this.getPosition()[0],this.getPosition()[1]+this.getHeight()]);
  },
  validationEvent:false,
  validateOnBlur:false,
  trigger1Class:'x-form-clear-trigger',
  trigger2Class:'x-form-search-trigger',
  hideTrigger1:true
});

Ok jadi deh combo kita silakan kembangkan , semoga membantu ….

Facebook Comments

  111 Responses to “Combo multi colom with ExtJs”

  1. mbah… minta tutorialnya untuk menampilkan data di grid.misalkan kode propinsi adalah 1. maka yg tampil di gridnya adalah propinsi jabar… gtu loh mbah…..

  2. @Mbah bisa kasih sample demo + src utk yg extjs 4 ? 😀 Maklum mbah, ane masih baru di extjs 😀

  3. @ Martinus Ady H:
    Wah apa ngak keliru nih mas, saya malah ngajarin master

  4. @Mbahsomo: Maklum mas, udah stuck mas 😛 Lagian saya kan juga masih baru di ExtJS 🙂

  5. @ Martinus Ady H:
    Ok lah mas insa’ Allah nanti saya buatkan tutorialnya deh

  6. […] lagi dengan mbahsomo, Kali ini saya akan melanjutkan, tutorial saya tentang Combo Multi column dengan ExtJs yang masih menggunakan ExtJs 3 ke bawah, kali ini saya akan sedikit berbagi dengan teman – […]

  7. Maturity is a bright but not dazzling glory, a mellow sound but not greasy ears, a need for others detect facial expressions of calm, one finally stopped the prayer of the complaint to the surrounding atmosphere, a disregard Hongnao smile, a wash of extreme indifference, a not quiet thick, one is not steep height.

  8. Alliedpackers.in provides – Packers and Movers, Loading Uploading services, Car Transportation service providers in Lucknow, Mumbai, Kanpur, Agra, Jaipur, Rewari and All over india.for more infi please visit – http://www.alliedpackers.in/about_us.html

  9. Alliedpackers.inm provides – Packers and Movers, Loading Uploading services, Car Transportation service providers in Delhi,Noida,Gurgaon, Faridabad, Ghaziabad and All over India.For more info please visit- http://www.alliedpackers.in/

  10. Saya baru beberapa bulan mengenal Extjs dan sangat terkesan dengan kemudahan yang ditawarkan
    Thanks tulisannya

  11. mbah kalo source code untuk menambahkan data ke dalam colum multi tersebut gimana ya ?

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)