PDA

View Full Version : Ext.ux.form.LovField



madrabaz
12 Feb 2008, 9:23 AM
Hi,
I wrote a form extension that works like Oracle's LOV(list of values).

Demo : http://madrabaz.com/ext/ux/LovField/demo/

As an improvment, I will add some public events and methods. Please, feel free to make a suggestion.

kenshin
12 Feb 2008, 10:39 AM
Really a nice work!

...but with IE 6 it don't work very well :(

galdaka
12 Feb 2008, 12:30 PM
Guau!!

Works fine for me in IE6 and FF2.

Excellent work!!

Jacky
12 Feb 2008, 5:43 PM
very nice!
It's very useful for my work.
Thx

george.antoniadis
13 Feb 2008, 3:54 AM
WOA! Damn nice mate!

If someone adds checkboxes instead of ctrl+selection I'll be in LOVe!

madrabaz
13 Feb 2008, 4:14 AM
WOA! Damn nice mate!

If someone adds checkboxes instead of ctrl+selection I'll be in LOVe!

You can use Ext.grid.CheckboxSelectionModel as a grid selection model and
set Ext.DataView simpleSelect option to true.

From Ext.grid.CheckboxSelectionModel documentation:


A custom selection model that renders a column of checkboxes that can be toggled to select or deselect rows.

From Ext.DataView documentation:

simpleSelect : Boolean
True to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl, false to force the user to hold Ctrl or Shift to select more than on item (defaults to false).

you're welcome

sinma
13 Feb 2008, 5:38 AM
Very nice and useful extension!

Thanks for share it.

khatuido
14 Feb 2008, 8:24 AM
Looks interesting but the example doesn't work in ie6, is there a reason?
I wanted something like that but i need can write in the field and one the event blur see if the element is in the list. Can we change easily it for do it?

dantheman
14 Feb 2008, 9:22 AM
I get invalid character errors loading the demo page,
culminating in Ext not defined on line 81...?

I took a look at the source, and it seems in order ...
--dan

madrabaz
14 Feb 2008, 10:08 AM
I get invalid character errors loading the demo page,
culminating in Ext not defined on line 81...?

I took a look at the source, and it seems in order ...
--dan
Yeah, sometimes tihs error occur but I don't know why,
refresh the page, solve the problem

dantheman
14 Feb 2008, 10:36 AM
Yeah, sometimes tihs error occur but I don't know why,
refresh the page, solve the problemStill barfs in IE7 (after multiple ctl-F5s), but works in FF2.

Very nice work!
Many thanks,
--dan

madrabaz
14 Feb 2008, 11:39 AM
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
14 Feb 2008, 2:16 PM
nice extension =D>

Best regards

denkoo
14 Feb 2008, 7:52 PM
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 =D>

pregool
25 Feb 2008, 8:28 PM
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
26 Feb 2008, 3:03 AM
@pregool : I'll check it tomorrow

xpurpur
8 Mar 2008, 2:26 PM
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
10 Mar 2008, 12:37 AM
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
12 Mar 2008, 8:03 PM
nice work, very useful ,

tag it (query options)

sinma
22 Apr 2008, 2:48 AM
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.

manube
28 Apr 2008, 8:02 AM
Hello,

First, many thanks for this very helpful extension.

I've got the same pb than xpurpur (perhaps did you resolve it??) : I don't manage to set the default values when editing... Is there a 'native' easy way to do that???

Thanks

Manu

dverkade
5 May 2008, 6:45 AM
I've extended the LOVfield so you can give the "edit" values, see below. In the config you can add displayValue (displays selected values in the text field) and hiddenValue (sets the hidden value, ID's, to be posted.). When the popup grid appears, the values in hiddenValue will be selected in the grid.

Does anyone have an extension so that the selected items can be ordered? I need to order the selected items.



Ext.namespace('Ext.ux.form');

Ext.ux.form.LovField = Ext.extend(Ext.form.TriggerField, {
defaultAutoCreate : {tag: "input", type: "text", size: "16",style:"cursor:default;", autocomplete: "off"},
triggerClass: 'x-form-search-trigger',
validateOnBlur: false,

// LOV window width
lovWidth: 300,
// LOV window height
lovHeight: 300,
// LOV window title
lovTitle: '',
// Multiple selection is possible?
multiSelect: false,

// If this option is true, data store reloads each time the LOV opens
alwaysLoadStore: false,

// LOV data provider, intance of Ext.grid.GridPanel or Ext.DataView
view: {},

displayValue: '',
hiddenValue: '',

// Which data store field will use for return
valueField: 'id',
// Which data store field will use for display
displayField: 'id',
// If multiple items are selected, they are joined with this character
valueSeparator: ',',
displaySeparator: ',',

// LOV window configurations
// autoScroll, layout, bbar and items configurations are not changed by this option
windowConfig: {},

showOnFocus : false,

minItem : 0,
minItemText : 'The minimum selected item number for this field is {0}',

maxItem : Number.MAX_VALUE,
maxItemText : 'The maximum selected item number for this field is {0}',

// Private
isStoreLoaded: false,
// Private
selections: [],
// Private
selectedRecords: [],

initComponent: function(){
if((this.view.xtype != 'grid' && this.view.xtype != 'dataview') &&
(!(this.view instanceof Ext.grid.GridPanel) && !(this.view instanceof Ext.DataView))){
throw "Ext.ux.form.LovField.view option must be instance of Ext.grid.GridPanel or Ext.DataView!";
}

Ext.ux.form.LovField.superclass.initComponent.call(this);

this.viewType = this.view.getXType();
if(this.viewType == 'grid' && !this.view.sm){
this.view.sm = this.view.getSelectionModel();
}

if(this.viewType == 'grid'){
this.view.sm.singleSelect = !this.multiSelect;
}else{
this.view.singleSelect = !this.multiSelect;
this.view.multiSelect = this.multiSelect;
}

if(Ext.type(this.displayField) == 'array'){
this.displayField = this.displayField.join('');
}
if (/<tpl(.*)<\/tpl>/.test(this.displayField) && !(this.displayFieldTpl instanceof Ext.XTemplate)) {
this.displayFieldTpl = new Ext.XTemplate(this.displayField).compile();
}

if(Ext.type(this.qtipTpl) == 'array'){
this.qtipTpl = this.qtipTpl.join('');
}
if(/<tpl(.*)<\/tpl>/.test(this.qtipTpl) && !(this.qtipTpl instanceof Ext.XTemplate) ){
this.qtipTpl = new Ext.XTemplate(this.qtipTpl).compile();
}

// If store was auto loaded mark it as loaded
if (this.view.store.autoLoad) {
this.isStoreLoaded = true;
}

},

onRender: function(ct, position){

if (this.isRendered) {
return;
}

this.readOnly = true;
if(this.textarea){
this.defaultAutoCreate = {tag: "textarea", style:"cursor:default;width:124px;height:65px;", autocomplete: "off", value: this.displayValue};
this.value = this.displayValue;
this.displaySeparator = '\n';
}

Ext.ux.form.LovField.superclass.onRender.call(this, ct, position);

this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden',
name: this.el.dom.getAttribute('name'), id: this.id + '-hidden'}, 'before', true);
this.hiddenField.value = this.hiddenValue;

// prevent input submission
this.el.dom.removeAttribute('name');

if(this.showOnFocus){
this.on('focus',this.onTriggerClick,this);
}

this.renderWindow();
this.isRendered = true;
},

validateValue : function(value){
if( Ext.ux.form.LovField.superclass.validateValue.call(this, value)){
if(this.selectedRecords.length < this.minItem){
this.markInvalid(String.format(this.minItemText, this.minItem));
return false;
}
if(this.selectedRecords.length > this.maxItem){
this.markInvalid(String.format(this.maxItemText, this.maxItem));
return false;
}
}else{
return false;
}
return true;
},

getSelectedRecords : function(){

if(this.viewType == 'grid'){
this.selections = this.selectedRecords = this.view.sm.getSelections();
}else{
this.selections = this.view.getSelectedIndexes();
this.selectedRecords = this.view.getSelectedRecords();
}

return this.selectedRecords;
},

clearSelections : function(){
return (this.viewType == 'grid')? this.view.sm.clearSelections() : this.view.clearSelections();
},

select : function(selections){
if(this.viewType == 'grid'){
if(selections[0] instanceof Ext.data.Record){
this.view.sm.selectRecords(selections);
}else{
this.view.sm.selectRows(selections);

}
}else{
this.view.select(selections);
}
},

onSelect: function(){
var d = this.prepareValue(this.getSelectedRecords());
var returnValue = d.hv ? d.hv.join(this.valueSeparator) : '';
var displayValue = d.dv ? d.dv.join(this.displaySeparator) : '';

Ext.form.ComboBox.superclass.setValue.call(this, displayValue);

this.hiddenField.setAttribute('value', returnValue);

if(Ext.QuickTips){ // fix for floating editors interacting with DND
Ext.QuickTips.enable();
}
this.window.hide();
},

initSelect: function() {
rows = this.hiddenValue.split(''+this.valueSeparator);
var records = new Array();

for(i=0;i<rows.length;i++) {
record = this.view.getStore().getById(rows[i]);
records.push(record);
}

this.view.sm.selectRecords(records, true);
},

prepareValue:function(sRec){
this.el.dom.qtip = '';
if (sRec.length > 0) {
var vals = {"hv": [],"dv": []};
Ext.each(sRec, function(i){
vals.hv.push(i.get(this.valueField));
if (this.displayFieldTpl) {
vals.dv.push(this.displayFieldTpl.apply(i.data));
} else {
vals.dv.push(i.get(this.displayField));
}

if(this.qtipTpl){
this.el.dom.qtip += this.qtipTpl.apply(i.data);
}

}, this);
return vals;
}
return false;
},

getValue:function(){
var v = this.hiddenField.value;
if(v === this.emptyText || v === undefined){
v = '';
}
return v;
},

onTriggerClick: function(e){

this.renderWindow();
this.window.show();
},

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

this.windowConfig = Ext.apply(this.windowConfig,
{
title: this.lovTitle,
width: this.lovWidth,
height: this.lovHeight,
modal: true,
autoScroll: true,
layout: 'fit',
bbar: [
{text: 'Annuleren', handler: function(){
this.select(this.selections);
this.window.hide();
},scope: this},
{text: 'Clear', handler: function(){this.clearSelections();},scope: this},
'->',
{text: 'Selecteren',handler: this.onSelect,scope: this}
],
items: this.view
},{shadow: false, frame: true});

if(!this.window){
this.window = new Ext.Window(this.windowConfig);

//this.window.setPagePosition(e.xy[0] + 16, e.xy[1] + 16);

this.window.on('beforeclose', function(){
this.window.hide();
return false;
}, this);

this.window.on('hide', this.validate, this);
this.view.on('dblclick', this.onSelect, this);
this.view.on('render', this.initSelect, this);
}
}
});

Ext.reg('xlovfield', Ext.ux.form.LovField);

ry.extjs
14 May 2008, 9:09 AM
This looks excellent. Nice work!

Quick question: In the demo, for the 'LOV DataView' it brings up a DataView with pictures. Is there built-in functionality to display an image in the form as the field, instead of a textbox?

I see that you can use an XTemplate, but it seems as though that is to format the text in the textfield and not to create a new template for the field itself.

Would be nice to click on the image within the form and have it bring up an Image Browser to change it. Just a thought...

manube
16 May 2008, 2:38 AM
Thanks a lot dverkade for the hidden and display values!! =D>
I've just tested it and it works perfectly.

Thanks again everybody!!

xpurpur
16 May 2008, 5:52 AM
2 manube

Please, provide us some examples :)
How do you using extension (set values etc.)

manube
20 May 2008, 5:42 AM
So this is my sample :



new Ext.form.FormPanel({
frame: true,
title: 'Web sites',
style: 'padding-top: 10px',
defaults: { bodyStyle:'padding:2px', labelStyle: 'width:150px;font-weight: bold;margin-right: 5px;font-size:90%;' },
labelAlign: 'right',
items: [
{
xtype: 'xlovfield',
fieldLabel: 'Web sites',
id: 'websites',
name: 'websites',
allowBlank: true,
multiSelect: true,
lovTitle : 'Select Web sites',
lovHeight : 250,
lovWidth : 500,
width: fieldWidth,
minItem : 0,
valueField: 'id',
displayField: 'text',
displayValue: 'Toto', // I load both data from a jsp
hiddenValue: '18', // I didn't yet try to set these values from js, but I will have a look
textarea : true,
showOnFocus : true,
view : new Ext.grid.GridPanel({
id: 'websites-grid',
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: PATH_WEB_APPLICATION+'/websites.xml'}),
reader: new Ext.data.XmlReader({
record: 'website',
id: 'id',
fields: [
{name: 'id', type: 'string'},
{name: 'text', type: 'string'},
{name: 'url', type: 'string'}
]
})
}), cm: new Ext.grid.ColumnModel([
new Ext.grid.CheckboxSelectionModel(),
{id: 'id', header: 'Identifier', hidden: true, dataIndex: 'id'},
{header: 'Website', autoWidth: true, dataIndex: 'text'},
{header: 'URL', autoWidth: true, dataIndex: 'url'}
]), sm: new Ext.grid.CheckboxSelectionModel({
singleSelect:false,
listeners:{
beforerowselect: function(sm, row_index, keepExisting, record){
sm.suspendEvents();
if (sm.isSelected(row_index))
sm.deselectRow(row_index);
else
sm.selectRow(row_index, true);
sm.resumeEvents();
return false;
}
}
}), border: true,
viewConfig: { forceFit:true },
stripeRows: true
})
}
]
})


I hope it will help you.

PS: I've managed to link this field data to a combobox (I select a company in a combobox and then its contacts in this field). If you need I can provide you a sample, but I don't managed to init this field from a form.getForm().load(...); ... if someboy has an idea... it can be usefull !!! :)

bt_bruno
21 May 2008, 2:43 AM
Form stuff are always good! Nice extension! =D>

manube
30 May 2008, 7:41 AM
Hello,

I've added one method to this great form field which allow to dynamically select values from javascript.
I called it selectValues accepting 2 arrays as params, the first containing the ids and the seconds the values to display.

Here is my code :

Ext.namespace('Ext.ux.form');


Ext.namespace('Ext.ux.form');

Ext.ux.form.LovField = Ext.extend(Ext.form.TriggerField, {
defaultAutoCreate : {tag: "input", type: "text", size: "16",style:"cursor:default;", autocomplete: "off"},
triggerClass: 'x-form-search-trigger',
validateOnBlur: false,

// LOV window width
lovWidth: 300,
// LOV window height
lovHeight: 300,
// LOV window title
lovTitle: '',
// Multiple selection is possible?
multiSelect: false,

// If this option is true, data store reloads each time the LOV opens
alwaysLoadStore: false,

// LOV data provider, intance of Ext.grid.GridPanel or Ext.DataView
view: {},

displayValue: '',
hiddenValue: '',

// Which data store field will use for return
valueField: 'id',
// Which data store field will use for display
displayField: 'id',
// If multiple items are selected, they are joined with this character
valueSeparator: ',',
displaySeparator: ',',

// LOV window configurations
// autoScroll, layout, bbar and items configurations are not changed by this option
windowConfig: {},

showOnFocus : false,

minItem : 0,
minItemText : 'The minimum selected item number for this field is {0}',

maxItem : Number.MAX_VALUE,
maxItemText : 'The maximum selected item number for this field is {0}',

// Private
isStoreLoaded: false,
// Private
selections: [],
// Private
selectedRecords: [],

initComponent: function(){
if((this.view.xtype != 'grid' && this.view.xtype != 'dataview') &&
(!(this.view instanceof Ext.grid.GridPanel) && !(this.view instanceof Ext.DataView))){
throw "Ext.ux.form.LovField.view option must be instance of Ext.grid.GridPanel or Ext.DataView!";
}

Ext.ux.form.LovField.superclass.initComponent.call(this);

this.viewType = this.view.getXType();
if(this.viewType == 'grid' && !this.view.sm){
this.view.sm = this.view.getSelectionModel();
}

if(this.viewType == 'grid'){
this.view.sm.singleSelect = !this.multiSelect;
}else{
this.view.singleSelect = !this.multiSelect;
this.view.multiSelect = this.multiSelect;
}

if(Ext.type(this.displayField) == 'array'){
this.displayField = this.displayField.join('');
}
if (/<tpl(.*)<\/tpl>/.test(this.displayField) && !(this.displayFieldTpl instanceof Ext.XTemplate)) {
this.displayFieldTpl = new Ext.XTemplate(this.displayField).compile();
}

if(Ext.type(this.qtipTpl) == 'array'){
this.qtipTpl = this.qtipTpl.join('');
}
if(/<tpl(.*)<\/tpl>/.test(this.qtipTpl) && !(this.qtipTpl instanceof Ext.XTemplate) ){
this.qtipTpl = new Ext.XTemplate(this.qtipTpl).compile();
}

// If store was auto loaded mark it as loaded
if (this.view.store.autoLoad) {
this.isStoreLoaded = true;
}

},

onRender: function(ct, position){
if (this.isRendered) {
return;
}

this.readOnly = true;
if(this.textarea){
this.defaultAutoCreate = {tag: "textarea", style:"cursor:default;", autocomplete: "off", value: this.displayValue};
//Manu - this.defaultAutoCreate = {tag: "textarea", style:"cursor:default;width:124px;height:65px;", autocomplete: "off", value: this.displayValue};
this.value = this.displayValue;
this.displaySeparator = '\n';
}

Ext.ux.form.LovField.superclass.onRender.call(this, ct, position);

this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden',
name: this.el.dom.getAttribute('name'), id: this.id + '-hidden'}, 'before', true);
this.hiddenField.value = this.hiddenValue;

// prevent input submission
this.el.dom.removeAttribute('name');

if(this.showOnFocus){
this.on('focus',this.onTriggerClick,this);
}

this.renderWindow();
this.isRendered = true;
},

validateValue : function(value){
if( Ext.ux.form.LovField.superclass.validateValue.call(this, value)){
if(this.selectedRecords.length < this.minItem){
this.markInvalid(String.format(this.minItemText, this.minItem));
return false;
}
if(this.selectedRecords.length > this.maxItem){
this.markInvalid(String.format(this.maxItemText, this.maxItem));
return false;
}
}else{
return false;
}
return true;
},

getSelectedRecords : function(){
if(this.viewType == 'grid'){
this.selections = this.selectedRecords = this.view.sm.getSelections();
}else{
this.selections = this.view.getSelectedIndexes();
this.selectedRecords = this.view.getSelectedRecords();
}

return this.selectedRecords;
},

clearSelections : function(){
return (this.viewType == 'grid')? this.view.sm.clearSelections() : this.view.clearSelections();
},

select : function(selections){
if(this.viewType == 'grid'){
if(selections[0] instanceof Ext.data.Record){
this.view.sm.selectRecords(selections);
}else{
this.view.sm.selectRows(selections);

}
}else{
this.view.select(selections);
}
},

selectValues: function(hv, dv) {
var returnValue = hv ? hv.join(this.valueSeparator) : '';
var displayValue = dv ? dv.join(this.displaySeparator) : '';
Ext.form.ComboBox.superclass.setValue.call(this, displayValue);

this.hiddenField.setAttribute('value', returnValue);
this.hiddenValue = returnValue;

if(Ext.QuickTips){ // fix for floating editors interacting with DND
Ext.QuickTips.enable();
}

try
{
this.initSelect();
} catch(e){/* Will be thrown on first load and I don't know why :-/*/}
},

onSelect: function(){
var d = this.prepareValue(this.getSelectedRecords());
var returnValue = d.hv ? d.hv.join(this.valueSeparator) : '';
var displayValue = d.dv ? d.dv.join(this.displaySeparator) : '';

Ext.form.ComboBox.superclass.setValue.call(this, displayValue);

this.hiddenField.setAttribute('value', returnValue);

if(Ext.QuickTips){ // fix for floating editors interacting with DND
Ext.QuickTips.enable();
}
this.window.hide();
},

initSelect: function() {
rows = this.hiddenValue.split(''+this.valueSeparator);
var records = new Array();

for(i=0;i<rows.length;i++) {
record = this.view.getStore().getById(rows[i]);
if(record)
records.push(record);
}
this.view.sm.selectRecords(records, false);
},

prepareValue:function(sRec){
this.el.dom.qtip = '';
if (sRec.length > 0) {
var vals = {"hv": [],"dv": []};
Ext.each(sRec, function(i){
vals.hv.push(i.get(this.valueField));
if (this.displayFieldTpl) {
vals.dv.push(this.displayFieldTpl.apply(i.data));
} else {
vals.dv.push(i.get(this.displayField));
}

if(this.qtipTpl){
this.el.dom.qtip += this.qtipTpl.apply(i.data);
}

}, this);
return vals;
}
return false;
},

getValue:function(){
var v = this.hiddenField.value;
if(v === this.emptyText || v === undefined){
v = '';
}
return v;
},

onTriggerClick: function(e){

this.renderWindow();
this.window.show();
},

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

this.windowConfig = Ext.apply(this.windowConfig,
{
title: this.lovTitle,
width: this.lovWidth,
height: this.lovHeight,
modal: true,
autoScroll: true,
closable: false, // Manu
layout: 'fit',
bbar: [
{text: 'Cancel', handler: function(){
this.select(this.selections);
this.window.hide();
},scope: this},
{text: 'Clear', handler: function(){this.clearSelections();},scope: this},
'->',
{text: 'Select',handler: this.onSelect,scope: this}
],
items: this.view
},{shadow: false, frame: true});

if(!this.window){
this.window = new Ext.Window(this.windowConfig);

//this.window.setPagePosition(e.xy[0] + 16, e.xy[1] + 16);

this.window.on('beforeclose', function(){
this.window.hide();
return false;
}, this);

this.window.on('hide', this.validate, this);
this.view.on('dblclick', this.onSelect, this);
this.view.on('render', this.initSelect, this);
}
}
});

Ext.reg('xlovfield', Ext.ux.form.LovField);

I've updated the initSelect method to be able to dynamically empty the list

this.view.sm.selectRecords(records, false /*instead of true*/);

Manu

tmartinez
2 Jun 2008, 2:18 AM
Hello,
I have exactly the same pb and i really don't see how can i solve it !
That will be very great if someone could help me !
Thanks you !


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');
});

Joyfulbob
11 Jun 2008, 5:52 AM
[QUOTE=madrabaz;122799]Hi,
I wrote a form extension that works like Oracle's LOV(list of values).

Demo : http://madrabaz.com/ext/ux/LovField/demo/
QUOTE]

Thanks for the great extension!

I tried it in a field defined as the following and the trigger icon does not appear. What am I missing?



SITS1field = new Ext.form.TextField({
id: 'SITS1field',
name:'SITS1',
fieldLabel: 'Store# 1',
maxLength: 8,
style: {textTransform: "uppercase"},
allowBlank: true,
width:80,
xtype: 'xpromptfield',
promptTitle: 'Select Site from Revision list',
promptHeight: 250,
multiSelect: false,
promptWidth: 400,
minItem: 1,
maxItem: 1,
valueField: 'SITID',
displayField: 'SITID',
textarea : false,
showOnFocus: true,
view: hPmtGrid
});

I have it working if the field is defined inside the Form so I now everything is OK. It's just when I define the field as a var outside of the Form does it not render the trigger icon.

Thanks in advance!

flatburger
14 Jul 2008, 7:34 AM
can i hve the source in .zip so we can use it here..

the madrabaz.com go to go daddy now.

ajaxvador
15 Aug 2008, 5:37 AM
demo ?

uygarpe
3 Sep 2008, 2:27 PM
demo ?

I remember him saying he would be joining the army for the mandatory military service (yes, it is mandatory here in Turkey). So unless we hear from him it seems that the demo site will be down for some time.

manube
4 Sep 2008, 5:54 AM
Hello,
I've updated the getValue() method because of a bug with EXtjs 2.2.
I undestood that with the version 2.2, the method initComponent (from parent class) call the getValue method what throw an exception because the attribute "hiddenField" is only created "onRender". So I updated as following :

getValue:function(){
if(this.hiddenField)
{
var v = this.hiddenField.value;
if(v === this.emptyText || v === undefined){
v = '';
}
return v;
}
else
return '';
}


Please tells me if I'm right or wrong or if you have already done another fix.

Thanks

ajaxvador
4 Sep 2008, 6:17 AM
Hello,
I've updated the getValue() method because of a bug with EXtjs 2.2.
I undestood that with the version 2.2, the method initComponent (from parent class) call the getValue method what throw an exception because the attribute "hiddenField" is only created "onRender". So I updated as following :

getValue:function(){
if(this.hiddenField)
{
var v = this.hiddenField.value;
if(v === this.emptyText || v === undefined){
v = '';
}
return v;
}
else
return '';
}


Please tells me if I'm right or wrong or if you have already done another fix.

Thanks

DEMO ?

acemaverick
12 Sep 2008, 4:39 PM
You can use Ext.grid.CheckboxSelectionModel as a grid selection model and
set Ext.DataView simpleSelect option to true.

Can anyone tell me how do we use this combination please. I too need to use a checkbox selection model in a dataview. thanx.

manube
30 Oct 2008, 7:12 AM
Hello,

Here is a small demo.
To make it works just set the correct path to the websites.xml resources in the index.html file.

If you got problems, just contact me.

PS: I had problems to select default values with Ext 2.2 and I made some small changes (I cannot remember which :-?) to correct that. The most important thing is to set the property deferRowRender to false to correct that.

malotor
5 Nov 2008, 10:19 AM
I

manube
6 Nov 2008, 1:40 AM
Hello,

Can you try the demo I posted, and have a look to the code (and re-use the js code in your application). I think it does what you want.
If not tells me what's wrong, perhaps I will be able to help you.

Bye

amosspray
4 Jan 2009, 6:45 PM
I have a problem with Ext.ux.form.LovField

I used Ext.ux.form.LovField in my test project,
it can work with IE7,but can't work with others(ex:firefox,Apple Safari,google ...etc).
I don't know what to solve it.
I hope someone can help or tell me what's happend and how to solve it.
THANK YOU

manube
5 Jan 2009, 2:56 AM
Hello,
It works with other browsers.
Try using firebug with firefox to understand what's wrong.
If you don't manage to correct the errors and make it work, post your test page.
Bye

amosspray
11 Jan 2009, 11:08 PM
I am sorry that i thought the LOV has some error. But actually, the error is caused by another mistake.

Marshal.Lin
7 Mar 2009, 7:52 AM
Hi,
I wrote a form extension that works like Oracle's LOV(list of values).

Demo : http://madrabaz.com/ext/ux/LovField/demo/

As an improvment, I will add some public events and methods. Please, feel free to make a suggestion.

are you have a 'TreeField' now?and will you share it?Thanks´╝ü
and I test the LovField,it works fine.can i input 'id' manual and auto display the 'text' when i type enter key. how can id do this?

wxwdt
8 Apr 2010, 8:18 PM
So this is my sample :



new Ext.form.FormPanel({
frame: true,
title: 'Web sites',
style: 'padding-top: 10px',
defaults: { bodyStyle:'padding:2px', labelStyle: 'width:150px;font-weight: bold;margin-right: 5px;font-size:90%;' },
labelAlign: 'right',
items: [
{
xtype: 'xlovfield',
fieldLabel: 'Web sites',
id: 'websites',
name: 'websites',
allowBlank: true,
multiSelect: true,
lovTitle : 'Select Web sites',
lovHeight : 250,
lovWidth : 500,
width: fieldWidth,
minItem : 0,
valueField: 'id',
displayField: 'text',
displayValue: 'Toto', // I load both data from a jsp
hiddenValue: '18', // I didn't yet try to set these values from js, but I will have a look
textarea : true,
showOnFocus : true,
view : new Ext.grid.GridPanel({
id: 'websites-grid',
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: PATH_WEB_APPLICATION+'/websites.xml'}),
reader: new Ext.data.XmlReader({
record: 'website',
id: 'id',
fields: [
{name: 'id', type: 'string'},
{name: 'text', type: 'string'},
{name: 'url', type: 'string'}
]
})
}), cm: new Ext.grid.ColumnModel([
new Ext.grid.CheckboxSelectionModel(),
{id: 'id', header: 'Identifier', hidden: true, dataIndex: 'id'},
{header: 'Website', autoWidth: true, dataIndex: 'text'},
{header: 'URL', autoWidth: true, dataIndex: 'url'}
]), sm: new Ext.grid.CheckboxSelectionModel({
singleSelect:false,
listeners:{
beforerowselect: function(sm, row_index, keepExisting, record){
sm.suspendEvents();
if (sm.isSelected(row_index))
sm.deselectRow(row_index);
else
sm.selectRow(row_index, true);
sm.resumeEvents();
return false;
}
}
}), border: true,
viewConfig: { forceFit:true },
stripeRows: true
})
}
]
})


I hope it will help you.

PS: I've managed to link this field data to a combobox (I select a company in a combobox and then its contacts in this field). If you need I can provide you a sample, but I don't managed to init this field from a form.getForm().load(...); ... if someboy has an idea... it can be usefull !!! :)

how to resolve?

griobhtha
22 Jul 2010, 12:46 PM
Page Not Found

wxwdt
28 Jul 2010, 5:52 PM
can support extjs3?