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.
Related
I would like to display a custom UI component for each record in a store.
It looks like a DataView is the best way to do this. There are a lot of old links stating how this is possible by using a DataViewItem but I cannot find anything in the current docs (I'm using version 6.0.2). Is this possible to do with extjs6? Here is what I have right now using a template:
var myTpl= new Ext.XTemplate(
'<tpl for=".">',
'<div>My object is too complex to be displayed with simple html<div>',
'</tpl>'
);
Ext.define( 'MyProject.view.main.MyList', {
extend: 'Ext.DataView',
xtype: 'mylist',
requires: [
'MyProject.view.main.MyViewModel'
],
viewModel: {
type: 'myviewmodel'
},
bind: {
store: '{store}'
},
// I don't want to do this. I would rather have something like this:
// itemXType: 'myitem'
itemTpl: myTpl,
} );
I've left out the viewModel implementation because the only thing it does is defines a proxy store. I can add it in if you need it.
Is there another way of accomplishing this? Maybe Something other than a dataview?
It is possible with ExtJS 6.0.2. Just take a look at Touch 2.4 example. Thats an example of Touch 2.4 but it still works in ExtJS 6.0.2 with the modern toolkit. See this Sencha fiddle (I just copied the code from the Touch example there and selected ExtJS 6.0.2 - Modern toolkit). Regarding Docs: Maybe you are looking at the docs of the classic toolkit. There is no Ext.DataView but you could use Ext.view.View instead
Short version:
Use
config: {
defaultType: 'mydataitem',
useComponents: true
}
in your DataView.
Create a custom DataItem which extends
Ext.dataview.component.DataItem
and add there your desired components.
For Version above Ext 6.2 use xtype: 'componentdataview' instead of xtype: 'dataview'.
https://docs.sencha.com/extjs/7.0.0/modern/Ext.dataview.Component.html
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 got a problem that is simply driving me insane. I created a window based widget that displays a grid. Ok, until now that is nothing special, but, each grid has to deal with different data. For Example: Imagine a homebroker, there is the widget that show the offers of a stock. So, the instance A has to show INTC, instance B has to show CSCO and instance C has to show FB. But when I deal with the data of INTC for instance A, the grids of instances B and C are updated too. So I understand that all grid a sharing the same store.
I've already tried to create a store dinamically, but, it didn't work.
The question is, how do I do to separate this? There is another way to update a grid without stores?
You need to create an instance of the store, you're probably declaring them like this:
{
xtype: 'grid',
store: 'theStore'
// Rest of the properties
}
What you need to do is the following:
{
xtype: 'grid',
//column definitions etc...
initComponent: function() {
var me = this;
var lStore = Ext.create('App.store.MyStore');
Ext.apply(me, {
store: lStore
});
me.callParent();
}
}
This creates a unique instance of the store, if you reference the store like this: store: 'MyStore' you just get the same store, and when you sort, page, filter, ... all the stores do the same.
Hope this helps you, since you didn't share any code.
Using Extjs 4.07
Assume I have two treePanels or, more likely, two grids. I want to be able to drag items back and forth between the two. What are the basic mechanisms required to do this? I'd liek to see some sample code demonstrating how it is done. I've not been able to find good documentation on how to do this that is applicable to v4 and not v3. I know there is an easy way and I've found many documents explaining bloated ways of doing this. I don't understand how dd is implemented in general. So, a high level overview would be useful as well.
A grid had a DragDrop plugin, while a tree has TreeViewDragDrop plugin.
If you want to drag from, to, or within your grid or tree, you include the plugin. In the case of a grid it will look something like this:
Ext.create('Ext.grid.Panel', {
...
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragText: 'Drag and drop to reorganize'
}
},
...
});
Once the plugin is included, you get drag and drop events from the component, to which you can listen. To complete the example above.
Ext.create('Ext.grid.Panel', {
…
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragText: 'Drag and drop to reorganize'
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
// Do something here.
}
}
},
…
});
You can see this fully working in this example, and its corresponding code.
To the best of my knowledge, nothing has changed on this front between 4.07 and 4.1;
General overview of drag and drop
Also check the custom drag drop to a grid http://docs.sencha.com/ext-js/4-1/#!/example/dd/dragdropzones.html
general idea is that , you have to create 1. draggable element On receipt of a mousedown event. Return a drag data object if so. The data object can contain arbitrary application data, but it should also contain a DOM element in the ddel property to provide a proxy to drag.
2. drop zone , where you decide what to do on 'onNodeDrop' event
I have a button in a Sencha Touch 2 project.
The button gets destroyed with the view after being pressed and is rebuild after another button gets pressed.
But the button does not get the listener again.
the listener is build in the controller of the view.
Ext.application({
name: 'App',
controllers: ['Main','Home'],
views: ['Main','Home'],
launch: function () {Ext.Viewport.add({xtype:'mainview'});}
});
the controller
Ext.define('App.controller.Home', {extend: 'Ext.app.Controller',
config: {
refs: {homeView: '#homeview',backBtn: '#btn_test1'},
control: {
backBtn: {
tap: function(backBtn){
console.log('[Controller][Home] btn monatsrate - - tap');
Ext.Viewport.add({xtype: 'mainview'});
Ext.Viewport.setActiveItem(1);
}
},
homeView: {
deactivate: function (homeView){
console.log('[Controller][Home] autodestroy homeview');
//homeView.destroy();
Ext.Viewport.remove(homeView);
}
}
}
},
});
And the view
Ext.define("App.view.Main", {
extend:"Ext.Container",
xtype:"mainview",
config:{
id:'mainview',
items:[
{
xtype:'button',
id:'btn_test2',
text: 'test2'
}
]
},
});
Any idea how to allow the button to get the listener back?
This is because the "ref" in your controller is using the id of the button to create the ref. Instead, use a different selector for your button. For example you could give your button a "name" property and give it a value of "testbutton". Then your ref would be like
refs: {homeView: '#homeview',backBtn: 'button[name=testbutton]'},
I struggled with this same problem for buttons and list items that were created/destroyed many times throughout the application's flow. Since then I've read a few times that, in general, the Sencha Touch team recommends not using the id as the selector unless you have a specific reason to. The "name" method above works very well for me. You could use lots of other css-style selectors as well (you'd have to read up on that separately).
As mentioned in a previous comment, I would accept some answers to increase the probability of getting an answer to your questions in the future. I'm just answering this one because I beat my head against the wall on this issue for 4 hours.
Sencha's examples recommend using action config on buttons, like 'cancel', 'goHome', 'createPost', etc.. which kinda makes sense.
All refs are then in the form of: myContainer button[action=myAction]
I believe your issue is exactly the id parameter. If you ever add any id you should make sure it is unique, thus adding an id to a config of your custom view will result in no way to create more then one instance of it! I may not be a 100% right(might be inside a container but i believe it will cause issues anyway) but why would you want an id that much? Besides, you can simply reference your view by xtype:
refs: {homeView: 'homeview',backBtn: 'btn_test1'},
regards,