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!
Related
Just started to take my first steps with ExtJs, however I cannot figure out this one, although it must be totally obvious. In the code below, the legend has a config called "docked", how can I find it in the docs?
I searched multiple ExtJs docs versions for it but I cannot find it.
What I do:
I see that we create an object of the class Ext.chart.PolarChart. So I go to the docs for this class.
There I see a config called "legend" of type Ext.chart.Legend. Then I go to the docs for this class. But there is no config called "docked".
I assume that ExtJs docs show also inherited configs. I also looked for some more specific Legend class, thinking that the one listed in the docs is a parent class of other legend classes, but I could not find any other matching classes. For sure I am missing some JS or ExtJs concept, I just can't figure it out.
What is the correct way to figure out where the legend config "docked" comes from/is defined?
var donut = Ext.create('Ext.chart.PolarChart', {
title: 'Test',
animation: true,
width: 300,
height: 300,
renderTo: Ext.getBody(),
store: storeA,
legend: {
docked: 'bottom'
},
series: [{
type: 'pie',
angleField: 'value',
colors: ["#9aff4f", "#35b4e3", "#ffb400"],
donut: 20,
label: {
field: 'name',
display: 'inside'
},
highlight: true
}]
});
I think you did nothing wrong. You're entirely correct to search for "docked" in Ext.chart.Legend, and doing this for other configs should result in a hit with high probability.
But there are two things:
Other programmers can always put configs into their component definitions that are wrong and do nothing. It could be that they wanted to write dock: "bottom", did it wrong, but for some reason didn't see their error in the results, because the legend does what it should. You should definitely try what happens when you comment away that line. Does the legend change? (This is easy with docked, which should directly affect layout, but could be less easy with more obscure configs)
Not all possible config properties are public, and therefor documented. legend has a hierarchy and mixins, so if that config shows any effect, you will have to manually check the code of all components in the hierarchy and all mixins whether any of the components looks into a docked property.
Components are javascript objects, they allow for so-called expansion: if you add a config that is not processed, you can reasonably expect that the component has that property afterwards, which can then be processed from inside your code (outside of the component itself). For reasonably big code, you should start to put all such expansions into custom components, and use jsducks to generate a HTML documentation on these custom classes with their custom configs.
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 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
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...
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