Results 1 to 10 of 16

Thread: Problems to render a combox on grid

Hybrid View

Previous Post Previous Post   Next Post Next Post
  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 User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,862
    Vote Rating
    85
      0  

    Default

    At what point do you load that Store?
    Longtime Sencha engineer. Now surplus to requirements apparently...

  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 User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,862
    Vote Rating
    85
      0  

    Default

    So debug the Store. Looks like it's not getting loaded.
    Longtime Sencha engineer. Now surplus to requirements apparently...

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
  •