PDA

View Full Version : How to render a control from ajax response



pawangyanwali
15 Dec 2012, 6:37 AM
When user clicks on a button it calls a Ajax request that return a ext view port and needs to be rendered inside a panel. How can this be achieved.

Ext.Ajax.request({ url: 'Search/BuildSearch',
method: 'POST',
params: {
where: whereArray,
containerId: "resultContainer",
viewPath:viewPath
},
success: function (response) {

var result = response.responseText;
//this is where we need to render the control from response.responseText;
var panel = Ext.getCmp("pnlSearchResult")

Ext.getCmp("pnlSearchResult").doLayout();

},
failure: function (response) {
Ext.Msg.show({

msg: response.responseText,
buttons: Ext.Msg.OK,
animEl: 'elId'
});
}
});

Response from the ajax request is


Ext.onReady(function(){Ext.create("Ext.Viewport",{renderTo:Ext.getBody(),autoDoLayout:true,items:[{region:"center",items:[{store:{model:Ext.define(Ext.id(), {extend: "Ext.data.Model", fields:[{name:"company"},{name:"price",type:"float"},{name:"change",type:"float"},{name:"pctChange",type:"float"},{name:"lastChange",type:"date",dateFormat:"n/j h:ia"}] }),proxy:{type:'memory', reader:{type:"array"}}},border:false,xtype:"grid",columns:{items:[{flex:1,dataIndex:"company",text:"Company"},{dataIndex:"price",renderer:Ext.util.Format.usMoney,text:"Price"},{dataIndex:"change",text:"Change"},{dataIndex:"pctChange",text:"Change"},{xtype:"datecolumn",dataIndex:"lastChange",text:"Last Updated"}]},viewConfig:{xtype:"gridview"}}],layout:"fit"}],layout:"border"});});

This needs to be rendered in the panel

Thanks

mitchellsimoens
17 Dec 2012, 7:44 AM
eval the responseText or just point a <script> to it.