Am new at sencha touch and
I want to create a formPanel after the user click on some listener, I found out how to listen to An item, but the problem is to create a page and fill it with data coming from JsonP request
I tried
Ext.data.JsonP.request({
url: 'url',
callbackName: 'callback1',
success: function(result, request) {
Ext.Viewport.add({
title : 'Category',
iconCls : 'home',
id:'category'+id,
xtype : 'formpanel',
deferredRender:true,
tabBarPosition : 'bottom',
data:result.prop
}); }});
in the console there is no error and the form added but not within the formpanel that already exist
you could try sample code below..
onButtonClick: function(button) {
Ext.data.JsonP.request({
url: 'url',
callbackName: 'callback1',
success: function(result, request) {
button.up('some_id').add({
title : 'Category',
iconCls : 'home',
id:'category'+id,
xtype : 'formpanel',
deferredRender:true,
tabBarPosition : 'bottom',
data:result.prop
});
}});
}
Related
There isn't really a problem, I just know that the way I have my current Jquery plugin working that it is not the most efficient and I am hoping someone could point me in the right direction.
So, this is the behaviour of the plugin:
1. On click of a link with a certain class (there could be multiple links with the same class), options are passed to the plugin, some are hard coded but some are gathered from data-attributes.
2. A bootstrap modal is shown (blank modal).
3. Ajax post to external page with options from function posted.
5. Ajax success callback puts the new html content into the modal to display.
This is my current jquery plugin
(function($){
$.fn.custom_xedit = function( options ) {
var settings = $.extend({
type: this.attr("data-type"),
selectsource: this.attr("data-selectsource"),
mask: this.attr("data-mask"),
title: this.attr("data-title"),
pk: this.attr("data-pk"),
posturl: this.attr("data-posturl"),
originalvalue: this.attr("data-originalvalue"),
name: this.attr("data-name")
}, options );
this.addClass('xedit___el___active');
$('#xedit_modal').modal({
backdrop: 'static',
keyboard: false
});
$.ajax({
type: 'POST',
url: 'url',
data: {
'type': settings.type,
'selectsource': settings.selectsource,
'mask': settings.mask,
'title': settings.title,
'pk': settings.pk,
'posturl': settings.posturl,
'originalvalue': settings.originalvalue,
'name': settings.name
},
success: function(callback_modal){
$("#xedit_modal").html(callback_modal);
}
});
};
}( jQuery ));
And I currently call it by:
$('body').on("click", ".some_class", function () {
$(this).custom_xedit({
type: "input_mask",
mask: "999",
title: "Internal extension",
posturl: "some_url",
name: "Ext"
});
});
It would be nice to be able to call it without surrounding it with a on click, but not sure how to do that (like below:)
$(.some_class).custom_xedit({
type: "input_mask",
mask: "999",
title: "Internal extension",
posturl: "some_url",
name: "Ext"
});
I implement simple RESTful Service. These are Rest request url and the response json data.
http://localhost:8080/RESTfulTestWeb/rest/services/getJson/aupres
{"id":"aupres","passwd":"aaa","age":45,"name":"joseph"}
The problem is ExtJS Store object client can not handle the above json data. These are ExtJS client codes
Ext.define('extjs.model.Member', {
extend: 'Ext.data.Model',
fields : [{
name : 'id',
type : 'string'
}, {
name : 'passwd',
type : 'string'
}, {
name : 'age',
type : 'int'
}, {
name : 'name',
type : 'string'
}]
});
Ext.onReady(function () {
var members = Ext.create('Ext.data.Store', {
model : 'extjs.model.Member',
//autoLoad : true,
proxy: {
type: 'rest',
url : 'http://localhost:8080/RESTfulTestWeb/rest/services/getJson/aupres',
reader: {
type: 'json',
root: 'id',
},
writer: {
type: 'json'
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
})
}
}
},
listeners: {
load: function(members, operation, success) {
if(success) {
alert('response : ' + members.model.length)
} else {
alert('it failed')
}
}
}
})
var onButtonClick = function() {
members.load()
}
The respose is shown like below
"response : 0"
It seems my ExtJS codes fail to contain the json data.
The rest proxy reader in ExtJs 5 and up looks for a rootProperty: instead of root:.
HI You can overwrite toString() method of your class . then you can get exact.
Like you want data on ["id":"aupres","passwd":"aaa","age":45,"name":"joseph"}]
or some other format
I want load a Treestore using ajax proxy.But it shows only root node in user interface.
Json coming from server as response looks correct and no error in console.
I want to load the root node also from server side response but though json appears correct it doesnt appear in the user interface.
{"result":{"text":"ABC","leaf":false,"expanded":true,"children":[{"text":"Dashboard","leaf":false,"expanded":false},{"text":"Report","leaf":false,"expanded":false},{"text":"Chart","leaf":false,"expanded":false}]}}
var model=Ext.define('TreeModel',{
extend:'Ext.data.Model',
fields:[{
name:'text',
type:'string'
},
{
name:'leaf',
type:'boolean'
},
{
name:'expanded',
type:'boolean'
}],
proxy: {
type: 'ajax',
url: 'FetchTreeChidren',
reader: {
type: 'json',
root: 'result'
}
}
});
var store = Ext.create('Ext.data.TreeStore', {
model:model
});
Ext.Ajax.request({
url: 'FetchTreeChidren',
params: {
level:'level1'
},
async:false,
success: function(response){
var treejson = Ext.JSON.decode(response.responseText);
store.setRootNode(treejson);
}
});
var lefttree=Ext.create('Ext.tree.Panel', {
region:'west',
height:screen.height-150,
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
return lefttree;
please help me out.
Thanks & Regards
Try to use
var store = Ext.create('Ext.data.TreeStore', {
model:model
proxy: {
type: 'memory'
},
root: {
expanded: false,
children: childreanArr
}
});
and change
store.reconfigure(treejson);
inside the success. This work for me
I'm upgrading an app to ExtJS 5, and I can't seem to get a grid using RowEditing to POST the edited record back to my server.
Ext.define("MyRecordDef", { extend: "Ext.data.Model" });
var MyEditor = Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1 });
var MyStore = new Ext.data.Store({
model: "MyRecordDef",
autoSync: true,
proxy: {
type: "ajax",
url: "ajaxurl.aspx",
batchActions: false,
extraParams: { Command: 'Save' },
reader: { type: "json", rootProperty: "rows" },
writer: { type: "json", encode: true, writeAllFields: true }
}
});
var MyGrid = new Ext.grid.GridPanel({
store: MyStore,
plugins: [ MyEditor ],
columns: [
{
id: "fieldtoedit",
dataIndex: "fieldtoedit",
editor: new Ext.form.NumberField()
}
]
});
The row editor comes up, I'm able to change the value and click the Update button, but then nothing happens. No request is made, no errors logged in the console.
I added the following:
MyGrid.on('edit', function (e) {
alert('You are Editing ' + e.context.record.id);
MyStore.sync(); // attempt to force a sync
});
I get the alert with the correct record number, but still no AJAX request. It's like ExtJS is completely ignoring the writer.
I don't have different endpoints for each CRUD operation, so I'm not using the api config option, it should be using the url.
First of all you must define rootProperty on writer when you use encode: true.
Then after adding fields to MyRecordDef requests are sended.
Working sample: http://jsfiddle.net/jjVwR/3/ (saving don't work, but you can see on console that request is send)
Json reader in is defined for the store as follows:
Ext.define('App.store.MyList', {
extend : 'Ext.data.Store',
model : 'App.model.MyList',
pageSize : 100,
proxy : {
type : 'ajax',
actionMethods : {
create : 'POST',
read : 'POST',
update : 'POST',
destroy : 'POST'
},
root : 'results',
url : 'aaa.htm',
reader : {
type : 'json',
root : 'results',
totalProperty: 'totalCount',
extraProperty: 'abcd'
},
simpleSortMode : true
}
});
How do I read extra property outside the root? I tried to put one inside the reader, it did not work.
try this
grid.getStore().getProxy().getReader().extraProperty