Results 1 to 3 of 3

Thread: How to let the treegrid update from the ajax response in controller.

  1. #1
    Sencha User
    Join Date
    Sep 2013
    Posts
    3

    Default How to let the treegrid update from the ajax response in controller.

    I have a problem need us to help me.
    The problem is that:
    I want to update the treegrid by button, so I give the button a ajax request function and if response is success, then update the tree grid, the method I wrote like this.

    model:
    Ext.define('SH_UDC.model.GSingleSearch.GSingleModel', {
    extend: 'Ext.data.Model',


    fields: [
    {
    name: 'id'
    },
    {
    name: 'name'
    },
    {
    name: 'value'
    }
    ]
    });

    store:

    Ext.define('SH_UDC.store.GSingleSearch.GSingleStore', {
    extend: 'Ext.data.TreeStore',
    storeId:'GsingleStore',
    requires: [
    'SH_UDC.model.GSingleSearch.GSingleModel'
    ],
    model: 'SH_UDC.model.GSingleSearch.GSingleModel',
    autoLoad: false,

    proxy: {
    type: 'ajax',
    url: Urls.GSearch,
    reader: {
    type: 'json',
    root: 'data'
    }
    }



    });

    view:

    singlelist.js

    Ext.define('SH_UDC.view.GSingleSearch.SingleList', {
    extend: 'Ext.tree.Panel',
    alias:'widget.singlelist',
    id: 'ae',
    height: 250,
    width: 400,
    columnLines: true,
    rowLines: true,
    store:'GSingleSearch.GSingleStore',
    rootVisible: false,
    initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
    viewConfig: {

    },
    columns: [
    {
    xtype: 'treecolumn',
    dataIndex: 'name',
    text: 'Name',
    flex: 1,
    renderer: function(value) {
    if(translations[value]){
    return translations[value];
    }else{
    return value;
    }
    },

    },
    {
    xtype: 'gridcolumn',
    dataIndex: 'value',
    text: 'Value',
    flex: 1,

    },
    {
    xtype: 'gridcolumn',
    dataIndex: 'value',
    text: '????',
    flex: 3,
    renderer: function(value) {
    if(translations[value]){
    return translations[value];
    }else{
    return value;
    }
    },
    }
    ]
    });
    me.callParent(arguments);
    }


    });

    GsingleView.js
    Ext.define('SH_UDC.view.GSingleSearch.GSingleView', {
    extend: 'Ext.form.Panel',
    alias: 'widget.individualuser',
    requires:[
    'SH_UDC.view.GSingleSearch.SingleList',


    ],
    layout: {
    type: 'fit'
    },


    initComponent: function() {
    var me = this;


    Ext.applyIf(me, {
    dockedItems: [
    {
    xtype: 'toolbar',
    dock: 'top',
    items: [
    {
    xtype: 'combobox',
    fieldLabel: 'UDC',
    store:UdcStore,
    fieldLabel: 'UDC',
    labelAlign: 'right',
    labelWidth: 50,
    mode:'local',
    selectOnFocus:true,
    triggerAction:"all",
    displayField:"set_name",//
    valueField:"id",//?
    labelWidth: 50
    },
    {
    xtype: 'textfield',
    itemId:'msisdnnum',
    width: 200,
    hideLabel: true,
    inputType: 'tel',
    labelWidth: 150
    },
    {
    xtype: 'button',
    width: 100,
    text: 'Search',
    itemId:'searchbutton'
    }
    ]
    }
    ],
    items: [
    {
    xtype: 'singlelist'
    }
    ]
    });


    me.callParent(arguments);
    }


    });

    controller:

    Ext.define('SH_UDC.controller.GSingleSearch.GSingleController', {
    extend: 'Ext.app.Controller',


    requires: [
    'SH_UDC.util.Util',

    ],


    views: [
    'GSingleSearch.GSingleView',
    'GSingleSearch.SingleList'

    ],
    stores:[
    'GSingleSearch.GSingleStore'

    ],
    refs: [
    {
    ref: 'singleList',
    selector: 'singlelist'
    },
    ],









    init: function(application) {


    this.control({


    "individualuser singlelist": {
    render: this.onRender
    },
    "individualuser button#searchbutton": {
    click: this.onButtonClicksearch

    },




    });


    },
    onRender: function(component, options) {


    },
    onButtonClicksearch:function(button,e,options){

    var toolbar = button.up('toolbar'),
    udcid = toolbar.down('combo').getValue(),//udc id
    cell = toolbar.down('textfield[itemId=msisdnnum]').getValue();//Input Number
    var Tree = this.getSingleList().getStore();
    if(udcid!=null&&cell.length>4&&cell.length<15){


    Ext.Ajax.request({
    url: Urls.GSearch,
    method: 'post',
    headers:{'Content-Type':'application/json;charset=utf-8'},
    jsonData:{"nodeId": udcid,"cell": cell},


    success: function(conn, response, options, eOpts) {

    //Ext.get(login.getEl()).unmask();

    var result = SH_UDC.util.Util.decodeJSON(conn.responseText);
    var ec = result.data;
    if (result.success) {

    Tree.load(ec);


    } else {
    SH_UDC.util.Util.showErrorMsg(conn.responseText);
    }
    },
    failure: function(conn, response, options, eOpts) {

    SH_UDC.util.Util.showErrorMsg(conn.responseText);
    }
    });

    }


    }



    });
    But the response has two, one come from controller, and the other from TreeStore. And the awful thing is the ajax request from controller cannot update the treestore or treegrid, but the store's request works. It can not give the write response! I want to get the response after I give the request with some conditions.
    Catch.jpg
    In controller, I don't know how to program that I can update the tree grid by ajax response. Pls Help!!!!

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,449
    Answers
    3997

    Default

    I gave up trying to read your code, please use BBCode so your code remains formatted.

    If you are using Ext.Ajax to reload your tree, you should really just be loading your store instead. The tree will then reflect that loading automatically.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Sep 2013
    Posts
    3

    Default

    Quote Originally Posted by mitchellsimoens View Post
    I gave up trying to read your code, please use BBCode so your code remains formatted.If you are using Ext.Ajax to reload your tree, you should really just be loading your store instead. The tree will then reflect that loading automatically.
    Hello mitchellsimoens, thank you for your suggestion, I just want to know how realize that let treeStore update datas from ajax's response, something like data.Store, it can use loadData() function to load datas from response not by store itself to do ajax request. Thank you.

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
  •