Results 1 to 4 of 4

Thread: Forms, binding, ajax

  1. #1

    Default Answered: Forms, binding, ajax

    Ok, guys, sorry to do this, but I am stumped. I'm sure you're rolling your eyes right now!

    I have a form (View), a ViewModel, a Store, and a Model. The Store queries an Ajax (CORS) source. I'm trying to tie it all together.

    My problem - my browser registers an Ajax request, but I'm having problems populating the form! If I fenagle things, sometimes I can get the form populated if I navigate off and back to the view. But mostly not. Here's what I've got:

    Code:
     /app
       |- model/User.js
       |- store/User.js
       |- view/
           |- user/
               |- User.js
               |- UserController.js
               |- UserModel.js
    
    Here's my code (relevant details):

    PHP Code:
    // ./view/user/User.js
    Ext.define('MyApp.view.user.User', {
      
    extend'Ext.form.Panel',
      
    requires: [ 'MyApp.view.user.UserModel' ],
      
    id'user-view',
      
    xtype'user-view',
      
    reference'user_view',
      
    title'User Details',
      
    frametrue,
      
    controller'user',
      
    viewModel: { type'user' },
      
    defaults: { xtype'textfield'padding10width500readOnlytrue },
      
    items: [
        { 
    bind'{full_name}'fieldLabel'Name' },
        { 
    bind'{username}'fieldLabel'Username' },
        { 
    bind'{title}'fieldLabel'Title' }
      ]
    }); 
    PHP Code:
    // ./view/user/UserModel.js
    Ext.define('MyApp.view.user.UserModel', {
      
    extend'Ext.app.ViewModel',
      
    requires: [ 'MyApp.store.User''MyApp.model.User' ],
      
    alias'viewmodel.user',
      
    stores: { users: { type'user' } }
    }); 
    PHP Code:
    // ./store/User.js
    Ext.define('MyApp.store.User', {
      
    extend'Ext.data.Store',
      
    requires: [ 'MyApp.model.User' ],
      
    model'MyApp.model.User',
      
    storeId'user',
      
    alias'store.user',
      
    listeners: {
        
    load: function(selfrecordssuccessful) {
          
    console.log(records);  // record loads
        
    }
      },
      
    autoLoadtrue
    }); 
    PHP Code:
    // ./model/User.js
    Ext.define('MyApp.model.User', {
      
    extend'Ext.data.Model',
      
    alias'model.user',
      
    fields: [
        { 
    name'username'type'string' },
        { 
    name'full_name'type'string' },
        { 
    name'title'type'string' }
      ],
      
    proxy: {
        
    type'ajax',
        
    method'get',
        
    url'http://127.0.0.1:5000/api/v1/users/test123',    // hardcoded this for now
        
    reader: { type'json'rootProperty'users' }
      }
    }); 
    JSON response looks like this (just fine):

    PHP Code:
    {
      
    "count"1,
      
    "success"true,
      
    "users": [
        {
          
    full_name"Joe User",
          
    username"test123",
          
    title"Baller",
          ....
        }
      ]

    Not sure if it's relevant, but I'm expecting my json to return a users[] array with a single record. My understanding is Extjs forms will load the first record in an array by default.

    Anyway, I appreciate any insight y'all might have! I wouldn't ask if I weren't flummoxed.

    Thanks!

  2. Hi Joshua--

    Instead of trying to bind the store to the form, I would try adding a "link" to the model itself:
    http://docs.sencha.com/extjs/5.1/5.1...odel-cfg-links

    I've put together a Fiddle (below) demonstrating this with your code.

    I hope that helps--thanks!
    Joel


  3. #2
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Hi Joshua--

    Instead of trying to bind the store to the form, I would try adding a "link" to the model itself:
    http://docs.sencha.com/extjs/5.1/5.1...odel-cfg-links

    I've put together a Fiddle (below) demonstrating this with your code.

    I hope that helps--thanks!
    Joel


  4. #3

    Default

    That's awesome! Thank you!

    I still need to figure out why this is best practice in this particular case, but for the moment I'm satisfied that it works.

  5. #4
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Quote Originally Posted by Joshua Pruitt View Post
    That's awesome! Thank you!

    I still need to figure out why this is best practice in this particular case, but for the moment I'm satisfied that it works.
    Using a store, the binding (store.somefield) doesn't know to retrieve the values out of a particular record within a store. With links, the nature of a model instance is understood and is able to be bound properly.

    Thanks!
    Joel

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
  •