1. #21
    Sencha User
    Join Date
    Jan 2008
    Location
    Nice, France
    Posts
    43
    Vote Rating
    0
    manube is on a distinguished road

      0  

    Default


    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

  2. #22
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    40
    Vote Rating
    0
    dverkade is on a distinguished road

      0  

    Default


    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.

    Code:
    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);

  3. #23
    Ext User
    Join Date
    Jan 2008
    Posts
    103
    Vote Rating
    0
    ry.extjs is on a distinguished road

      0  

    Default


    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...

  4. #24
    Sencha User
    Join Date
    Jan 2008
    Location
    Nice, France
    Posts
    43
    Vote Rating
    0
    manube is on a distinguished road

      0  

    Default


    Thanks a lot dverkade for the hidden and display values!!
    I've just tested it and it works perfectly.

    Thanks again everybody!!

  5. #25
    Ext User xpurpur's Avatar
    Join Date
    Feb 2008
    Posts
    33
    Vote Rating
    0
    xpurpur is on a distinguished road

      0  

    Default


    2 manube

    Please, provide us some examples
    How do you using extension (set values etc.)
    P.S. Sorry my english.

  6. #26
    Sencha User
    Join Date
    Jan 2008
    Location
    Nice, France
    Posts
    43
    Vote Rating
    0
    manube is on a distinguished road

      0  

    Default


    So this is my sample :

    Code:
    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 !!!

  7. #27
    Sencha User bt_bruno's Avatar
    Join Date
    Mar 2008
    Location
    Redwood City, CA
    Posts
    154
    Vote Rating
    10
    bt_bruno will become famous soon enough

      0  

    Default


    Form stuff are always good! Nice extension!

  8. #28
    Sencha User
    Join Date
    Jan 2008
    Location
    Nice, France
    Posts
    43
    Vote Rating
    0
    manube is on a distinguished road

      0  

    Default


    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 :
    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
    Code:
    this.view.sm.selectRecords(records, false /*instead of true*/);
    Manu

  9. #29
    Ext User
    Join Date
    Feb 2008
    Posts
    7
    Vote Rating
    0
    tmartinez is on a distinguished road

      0  

    Default Pb in a grid

    Pb in a grid


    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 !

    Quote Originally Posted by pregool View Post
    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!

    PHP Code:
    // 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',
        
    width80
      
    },{
        
    id:'nama',
        
    header'Nama',
        
    dataIndex'nama',
        
    width200
      
    }]);
      
      
    // grid for LOV
      
    var grdLov = new Ext.grid.GridPanel({
        
    storedsLov,
        
    cmcmLov,
        
    width500,
        
    height150
      
    });     
      
      
    // LOV Field
      
    var lovField = new Ext.ux.form.LovField({    
        
    viewgrdLov,
        
    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',
        
    width80,
        
    editorlovField
      
    },{
        
    id:'nama',
        
    header'Nama',
        
    dataIndex'nama',
        
    width200,
        
    editor: new Ext.form.TextField({
          
    allowBlanktrue
        
    })
      }]);
      
      var 
    grd = new Ext.grid.EditorGridPanel({
        
    storeds,
        
    cmcm,
        
    width500,
        
    height300,
        
    clicksToEdit1
      
    }); 
      
      
    grd.render('grid-example');
    }); 

  10. #30
    Ext JS Premium Member Joyfulbob's Avatar
    Join Date
    Feb 2008
    Posts
    176
    Vote Rating
    1
    Joyfulbob is on a distinguished road

      0  

    Default


    [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?

    PHP Code:
     SITS1field = new Ext.form.TextField({
        
    id'SITS1field',
        
    name:'SITS1',
        
    fieldLabel'Store# 1',
        
    maxLength8,
        
    style: {textTransform"uppercase"},
        
    allowBlanktrue,
        
    width:80,
                    
    xtype'xpromptfield',
                    
    promptTitle'Select Site from Revision list',
                    
    promptHeight250,
            
    multiSelectfalse,
                    
    promptWidth400,
                    
    minItem1,
                    
    maxItem1,
                    
    valueField'SITID',
                    
    displayField'SITID',
            
    textarea false,
                    
    showOnFocustrue,
                
    viewhPmtGrid
          
    }); 
    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!

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar