Hybrid View

  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,498
    Vote Rating
    46
    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,498
    Vote Rating
    46
    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.

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