Generic component - extjs4

i need to define a set of generic component in Extjs4:
for example i want to define a single generic store and when i need a store in my code is necessary to create a store just define and pass to him the model and the url for get the data.
This is my store:
Ext.define('base.common.store.BaseStore',{
extend:'Ext.data.Store',
remoteSort: true,
proxy: {
//url:this.url,
type: 'ajax',
pageParam: false, //to remove param "page"
startParam: false, //to remove param "start"
limitParam: false, //to remove param "limit"
reader: {
type: 'json',
id: 'id',
root: 'list'
}
}
})
and this is when i create an instance of it:
var dsGroups = Ext.create('base.common.store.BaseStore',{
model:'base.common.model.Group'
//proxy:{url:"Group.getGroups"}
});
dsGroups.getProxy().url = "Group.getGroups";
This question is: There is a way to do this job for inject the proxy.url property in the Ext.create call? (i don't want to use the last statement)
Anytype of help or idea is usefull.

Ext.define('base.common.store.BaseStore',{
extend:'Ext.data.Store',
remoteSort: true,
defaultProxyCfg: {
type: 'ajax',
pageParam: false, //to remove param "page"
startParam: false, //to remove param "start"
limitParam: false, //to remove param "limit"
reader: {
type: 'json',
id: 'id',
root: 'list'
}
}
constructor: function(config){
config = Ext.apply({}, config);
config.proxy = Ext.apply({
url: config.url
}, this.defaultProxyCfg);
this.callParent([config]);
}
});

Related

fullcalendar: resources with start and end date

Is it possible in fullcalendar-scheduler to pass start and end date of the view to the resources? eventSources are provided with these two parameters automatically, but resources not. I tried with
resources: {
url: '<?= $resourcesRoute ?>,
type: 'POST',
data: {
start: $('#calendarDaysoff').fullCalendar('getView').start,
}
},
eventSources: [
{
url: '<?= $eventsRoute ?>',
type: 'POST',
data: {
bla: 'bla'
},
error: function () {
alert('There was an error while fetching events!');
}
}
],
but this does not works.
I used this solution:
resources: function(callback){
setTimeout(function(){
var view = $('#calendar').fullCalendar('getView');
$.ajax({
url: 'feed.php',
dataType: 'json',
cache: false,
data: {
start: view.start.format(),
end: view.end.format(),
timezone: view.options.timezone
}
}).then(function(resources){callback(resources)});
},0);
},
This will add start and end parameters like when fetching events. You can add
$feed_start = $_GET['start']; to feed.php
and use the variable '$feed_start' in mysql select.
I got the input from https://github.com/fullcalendar/fullcalendar-scheduler/issues/246?_pjax=%23js-repo-pjax-container
V1.5.1 introduces a solution:
https://fullcalendar.io/docs/resource_data/refetchResourcesOnNavigate/
Since v1.5.1, if refetchResourcesOnNavigate is set to true a resources function will receive start, end, and timezone parameters

Ext Js - TreeStore not loading data when using ASP.net WCF Service

I am trying to build a dynamic tree. I am getting my data from a C# WCF Service. It is returning me JSON data , but data is not reflecting in tree.
I am using EXTJS 4.
.Js Code -
Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.tip.*'
]);
Ext.onReady(function () {
Ext.QuickTips.init();
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'Services/InfographicsDataService.svc/GetTree'
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true
},
reader: {
type: 'json',
root: 'd'
}
}); // End of store code
var tree = Ext.create('Ext.tree.Panel', {
store: store,
viewConfig:
{
plugins:{ ptype: 'treeviewdragdrop' }
},
renderTo: 'tree-div',
height: 300,
width: 250,
title: 'Files',
useArrows: true
}); // End of tree
}); // End of ready function
This is the code at my service end-::
[OperationContract]
[WebGet]
public List<TreeNode> GetTree()
{
List<TreeNode> nodes = new List<TreeNode>();
nodes.Add(new TreeNode() { id="src/ModelManager.js", text =
"ModelManager.js" });
nodes.Add(new TreeNode() { id="src/data", text = "data" });
nodes.Add(new TreeNode() { id="src/draw", text = "draw" });
return nodes;
}
Json returned by wcf service--
{"d":[
{
"__type":"TreeNode:#Infographics.Services.Model",
"id":"src\/ModelManager.js",
"leaf":false,
"text":"ModelManager.js"
},
{
"__type":"TreeNode:#Infographics.Services.Model",
"id":"src\/data",
"leaf":false,
"text":"data"
},
{
"__type":"TreeNode:#Infographics.Services.Model",
"id":"src \/draw",
"leaf":false,
"text":"draw"
}]
}
Call is going to server and returning the data but not adding nodes in tree
Page is showing just the root Extjs node.
Initially I thought , it is just root property of reader which I need to set to "d" , but there is something more I am missing.
Can somebody help me in finding what is that small mistake I am making ?
Can you change the store like this and try,
var store = Ext.create('Ext.data.TreeStore',
{
proxy:
{
type: 'ajax',
url: 'Services/InfographicsDataService.svc/GetTree',
reader:
{
type: 'json',
root: 'd'
}
},
root:
{
text: 'Ext JS',
id: 'src',
expanded: true
}
});

Unable to Load Data from XML to List using Sencha

I am unable to load the below xml in to List using Sencha.
<?xml version="1.0" encoding="UTF-8"?>
<bdayevents>
<bdayevent>Acceptance Letters</bdayevent>
<bdayevent>Acceptance Letters</bdayevent>
</bdayevents>
This is the model which i am trying to use as there are no attributes to my XML.
Ext.regModel('BEvent',{name:'bdayevent'});
var store = new Ext.data.Store({ model: 'BEvent',
proxy: {
type: 'ajax',
url: 'http://localhost:8080/JSON/BirthdayInvitations.xml',
reader: {
type : 'xml',
root : 'bdayevents',
model : 'BEvent',
record : 'bdayevent'
}
}
});
This is the List which i am trying to invoke during ready.
var list = new Ext.List({
fullscreen: true,
onItemDisclosure: {
scope: 'test',
//handler: makeJSONPRequest
},
itemTpl : '{event}',
grouped : true,
indexBar: true,
store: store,
modal:true
});
list.show();
}
});
The result of above snippet is empty page with index dispalying a to z.
Please help me in resolving this issue.
Thanks,
Shyam
try this
Ext.regModel('BEvent', {
fields: ['bdayevent']
});
var store = new Ext.data.Store({
model: 'BEvent',
method:'get',
proxy: {
type: 'ajax',
url : 'BirthdayInvitations.xml',
//url: 'test1.xml',
reader: {
type : 'xml',
record: 'bdayevents'
}
},
autoLoad: true
});
var XMLTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div>{bdayevent}',
'</tpl>'
);
var list = Ext.create('Ext.List', {
fullscreen: true,
store: store,
onItemDisclosure: {},
itemTpl: XMLTpl
});

Sencha touch: JSONP parsing

Model:
app.models.Category = Ext.regModel("Category", {
fields: [
{ name: 'CategoryId', type: 'int' },
{ name: 'ImageUrl', type: 'string' },
{ name: 'ImageUrlFile', type: 'string' },
{ name: 'CategoyName', type: 'string' }
]
});
Storage:
app.stores.CategoryStore = new Ext.data.Store({
id: 'CategoryStore',
model: 'Category',
autoLoad: true,
proxy: {
type: 'scripttag',
url: 'http://localhost:1303/admin/categoriesservice/getcategories',
mehod: 'GET', //not needed
callbackKey: 'callback', //not needed
reader: {
type: 'json',
root: 'categories'//not needed with my JSONP
},
afterRequest: function (request, success) {
console.log("afterRequest");
if (success) {
console.log("success");
} else {
console.log("failed");
}
console.log(request);
}
}
});
Controller:
Ext.regController('Home', {
index: function () {
if (!this.indexView) {
this.indexView = this.render({
xtype: 'HomeIndex'
});
this.items = [app.views.HomeIndex];
}
app.viewport.setActiveItem(this.indexView);//this what i've missed
}
});
View
app.views.HomeIndex = Ext.extend(Ext.DataView, {
html: '<div class="gallery-view" style="display: block;width: 300px;border: 1px solid #fff;height: 300px;"></div>',
store: app.stores.CategoryStore, //full namespace needed
itemSelector: 'div.node',
initComponent: function () {
this.tpl = new Ext.XTemplate(
'<div style="padding:10px 5px 5px 5px;">',
'<tpl for=".">',
'<div class="node" style="background:url({ImageUrl});">',
'</div>',
'</tpl>',
'</div>'
);
//appened to successful solution
this.dataView = new Ext.DataView({
store: this.store,
tpl: this.xtpl,
itemSelector: 'div.node'
});
this.items = [this.dataView];
app.views.HomeIndex.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('HomeIndex', app.views.HomeIndex);
JSONP Result:
GetCategories([{"CategoryId":101,"CategoyName":"אוכל","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/rest.png","ImageUrlFile":null,"InsertDate":"\/Date(1314507534000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":99,"CategoyName":"הצגות ומופעים","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/shows.png","ImageUrlFile":null,"InsertDate":"\/Date(1314442037000)\/","IsActive":true,"ApplicationId":100,"Applications":null},{"CategoryId":111,"CategoyName":"בריאות","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/spa.png","ImageUrlFile":null,"InsertDate":"\/Date(1314856845000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":142,"CategoyName":"נופש ותיירות","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/vacation.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":143,"CategoyName":"ביגוד","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/clothes.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":144,"CategoyName":"אתרים ואטרקציות","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/attraction.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null},{"CategoryId":105,"CategoyName":"חשמל","ImageUrl":"http://www.teleclal.com/YnetApplicationMall/Content/images/categories/elctronic.png","ImageUrlFile":null,"InsertDate":"\/Date(1314713031000)\/","IsActive":true,"ApplicationId":0,"Applications":null}]);
The exception:
Uncaught TypeError: Cannot read property 'length' of undefined
Question:
Help how can i parse via storage or any other way the JSONP issue???
You have set this in your reader
reader: {
type: 'json',
root: 'categories'
}
And I can't see categories element in your json data. Check if this is correct or add this to your json in order to be working probably
{"categories":[ ...//old json //..]}
when I tried to define
function GetCategories(data){console.log(data);}
and then invoking the jsonp response (by ctrl+c/ctrl+v into the console), I was successful, meaning the the data is a valid json string.
but when I inspected your code, I haven't seen a mechanisem that defines that function (GetCategories).
I must say that i'm unfamilier with sencha. but I aswsome that problem is that no callback function was ever created.
I see that you define a 'callbackKey: 'callback''
is there somewhere in sencha documentation that allows you to define a 'callbackValue: 'GetCategories'' or such? try and check into that direction.
Try removing "autoLoad: true" from your code. It resolved my issues on the same matter as yours.

Sencha Touch FormPanel With Store

I have a store as follows.
var eventsStore = new Ext.data.Store({
model: 'Event',
sorters: [{
property: 'OccurringOn',
direction: 'DESC'
}],
proxy: {
type: 'ajax',
url: BaseURL + 'Events.php',
api: {
read: BaseURL + 'Events.php',
create: BaseURL + 'Events.php'
},
reader: {
type: 'xml',
root: 'Events',
record: 'Event'
},
writer: {
type: 'xml',
writeAllFields: false,
root: 'Events',
record: 'Event'
}
},
getGroupString: function(record) {
if (record && record.data.OccurringOn) {
console.log(record.get('OccurringOn'));
return record.get('OccurringOn').toDateString();
}
else {
return '';
}
}
});
I also have a List view which gets all Events fine. I have a form which allows user to add new event and I have FormPanel for it. The FormPanel has Toolbar which has Save button which when clicked will do following.
var eventCard = It's a card
var newEventCard = eventCard.items.items[1];
var currentEvent = newEventCard.getRecord();
newEventCard.updateRecord(currentEvent);
var errors = currentEvent.validate();
// here I check errors and prompt user about them
var eventList = eventCard.items.items[0].items.items[0];
var eventStore = eventList.getStore();
eventStore.add(currentEvent);
eventStore.sync();
eventStore.sort( [ { property: 'OccurringOn', direction: 'DESC' } ] );
eventList.refresh();
The above code adds two empty rows to the MySQL database and copies the event list view items with 3 empty new items. Why this is the behavior and what I am missing?
If you can tell me what parameters are sent as POST to the Events.php when I sync that would much appreciated.
It was my fault I figured out. I was echo'ing when there was POST request to the service.