I just copied the example of ExtJS tree grid from Sencha's site. I created a fiddle with only difference being, I am using local data instead of using proxy & I have removed some columns.
Please check this fiddle and tell me why I am not able to see data in the grid?
Thank you!!!
Tree stores don't have a data option (search for it in the docs). Memory proxies, on the other hand, do. So you can put your data in it to solve your problem:
var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
data: JData,
type: 'memory'
},
folderSort: true
});
Related
I coded a simple application which displays a dataview.List articles in the home page.
Here's a view of my home page :
I can also open a specific article by clicking on it and have its complete description in an other view.
Here's my article view page for a specific article :
To do this I apply a filter in my ArticleController class (here I get the matched record).
onViewArticle: function(record) {
var articleStore = Ext.getStore("ArticleStore");
var selectedArticle = record;
articleStore.filterBy(function(record, id) {
if (selectedArticle.data.id == id)
return (true);
return (false);
});
Ext.Viewport.animateActiveItem(this.getArticleViewConnexContainer(), {
type: "slide", direction: "left"
});
},
And here's my store class :
Ext.define("MyApp.store.ArticleStore", {
extend: "Ext.data.Store",
requires: ["MyApp.model.ArticleModel"],
config: {
model: "MyApp.model.ArticleModel",
proxy: {
type: "ajax",
api: {
create: "http://localhost/MobileApplication/MyApp/services/ArticleService.php?action=create",
read: "http://localhost/MobileApplication/MyApp/services/ArticleService.php?action=read",
update: "http://localhost/MobileApplication/MyApp/services/ArticleService.php?action=update",
destroy: "http://localhost/MobileApplication/MyApp/services/ArticleService.php?action=destroy"
},
extraParams: {
keyword: ""
},
reader: {
type: "json",
rootProperty: "articles",
totalProperty: "total"
}
},
autoLoad: true
}
});
But now, I want to apply another filter in the same action to list others articles (with another specific filter) just below the article description. This involve to use two differents filters I think (one to get back the specific article (already done here) and an other one for the article list I want just below the article description). But how can I do this ? If I apply two filters in the same controller function, the second one will destroy the prevent one because all store data are in the cache. Is there a possible way (like in php MVC frameworks for instance) to send a variable from the controller to the view and display its content (By this way I will have two differents variables and I will can display the content of my two requests on my view)? Or maybe a possible way to handle several stores in the same time ? I'm really lost. Does anyone can help me, please ? Thanks in advance for your help.
There are actually couple questions inside.
Sencha Framework is built with "one store - one view" concept in mind. So if you have two different view presenting information from really one data store, you still would need to have two copies of this store. You can clear/apply back filters if you don't need to show these two views at the same time (it's mostly true in case of phone applications), but I would recommend to have two separate copies.
As far as your scenario - I don't think you need that. When you're displaying particular book you don't need to filter store. You need to just load one record (store.getAt()) and then use this record in your child form.
I'm a new developer in Sencha Touch 2 and I'm trying to create my first application using its provided MVC architecture. I find issues with toolbar/titlebar text overlapping when navigating between pages. Take a look at these screenshots:
Example 1
Example 2
I'm not pretty sure what's happening out there. I am using animateActiveItem and routing method to move across my application.
Users.js controller file, login method
// Ajax code here, not included here
// on ajax success:
this.redirectTo("login");
Routes.js controller file
routeLoginPage: function() {
console.log("routeLoginPage");
Ext.Viewport.animateActiveItem({ xtype: "loginpage" }, { type: "slide", direction: "left" });
},
Has anybody really faced a problem like this? I have no idea what to do right now as I was trying to resolve this issue for 2 days+.
EDIT
Basically I need to move across the pages defined as views. I define each view in different file containing properties: extend, requires, alias, config and methods defined by me. Every config property has titlebar attached as its first item.
When I'm trying to change page, I load another view by controller command which changes address hash. Routes controller then fires an animateActiveItem method which loads another View (defined previously as xtype by alias property).
I was using Miami Coder's Tutorial (miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-1/) to learn Sencha Touch basics.
I think you mean title bar and not toolbar...
Use navigation view to navigate between views instead of Ext.Viewport.animateActiveItem
It is a better method. For using navigation view use this guide in sencha docs...
Sencha has a steep learning curve so be ready for frustrations like this...
Navigation View Guide
You can add your required views in one panel class and enable the required view using
mainclass.setActiveItem(0)
or else use the navigation view
{
xtype: 'navigationview',
id: 'navView',
navigationBar: {
hidden: true
}
}
The above code will hide the title bar generated by navigation view... Now you need to define your own titlebar like so
{
xtype: 'titlebar',
title: 'title',
items: [
{
xtype: 'button',
text: 'back',
listeners: [
{
fn: function(button){
Ext.getCmp('navView').pop();//this will pop the view and show previous view
},event: 'tap'
}
]
}
]
}
Hope it helps...
I'm new to extjs and I'm trying to work on a Tree view.
I am building an "API Explorer" and there are simply too many nodes to send as a single json object (a few million nodes). What I wanted to do instead was send the first layer of categories as json initially, then on expand do an ajax request to get all of that category's children.
I'm not sure how to do this or if it's possible. Can anyone lead me in the right direction?
Actually that is the "normal" way as suggested by the documentation. Have a look at any of the Tree examples.
You basically set up an Ext.data.TreeStore with a Proxy, e.g. an Ext.data.proxy.Ajax:
xtype: 'treepanel',
loadMask: {msg: 'Loading...'},
store: Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'get-nodes.php'
}
})
Each time the user expands one of the nodes, the URL will be hit with the parameter node set to the id of the expanded node and should return an array of the children of this node. These children must not have a children property theirselves, otherwise they would be considered already loaded and would not be loaded on expansion.
i am new to ExtJS4.I am using paging toolbar in our project.I am clearing the grid using
grid.getStore().removeAll()
Now problem is with paging toolbar.If we click on the buttons then it is retrieving the store.My doubt is how to clear store in paging toolbar?
Please help me.
Thanking you,
Kushal
I just spent a few hours researching this thing and wanted to share in case someone is still looking for it. It looks like Ext.toolbar.Paging does not listen to the clear event of the store which fires on the removeAll() method. My solution was to sub class it and override getStoreListeners to bind onLoad internal function to the clear event. I am using ExtJS 4.1 by the way.
Ext.define('MyApp.ClearablePagingToolbar', {
extend: 'Ext.toolbar.Paging',
alias: 'widget.clearablepagingtoolbar',
getStoreListeners: function () {
var listeners = this.callParent();
Ext.apply(listeners, {
clear: this.onLoad
});
return listeners;
}
});
You use it by referencing clearablepagingtoolbar in your grid like this:
dockedItems: [{
xtype: 'clearablepagingtoolbar',
dock: 'bottom',
displayInfo: true,
store: this.getSearchResultStore()
}]
First of all, do you have the same store configured for both the grid and the toolbar? If yes, you should try to clear the store itself, and not by using grid.getStore() (e.g. myStore.removeAll() )
If you grid and paging toolbar uses same store, your paging toolbar will work correct. If you use separate stores (It is bad coding style), you need to call this paging panel's store's sync method, to syncronize data.
I would like to create a Treepanel, which is updated once a second.
So I took a store with a proxy for data acquistion:
store = new Ext.data.TreeStore({
model: 'TaskState',
proxy: {
type: 'ajax',
url : '/getTaskList'
},
root: {
expanded: true
}});
The store seems to work, the data is displayed in my TreePanel.
I tried to update the Treepanel with this function:
function refresh(){
store.load();
window.setTimeout("refresh()", 1000);
}
The update seems to work as well. Unfortunately the update causes some kind of "blinking" effekt on every update, because the whole tree is reloaded. I'm searching for a way to only refresh the nodes, which have changed.
Is there some way to do this?
greetings
There is one way:
You can load your nodes to some temp store and change your main tree's store node by node
If you want to add any new node and do not want to reload the whole store then you can add like this
//overModel is Ext.data.Model
overModel.appendChild({
id: responseJson.data['id'],
text:responseJson.data['text'],
children:responseJson.data['children'],//array of childern
parent_id:responseJson.data['parent_id']
});
overModel.expand();
and if you want to load the whole store the you can do something like this
Ext.data.StoreManager.lookup('StoreName').load({ params: {"p1": p1}});
to load the store.
To update the store periodically you can use DelatedTask Class.
check out the Documentation API of EXTJS will give you more details.
Store is bind Treepanel like grid and store ,so you can get Store from tree panel with
var store=treepanel.getStore()
and you can reload the store with branch that you need update with
store.load({node:selectedNode})
You could use TaskManager for that:
Ext.TaskManager.start({
run: reloadStoreFunction,
interval: 1000
});
This would execute reloadStoreFunction every second.