Results 1 to 3 of 3

Thread: [RowEditorPlugin and ComboBox] ComboBox doesn't get filled with data

  1. #1
    Sencha User wojteks27's Avatar
    Join Date
    Aug 2011
    Location
    Krakw, Poland
    Posts
    32
    Answers
    3

    Default Answered: [RowEditorPlugin and ComboBox] ComboBox doesn't get filled with data

    Hello everyone,

    I'm a JS & ExtJS newbie with a small question.

    I'm trying to use RowEditorPlugin on a grid like this:

    grid.jpg

    Columns described as "Slownik" and "Inny" are loaded from remote stores (each column has different store).

    My problem is when I try to edit row with RowEditor plugin I get something like this:

    roweditor.jpg

    I have absolutely no idea why values which are shown in the grid doesn't get loaded into editor field.
    If someone would be so kind and explain it to me I'd be very grateful.

    Here's the code :
    Code:
    Ext.define('Rekord1', {     
         extend: 'Ext.data.Model',
         fields : [
            {name:'src_id',type:'int'},
            {name:'src_nazwisko',type:'string'},
            {name:'src_imie',type:'string'},
            {name:'src_dat',type:'date'},
            {name:'src_od',type:'float'},
            {name:'src_do',type:'float'},
            {name:'src_slw',type:'int'},
            {name:'slw_nazwa',type:'string'},
            {name:'zzzz',type:'int'},
            {name:'zzz_opis',type:'string'}
         ]
     }); 
    
    
    Ext.define('myStore1',{
        extend : 'Ext.data.Store',
        model: 'Rekord1',
        pageSize : 20,   
        autoLoad : false,   
        proxy: {
            type: 'ajax',
            url : 'http://localhost/sahip/sahip/pokaz',
            reader: {  
                type: 'json',
                root: 'wynik',
                totalProperty: 'ilosc'
            }
        }
    });
    
    
    Ext.define('RekSlw1', {
         extend: 'Ext.data.Model',
         fields : [
             {name: 'slw_id',    type: 'int'},
             {name: 'slw_nazwa', type: 'string'}
         ]
    }); 
    
    
    Ext.define('RekZzz1', {
         extend: 'Ext.data.Model',
         fields : [
             {name: 'zzz_id', type: 'int'},
             {name: 'zzz_opis', type: 'string'} 
         ]
    });  
    
    
    Ext.define('Shp.application.SlwStore1', {
            extend : 'Ext.data.Store', 
        id:     'SlwStore1',
        model : 'RekSlw1',
            autoLoad : true,    
        proxy :{
            type:'ajax',      
                    actionMethods : {read : "POST"},
            url:'sahip/slownik',
            extraParams:{
                         task : 'shp_prob0002',
                         sort : 'slw_id'
            },
            reader : {    
                         type: 'json',
                         root: 'wynik', 
                         totalProperty: 'ilosc'
            }
        }
    });
    
    
    Ext.define('Shp.application.ZzzStore1', {
            extend : 'Ext.data.Store', 
            id:     'ZzzStore1',    
        model : 'RekZzz1',
            autoLoad : true,
        proxy :{
            type:'ajax',    
                    actionMethods : {read : "POST"},
            url:'sahip/slownik',
            extraParams:{
                        task : 'shp_prob0003',
                        sort : 'zzz_id'
            },
            reader : {    
                        type: 'json',
                        root: 'wynik', 
                        totalProperty: 'ilosc'
            }
        }
    });
    
    var SlwStore1 = Ext.create('Shp.application.SlwStore1');
    var ZzzStore1 = Ext.create('Shp.application.ZzzStore1');
    
    var RowEditorPlugin = Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToEdit: 2,
                autoCancel : true
    });
    
    
    Ext.define('Shp.application.gridInline', {
       extend : 'Ext.grid.Panel',
       alias : 'widget.gridInline',
       id : 'gridInline',   
       store : Ext.create(myStore1),
       floating : false,
       border : false,   
       autoHeight : true,
       selType : 'rowmodel',
       plugins: [
           RowEditorPlugin
       ],
       columns: [
    //        {header: 'ID', dataIndex: 'src_id', field:'numberfield', flex : 1, align:'center', 
            {header: 'Imi?', dataIndex: 'src_imie', field:'textfield'},
            {header: 'Nazwisko', dataIndex: 'src_nazwisko',  field:'textfield'},
            {header: 'Data powo?ania', field: 'datefield', align:'center', dataIndex: 'src_dat', xtype:'datecolumn', format : 'Y-m-d'},
            {header: 'Od warto?ci', align:'right', field:'numberfield', dataIndex: 'src_od', renderer:  function(value, cell) {num = this.formatNumber(value, 2, ' ', ',', '', ' z?', '-', '');str = "<span style='color:#336600;'> " + num +"</span>";return str;}},
            {header: 'Do warto?ci', align:'right', field:'numberfield', dataIndex: 'src_do', renderer:  function(value, cell) {num = this.formatNumber(value, 2, ' ', ',', '', ' z?', '-', '');str = "<span style='color:#336600;'> " + num +"</span>";return str;}},        
            {
                 header: 'S?ownik',
                 tdCls:'shp_dict',
                 dataIndex: 'slw_nazwa', 
                 editor: {
                     xtype:'combo',                 
                     store: SlwStore1,
                     queryMode:'remote',
                     valueField:'slw_id',
                     displayField:'slw_nazwa'                 
                 }             
             },
            {
                header: 'Inny',
                tdCls:'shp_dict',
                dataIndex: 'zzz_opis',                 
                editor: {
                    xtype:'combo',
                    store: ZzzStore1,                
                    queryMode:'remote',
                    valueField:'zzz_id',
                    displayField:'zzz_opis'
                }
                        
             }           
       ],      
       readStore : function(){
           this.store.load({
              params: {
                  start: 0,
                  limit: pageSize
              } 
            });  
       },
       initComponent : function(){       
                               
           this.getSelectionModel().setSelectionMode('MULTI');        
           this.readStore();             
           this.tbar = Ext.create(myActionToolbar1);                
           this.dockedItems = [
               Ext.create(myFunctionToolbar1, { dock : 'bottom'}),
               {           
                   name:'pageTool1',
                   id:'pageTool1',
                   xtype: 'pagingtoolbar',
                   store: this.store,
                   dock: 'bottom',
                   displayInfo: true
               }
            ];                                     
            
           this.callParent();      
    }
    I didn't think the toolbars could be important so I omitted their code.

    PS.
    I also struggle with problem of displaying fieldValue instead of displayValue.
    I googled some solutions to this issue but couldn't adapt neither to work with ExtJS4; if someone knows solution, please help.

    Thank you in advance,
    Wojtek

  2. The editor is passed a value when it is shown. The value will be obtained from the record using the field specified in dataIndex. This needs to equal a value in the combobox's valueField.

    In short, the dataIndex of the column and the valueField of the combobox need to be the same. In either case you can change the value that is actually shown to the user: for columns use a renderer and for comboboxes use a displayField.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    The editor is passed a value when it is shown. The value will be obtained from the record using the field specified in dataIndex. This needs to equal a value in the combobox's valueField.

    In short, the dataIndex of the column and the valueField of the combobox need to be the same. In either case you can change the value that is actually shown to the user: for columns use a renderer and for comboboxes use a displayField.

  4. #3
    Sencha User wojteks27's Avatar
    Join Date
    Aug 2011
    Location
    Krakw, Poland
    Posts
    32
    Answers
    3

    Default

    Thank you very much for your answer.
    You have been of great help!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •