How can I disable the hover events of an ExtJS treelist component (in micromode) so that the floater is only opened by a click/touch and not on hover/mouseover/mouseenter.
(Using ExtJS 6.2 Classic)
This overriding the element config did the trick.
Ext.define('Admin.view.main.TreeList', {
extend: 'Ext.list.Tree',
requires: [
],
xtype: 'pdmtreelist',
ui: 'navigation',
micro:true,
expanderFirst: false,
expanderOnly: true,
element: {
reference: 'element',
listeners: {
click: 'onClick',
mouseenter: 'onMouseEnter',
// mouseenter: Ext.emptyFn,
// mouseover: Ext.emptyFn,
mouseleave: 'onMouseLeave',
},
children: [{
reference: 'toolsElement',
listeners: {
mouseover: Ext.emptyFn
//mouseover: 'onToolStripMouseOver'
}
}]
}
});
Related
I have a view. I'm trying to attach an onchange listener for an input field. I know how to do it with a textfield but I have a very specific setup I need to use html fields. How can I get the listener below to work, so if i change text in the field, I get some output in my console.
Ext.define('A.view.Viewa', {
xtype: 'Viewa',
extend: 'Ext.Panel',
config: {
title: 'Title',
layout: {
type: 'fit'
},
items: [
{
styleHtmlContent: true,
scrollable: true,
items: [
],
html: [
"<input type='text' value='changeme' id='changetext'/>"
].join("")
}
],
listeners : {
change : {
fn: function() {
console.log("Yes it works!!");
},
delegate : '#changetext',
element : 'element'
}
}
}
});
I tried it with your change listener but that does not work. The keyup listener seems to work fine.
Ext.define('A.view.Viewa', {
extend: 'Ext.Panel',
xtype: 'Viewa',
config: {
html: '<input type="text" value="changeme" id="changetext"/>',
styleHtmlContent: true,
scrollable: true,
layout: {
type: 'fit'
},
listeners: {
keyup: {
fn: function() {
console.log("Yes it works!!");
},
delegate: '#changetext',
element: 'element'
}
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Title'
}
]
}
});
I'm using, or abusing, Sencha Touch for the first time and I just want to push a list view, when i click a button. Here is my view:
Ext.define('TouchNuts.view.Decision', {
extend: 'Ext.Panel',
xtype: 'decision',
config: {
title: 'Decision',
scrollable: true,
styleHtmlContent: true,
styleHtmlCls: 'Decision',
tpl: '<h2>{name}</h2>, <h3>{description}<h3>, <h4>{price:ellipsis(15)}</h4> <h1>you can do this </h1>',
items: [
{
xtype: 'button',
text: 'SEND',
ui: 'confirm',
docked: 'bottom',
action: 'doSomething'
}
]
}
});
Here is the view I'd like to push:
Ext.define('TouchNuts.view.File', {
extend: 'Ext.Panel',
xtype: 'file',
config: {
title: 'File',
iconCls: 'star',
layout: 'fit',
items: [
{
xtype: 'list',
id: 'file',
store: 'TransactionStore',
itemTpl: '<h2>{name:ellipsis(15)}</h2>, <h3>{description:ellipsis(8)}<h3>, <h4>{price:ellipsis(15)}</h4>',
itemCls: 'SummaryItems'
}
]
}
});
And here is my controller:
Ext.define('TouchNuts.controller.doSomething', {
extend: 'Ext.app.Controller',
config: {
refs: {
},
control: {
'button[action=doSomething]' : {
tap: function() {
getMainView('TouchNuts.view.Decision').push('TouchNuts.view.File');
}
}
}
}
});
I'm pretty good with HTML, CSS, and jQuery, but new to JS and totally clueless when it comes to Sencha so any advice is appreciated.
It is good to give your views an itemId inorder to reference them in your controller. So for instance:
TouchNuts.view.Decision can have an itemId:decisionPanel
and
TouchNuts.view.File can have an itemId:filePanel
Now in your Controller you would do this:
...
config: {
refs: {
decisionPanel: {
autocreate: true,
selector: '#decisionPanel',
xtype: 'decision'
},
filePanel: {
autocreate: true,
selector: '#filePanel',
xtype: 'file'
}
},
control: {
'button[action=doSomething]' : {
tap: 'onButtonTap'
}
}
onButtonTap : function(button, e, options) {
var me = this;
Ext.Viewport.setActiveItem(me.getDecisionPanel());
}
...
You will notice that I used getDecisionPanel() to get the decisionPanel view. This is because a getter function is automatically generated for each ref you specify and in order to access it, you new to use get+ the Capitalized ref name.
More info here: http://docs.sencha.com/touch/2-1/#!/api/Ext.app.Controller
Instead of
getMainView('TouchNuts.view.Decision').push('TouchNuts.view.File');
You have to create the view first and then push it to view
getMainView('TouchNuts.view.Decision').push(Ext.create('TouchNuts.view.File'));
I have got the tabpanel - it's the main form (view).
In this tabpanel I define the different tabs - xtype:'panel'.
So, I have one main(controller) , main view and some tabs views.
The tab's views are referenced in main view.
I want to define listener of activate event of some child's panel in main controller.
How can I do that?
the main controller :
Ext.define('KP.controller.account.apartment.Main', {
extend: 'Ext.app.Controller',
views: ['account.apartment.Main',
'account.apartment.Requisites'
],
models: ['account.apartment.Requisites'
],
stores: ['account.apartment.Requisites'
],
init: function () {
}
});
The main view:
Ext.define('KP.view.account.apartment.Main', {
extend: 'Ext.window.Window',
alias: 'widget.ApartmentData',
height: 566,
width: 950,
activeItem: 0,
layout: {
type: 'fit'
},
autoShow: false,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
activeTab: 0,
deferredRender: true,
items: [
{
xtype: 'RequisitesApartment'
}
]
}
]
});
me.callParent(arguments);
}
});
The child panel RequisitesApartment (view):
Ext.define('KP.view.account.apartment.Requisites', {
extend: 'Ext.panel.Panel',
alias: 'widget.RequisitesApartment',
id: 'panel_accountrequisites',
height: 350,
width: 1124,
autoScroll: true,
layout: {
type: 'fit'
},
listeners: {
activate: function () {
....load data....
...this listeners I want to push in 'main' controller...
}
},
initComponent: function () {
var me = this;
var grid_store = Ext.create('KP.store.account.apartment.Requisites');
Ext.applyIf(me, {
dockedItems: [
{
xtype: 'gridpanel',
height: 260,
autoScroll: true,
dock: 'bottom',
store: grid_store,
id: 'r_gridFlatParams',
forceFit: true,
columns: [
...some columns....
],
viewConfig: {
}
}
]
});
me.callParent(arguments);
}
});
Register it directly as control within the responsible controller
Here is a example with a working query. For sure you just will need the query, but I think it's a good example. The custom cfg property ident make it easy find each tab. As in the example below you will have specify a tabConfig within each panel and define the ident there.
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Foo',
tabConfig: {
ident: 'foo'
},
}, {
title: 'Bar',
tabConfig: {
ident: 'bar',
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});
console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=foo]')[0]);
console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=bar]')[0]);
Another way is to use css id's which can be queried like '#my-name' but I recommend to use a custom one as in the example above
Well, I should put this code in 'main'(controller):
this.control({
'ApartmentData tabpanel RequisitesApartment': {
activate: function () {
console.log('hello!');
}
}
});
The problem was in wrong selector , that I used.
The correct selector is :
'ApartmentData tabpanel RequisitesApartment'
There 'ApartmentData'(define like a alias: 'widget.ApartmentData') - is the 'window' xtype -the main form.
tabpanel - panel with tabs in 'window', and 'apartServList'(define like alias: 'widget.RequisitesApartment') - the some panel.
Thanks for sra!
the correct thing to do is to pass a config object to the member function control into controller init function. From Sencha documentation : The control function makes it easy to listen to events on your view classes and take some action with a handler function.
A quick example straight from extjs docs:
Ext.define('MyApp.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function() {
console.log('The panel was rendered');
}
});
Hope this helps.
Cheers
i use a tab panel in extjs. I want to display an alert when clicked on a tab. But i am not sure how.
This is what i do now:
{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
items: [
{
xtype: 'panel',
title: 'All',
items: [grid]
},
{
xtype: 'panel',
title: 'Closed'
},
{
xtype: 'panel',
title: 'Open'
}
],
listeners: {
click: function () {
alert('test');
}
}
}
How can is display All, Closed or Open when there is clicked on that tab?
There is no event for tab click in TabPanel, however you can bind into click event on each tab:
Ext.createWidget('tabpanel', {
items: [...],
listeners: {
render: function() {
this.items.each(function(i){
i.tab.on('click', function(){
alert(i.title);
});
});
}
}
});
Notice: this is ExtJS 4 based code.
I manage to do this by using tabchange event. In example below I used newCard.xtype property where value of xtype (i.e. task-archive) is just my panel with controls and corresponding xtype property.
Ext.define('ComplexBrigade.controller.taskArchive.TaskArchive', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'#tabWorks': {
tabchange: this.doTest
}
});
},
doTest: function ( tabPanel, newCard, oldCard, eOpts) {
switch (newCard.xtype) {
case "task-archive":
console.log("task-archive");
break;
case "task-creation":
console.log("task-creation");
break;
}
}
});
I have yet another problem with extjs. When I build treeview I can't get the scope to work with the tree nodes. The scope of root node is my js object as opposed to treenode which returns window as the scope.
Any idea why?
TreePanel Definition:
this.treeForParamPanel= new Ext.tree.TreePanel(
{
layout: 'fit',
frame:true,
iconCls:'search',
animCollapse:false,
collapsedIconCls: 'search',
titleCollapse :true,
collapsible: true,
split:true,
collapsed: false,
animate: false,
lines: true,
id:'treeParamPanel'+this.id,
region:region,
title: 'aaa',
anchor:'100%',
//rootVisible:false,
width: 200,
height:300,
border:false,
autoScroll:true,
loader: new Ext.tree.TreeLoader({
scope:this,
dataUrl:'index.php?act=index.php'
})
});
this.rootTreeForParamPanel = new Ext.tree.AsyncTreeNode({
text: 'aaa',
draggable:false,
id:'source',
scope:this,
listeners: {
click: {
scope:this,
fn:function(ev) {
alert(this);
}
}
}
});
this.treeForParamPanel.setRootNode(this.rootTreeForParamPanel);
Item Definition:
[
{
"text": "testyybvnvbnvb",
"id": "16",
"leaf": true,
"draggable": "false",
"qtip": "aaa",
listeners: {
click: {
scope: this,
fn:function(ev) {
alert(this);
}
}
}
}
]
When using TreePanel's I normally put the click event on the treepanel and not on each of the nodes. If you don't need the click event to be handled differently for each node, put the click event on the treepanel like this:
this.treeForParamPanel = new Ext.tree.TreePanel(
{
... your parameters...
listeners:
{
click: function(node, event) {
alert('You have clicked on node ' + node.id);
},
scope: this
}
});
Now the scope of the click event is the same as when you created the treepanel and you still have access to the node which is being clicked on by the user.