Ext.ux.form.LovField

[dantheman]

Yeah, sometimes tihs error occur but I don't know why,
refresh the page, solve the problem

Still barfs in IE7 (after multiple ctl-F5s), but works in FF2.

Very nice work!
Many thanks,
--dan

[madrabaz]

I thing this occur because I send js and css files as a gz format (make an experiment)

I will try to fix it tomorrow,

Thanks,

[tavox]

nice extension

Best regards

[denkoo]

I will use your extension in my project... thanks for saving time on share it...

I hope that my sharing have same interest for other than this extension ))

thanks a lot

[pregool]

hi mr madrabaz,

i've been using LovField in form and it's perfect. but problem came up when i using it in grid.
when the lov window show and i select 1 record and then click 'select' button, nothing show in lovField value. but if i click again, the old value is show in lovField. here's my code. could u help me out with this. thanks a lot!

// image url
Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';

Ext.onReady(function(){
    
  // data store for LOV
  var dsLov = new Ext.data.GroupingStore({
    proxy: new Ext.data.HttpProxy({
      url: "lov.php",
      method: 'POST'
    }),
    baseParams: {task: 'read'},
    reader: new Ext.data.JsonReader({
      root: 'results',      
    },[
      {name: 'nopeg'},{name: 'nama'}
    ]),
    sortInfo: {field: 'nama'}
  });  
  
  // column model for LOV
  var cmLov = new Ext.grid.ColumnModel([{
    id:'nopeg',
    header: 'NOPEG',
    dataIndex: 'nopeg',
    width: 80
  },{
    id:'nama',
    header: 'Nama',
    dataIndex: 'nama',
    width: 200
  }]);
  
  // grid for LOV
  var grdLov = new Ext.grid.GridPanel({
    store: dsLov,
    cm: cmLov,
    width: 500,
    height: 150
  });     
  
  // LOV Field
  var lovField = new Ext.ux.form.LovField({    
    view: grdLov,
    lovTitle: 'Find Employee',
    valueField: 'nopeg',
    displayField: 'nopeg'    
  });
  
  var ds = new Ext.data.GroupingStore({
    proxy: new Ext.data.HttpProxy({
      url: "lov.php",
      method: 'POST'
    }),
    baseParams: {task: 'read'},
    reader: new Ext.data.JsonReader({
      root: 'results',      
    },[
      {name: 'nopeg'},{name: 'nama'}
    ]),
    sortInfo: {field: 'nama'}
  });
  ds.load(); 
  
  var cm = new Ext.grid.ColumnModel([{
    id:'nopeg',
    header: 'NOPEG',
    dataIndex: 'nopeg',
    width: 80,
    editor: lovField
  },{
    id:'nama',
    header: 'Nama',
    dataIndex: 'nama',
    width: 200,
    editor: new Ext.form.TextField({
      allowBlank: true
    })
  }]);
  
  var grd = new Ext.grid.EditorGridPanel({
    store: ds,
    cm: cm,
    width: 500,
    height: 300,
    clicksToEdit: 1
  }); 
  
  grd.render('grid-example');
}); 

[madrabaz]

@pregool : I'll check it tomorrow

[xpurpur]

If you need to pass parameters when loading grid in LOV field (if you needs to load your grid by POST or need to use PagingToolbar), patch is simple:

Ext.ux.form.LovField = Ext.extend(Ext.form.TriggerField, {
    /**
     * .....
     * LovFields Parameters goes here 
     * .....
     */
    // Request params for loading grid
    requestParams: false, 

Then (near 211 line) find:

        // Store Load
        if (!this.isStoreLoaded) {
            this.view.store.load();
            this.isStoreLoaded = true;
        } else if (this.alwaysLoadStore === true) {
            this.view.store.reload();
        } 

and insert parameters to store load:

        // Store Load
        if (!this.isStoreLoaded) {
            this.view.store.load(this.requestParams);
            this.isStoreLoaded = true;
        } else if (this.alwaysLoadStore === true) {
            this.view.store.reload(this.requestParams);
        } 

How to use:

{
....// other config options
          xtype:         'xlovfield',
          id:              'project-customer',
          fieldLabel:    'Customer',
          requestParams: {params:{start: 0, 
                                              limit: Config.Pager.OnPage.CUSTOMERS}},
....// other config options
} 

2madrabaz
Thank you for sharing such useful extension. It very simplifies my work.

[xpurpur]

2 madrabaz

Is this the way to set value in the LOV field?
I mean - when I'm creating the "Edit" form I need to set value in this field.

I update your extension and add two methods:

    setHiddenValue: function(aHiddenValue)
    {
      this.hiddenField.setAttribute('value', aHiddenValue);
    },
    
    setDisplayValue: function(aDisplayValue)
    {
      this.setValue(aDisplayValue);
    } 

I must use this methods only after render, because hidden field creates when render component.

So, the problem:
All values correctly fills (hidden and display fields, I see it in Firebug) after render using this methods, but when I opens grid - record no selects automatically. And field validation error occurs (component don't understand, that values not human selected, but filled by my script)

What I must do also?

[tsenyi]

nice work, very useful ,

tag it (query options)

[sinma]

I really "lov" this extension! Very nice!

Just one thing: when you click into LOV Grid text area (in the form), it shows a javascript error (tested on IE7 and FF).

Regards.