I'm trying to make a gridpanel with rowexpander. I loaded the rowexpander.js file as javascript at resources.
this is me code in the override function:
Ext.define('login.view.override.gridpanelAllUsers', {
override: 'login.view.gridpanelAllUsers',
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : new Ext.XTemplate(
'<tpl>',
'<p>this is a test.</p>',
'</tpl>'
)
}]
});
anyone knows what i'm doing wrong?
thanks in advance.
I'm able to get it working, using the rowexpander.js code found here:
http://docs.sencha.com/extjs/4.2.2/source/RowExpander.html#Ext-grid-plugin-RowExpander
The rest of your override code looks fine, assuming you have properly referenced your grid panel. I have used your code exactly, on a table that I promoted to class, and applied an override to. Your browser console may narrow down the problem if it persists.
Use -
requires: ['Ext.ux.RowExpander']
in your grid class file.
Simple answer would be to upgrade Sench Architect to 3.1
Related
When I set the useArrows property on my Ext.tree.Panel, no arrows show up. Here is the header of my tree.Panel:
Ext.define('LifeguardxApp.view.main.pools.PoolsTree', {
extend: 'Ext.tree.Panel',
xtype: 'poolstree',
title: 'Pools',
collapsible: true,
multiSelect: true,
//rowLines: true,
viewModel: {
type: 'main'
},
controller: 'main',
bind: {
store: '{pools}'
},
rootVisible: false,
useArrows: true,
...
Reading the docs, it doesn't seem like there would be anywhere else that needs configuring in order to show arrows on parent nodes?
If any of the other classes or info would be helpful, I am happy to provide. This was an app generated with sencha command.
UPDATE
Based on the comments I tried the following:
Check the fiddle provided by UDID - everything looks fine
Ceared cache on browser - no fix
Verified class is required elsewhere - it is
Inspected DOM element where button should be - Only shows node element, no hidden button
Checked out the answer suggested here. Rebuilding did not fix.
I am using the sencha app watch command for most development. I am led to believe that this should be fine based on this: Sencha Command Doc
I tried sencha ant sass, followed by sencha app refresh, then sencha app watch again, to no avail.
Is there somewhere else that CSS path related info is being set?
UPDATE 2
I built a test app using sencha cmd and that had a basic tree in it. The arrows were fine there. Then I copied my current app into that test app, and the arrows disappeared. So now I'm thinking that somehow the tree isn't getting all of the 'treeness' attributes that it should?
Not shown in my above code I had a typo in my treecolumn. This was causing it to be treated as a regular grid panel cell.
If anyone has any suggestions for extjs sublime linters that could catch something like this, add a comment!
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 using Ext.tree.Panel of ExtJS 4.2.1. I would like to know if there is a way to preserve the position of the scrollbar after a data load (i.e. setRootNode(), loadData()). Right now, after the data is loaded, the scrollbar position is reset to the top.
Thanks in advance for any lead on this.
Try following code.
viewConfig: {
preserveScrollOnReload: true
}
I know this is old, but I noticed that "preserveScrollOnReload" does not work in Ext.tree.panel.
I resolved with cacheScrollValues. Example:
function updateNodes(nodes) {
var restoreScroll = App.yourGrid.el.cacheScrollValues();
var sto = App.yourGrid.getStore();
sto.setRootNode(nodes);
restoreScroll();
PS: I'm also using ext 4.2.1.
Hi try adding the following code once to your tree panel for scroll preserving.
For more information on this here from Sencha docs
viewConfig: {
preserveScrollOnRefresh: true
}
Hope it helps you.
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 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.