how to reload the store values in ext js 4.1 ?
var user_date_wise = Ext.create('Ext.data.JsonStore', {
fields: ['MS', 'HSD', 'XP', 'XM','comp_date'],
autoLoad: true,
proxy: {
type: 'ajax',
url : 'php/data.php?item='+date
}
});
user_date_wise.load()
See docs.
Related
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]);
}
});
I have couple of tree panels, each configured with individual tree stores. I have configured a proxy for one store. On load event of this, i am trying to load the second store(proxy memory) like below. But it doesn't work.
EXT js Version: 4.0.7
_treeStore2 = Ext.create('Ext.data.TreeStore', {
model: 'Scenario',
proxy : {
type : 'memory'
}
});
_treeStore1 = Ext.create('Ext.data.TreeStore', {
model: 'Scenario',
root:'data1',
proxy : {
type : 'ajax',
url: '/proj/examples?id='+_Id,
reader : {
type : 'json',
root:'data1'
}
},
listeners: {
'load': {
fn: function(store, records, success, operations) {
_treeStore2.setRootNode(_treeStore1.getProxy().getReader().jsonData.data2);
}
}
});
Sample JSON data:
{"data1":[{"name":"value","children":[]}],"data2":[{"name":"value","children":[]}]}
Try using loadData(data2) or loadRawData methods.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-loadRawData
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
}
});
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
});
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.