1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    23
    Vote Rating
    0
    rogerio.carrasqueira is on a distinguished road

      0  

    Exclamation Problems to render a combox on grid

    Problems to render a combox on grid


    Hi Everybody!

    I'm a newbie at ExtJs and I'm having some problems to work with Ext Combox on a Grid Panel. Let me explain my problem:

    1 - Have a grid where it loads data from a JSON file and fill in the cell on the grid with this data.
    2 - On this grid I have a field that use a Combo Box that depends from another JSON file to populate the data and show the options to choose and submit the data row to a post and save it on the database.
    3 - But, unfortunately I don't know why the data that is loaded from Json is not beeing loaded to the combo box. Believe, I tried many ways but no one worked. If you click at the combobox no data appear (it should appear my customer's list)

    I did this implementation that I will show to you, so I wish that can be helpful to understand my problem:

    Here is the code that builds the combox box:

    Code:
    var customerStore = new Ext.data.Store({
            
        storeId : 'customerStore',
        autoDestroy : true,
        url : '/core/json/customer/list/',
        remoteSort : false,
        idProperty : 'pk',
        root: 'data', 
        fields : [{ name: 'customer_id', mapping: 'pk', type:'integer'},
                  { name: 'customer_name', mapping: 'fields.name', type:'string'}]
    });
    
    var customerCombo = new Ext.form.ComboBox({
        
        store: customerStore,
        displayField: 'customer_name',
        valuefield: 'customer_id',
        hiddenName:'customer',
        typeAhead: false,
        triggerAction: 'all',
        editable: false,
        anchor: '95%',
        allowblank: false,
        mode: 'local'
    });
    Here is the code that will be used to populate the data on combox, note that I will not use all the fields:

    Code:
    {"success": true,
     "message": "Loaded data", 
    "total": 2, 
    "data": [
                  {"pk": 59, 
                   "model": "core.customer", 
                   "fields": {
                        "phone_number": "000",
                        "cnpj": "000",
                         "name": "asdad",
                        "corporate_email": "rogerio.carrasqueira@gmail.com",
                        "date_created": "2010-08-24 11:13:44",
                        "contact_name": "000"}
                 }, 
                 {"pk": 60,
                  "model": "core.customer",
                  "fields": {
                        "phone_number": "00",
                        "cnpj": "0000",
                        "name": "All Match",
                        "corporate_email":
                        "rogerio.carrasqueira@directflow.com.br", 
                        "date_created": "2010-08-24 12:31:54",
                        "contact_name": "Rog\u00e9rio"}
                  }
          ]
    }
    Here is the code that builds the grid:

    Code:
    var textField =  new Ext.form.TextField();
    
    var userColumns =  [
        
        {header: "ID", width: 40, sortable: true, dataIndex: 'pk'},
        {header: "Usuário", width: 100, sortable: true, dataIndex: 'username', editor: textField},
        {header: "Primeiro Nome", width: 100, sortable: true, dataIndex: 'first_name', editor: textField},
        {header: "Sobrenome", width: 100, sortable: true, dataIndex: 'last_name', editor: textField},
        {header: "E-mail", width: 100, sortable: true, dataIndex: 'email', editor: textField},
        {header: "Ativo?", width: 100, sortable: true, dataIndex: 'is_active', editor: textField},
        {% if request.user.is_staff %}
        {header: "Cliente", width: 130, sortable: true, dataIndex: 'customer_name', editor: customerCombo},
        {% else %}
        {header: "Cliente", width: 130, sortable: true, dataIndex: 'customer_name'},
        {% endif %}
        {header: "Criado em:", width: 100, sortable: true, dataIndex: 'date_created'},
        {header: "Último Login em:", width: 100, sortable: true, dataIndex: 'last_login'},
       
    ];
    
    
    Ext.onReady(function() {
        Ext.QuickTips.init();
        
        var userGrid = new App.user.Grid({
            renderTo: 'user-grid',
            store: store,
            columns : userColumns, // aqui acontece a montagem do grid
            listeners: {
                rowclick: function(g, index, ev) {
                    var rec = g.store.getAt(index);
                },
            }
        });
    });
    And

    So, if someone can help me with this issue I will thanks so much.

    Greetings from Brazil

    Rogério Carrasqueira

  2. #2
    Sencha User laurentParis's Avatar
    Join Date
    Aug 2010
    Location
    paris
    Posts
    246
    Vote Rating
    2
    laurentParis is on a distinguished road

      0  

    Default


    I suggest to you this modifications

    PHP Code:
    var customerStore = new Ext.data.Store({
        
    autoLoadtrue,                                               //    >add
        
    storeId 'customerStore',
        
    autoDestroy true,
        
    url '/core/json/customer/list/',
        
    remoteSort false,
        
    idProperty 'pk',
        
    root'data'
        
    fields : [{ name'customer_id'mapping'pk'type:'integer'},
                  { 
    name'customer_name'mapping'fields.name'type:'string'}]
    });

    var 
    customerCombo = new Ext.form.ComboBox({
        
    storecustomerStore,
        
    displayField'customer_name',
        
    valueField'customer_id',
        
    hiddenName:'customer',
        
    typeAheadfalse,
        
    triggerAction'all',
        
    editablefalse,
        
    anchor'95%',
        
    allowBlankfalse,
        
    mode'remote'                                               //    >modify
    }); 

  3. #3
    Ext User
    Join Date
    Jun 2010
    Posts
    23
    Vote Rating
    0
    rogerio.carrasqueira is on a distinguished road

      0  

    Exclamation


    Hi!

    Thanks for your help! I've added and not worked, any more ideas?

    Thanks

    Rogério

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,501
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    At what point do you load that Store?

  5. #5
    Ext User
    Join Date
    Jun 2010
    Posts
    23
    Vote Rating
    0
    rogerio.carrasqueira is on a distinguished road

      0  

    Default


    Hi!

    I tried to put autoLoad: true and before the combo I've put customerStore.load() but no one has effect to appear the data in the combo box. Any idea?

    Thanks

    Rogério Carrasqueira

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,501
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    So debug the Store. Looks like it's not getting loaded.

  7. #7
    Ext User
    Join Date
    Jun 2010
    Posts
    23
    Vote Rating
    0
    rogerio.carrasqueira is on a distinguished road

      0  

    Default


    Doing this? console.debug(customerStore)?

    Thanks

  8. #8
    Ext User
    Join Date
    Jun 2010
    Posts
    23
    Vote Rating
    0
    rogerio.carrasqueira is on a distinguished road

      0  

    Default


    Hi! I did a debug and the root: data is not loading the JSON, but the page loads the http file, but the values is not being passed to the root:data. So how can I proceed to fix this?

    Thanks

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,501
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Debug properly. Step through the Store's code that the Proxy calls when it gets the data.

  10. #10
    Ext User
    Join Date
    Jun 2010
    Posts
    23
    Vote Rating
    0
    rogerio.carrasqueira is on a distinguished road

      0  

    Default Almost there!

    Almost there!


    Almost solved! But another problem appeared, let me show my code:

    Code:
    // Created a proxy to access the Json 
    var customerProxy = new Ext.data.HttpProxy({
          
        api: {
            read : '/core/json/customer/list/',
        }
    });
    
    // Created a reader to read the JSON data
    var customerReader = new Ext.data.JsonReader({
        totalProperty: 'total',
        successProperty: 'success',
        idProperty: 'pk',
        root: 'data',
        messageProperty: 'message'  // <-- New "messageProperty" meta-data
    }, [
        {name: 'pk'},
        {name: 'name', mapping: 'fields.name'}
    ]);
    
    // Build a new way to store the data retrieved from JSON
    var customerStore = new Ext.data.Store({
            
        id : 'customers',
        proxy: customerProxy,
        reader: customerReader,
        autoLoad: true
        
    });
    
    // And the Combo Box
    var customerCombo = new Ext.form.ComboBox({
        
        store: customerStore,
        displayField: 'name',
        valuefield: 'pk',
        typeAhead: false,
        triggerAction: 'all',
        editable: false,
        anchor: '95%',
        allowblank: false,
        mode: 'remote'
        
    });
    
    customerStore.load();
    The data is appearing at the combo box, but another problem appeared: I want to post the numbered value as described at valuefield: 'pk', but it is posting the valued at displayField

    Code:
    data{"fields.customer.name":"All Match","pk":13}
    So any ideas to help to solve this?

Similar Threads

  1. Livegrid render problems
    By ae.intern in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 7 Jun 2010, 1:26 AM
  2. how to use combox as textfield and combox in grid editor
    By genTaliaru in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 22 May 2009, 4:55 AM
  3. combox render problem in toolbar,Pls help me!!!!
    By dgms in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 21 Jul 2008, 6:00 AM
  4. using a colon in a grid id causes render problems
    By ismoore in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 29 Apr 2007, 1:22 AM
  5. Upgrade Grid to Ext1.0 from 0.33 - render problems
    By ismoore in forum Ext 1.x: Help & Discussion
    Replies: 11
    Last Post: 27 Apr 2007, 3:13 AM

Thread Participants: 3

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi