Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Problems to render a combox on grid

  1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    23
    Vote Rating
    0
      0  

    Exclamation 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: "Usurio", 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

    Rogrio Carrasqueira

  2. #2
    Sencha User laurentParis's Avatar
    Join Date
    Aug 2010
    Location
    paris
    Posts
    246
    Vote Rating
    2
      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
      0  

    Exclamation

    Hi!

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

    Thanks

    Rogrio

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    62
      0  

    Default

    At what point do you load that Store?
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  5. #5
    Ext User
    Join Date
    Jun 2010
    Posts
    23
    Vote Rating
    0
      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

    Rogrio Carrasqueira

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    62
      0  

    Default

    So debug the Store. Looks like it's not getting loaded.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  7. #7
    Ext User
    Join Date
    Jun 2010
    Posts
    23
    Vote Rating
    0
      0  

    Default

    Doing this? console.debug(customerStore)?

    Thanks

  8. #8
    Ext User
    Join Date
    Jun 2010
    Posts
    23
    Vote Rating
    0
      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
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    62
      0  

    Default

    Debug properly. Step through the Store's code that the Proxy calls when it gets the data.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  10. #10
    Ext User
    Join Date
    Jun 2010
    Posts
    23
    Vote Rating
    0
      0  

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

Page 1 of 2 12 LastLast

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

Tags for this Thread

Posting Permissions

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