PDA

View Full Version : How to let the treegrid update from the ajax response in controller.



zaburo
4 Jul 2014, 10:38 PM
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.
49567
In controller, I don't know how to program that I can update the tree grid by ajax response. Pls Help!!!!

mitchellsimoens
16 Jul 2014, 9:56 AM
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.

zaburo
17 Jul 2014, 12:16 AM
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.