I have treepanel. On some specific condition I want to show image on mouse enter and remove that image on mouseleave in treenode. but when i hover the mouse quickly image get added but not getting removed as itemmouseleave event is not getting fired.
I have prepared jsfiidle to understand my problem in which I am trying to change text of node on mouseenter and mouseleave. on slow motion it is working fine but if hover quickly it shows mouseenter even if we are away from node.
Link to jsfiddle : http://jsfiddle.net/79ZkX/238/
Ext.create("Ext.tree.Panel", {
title: "Car Simple Tree",
width: 400,
height: 600,
store: store,
rootVisible: false,
lines: true, // will show lines to display hierarchy.
useArrows: true, //this is a cool feature - converts the + signs into Windows-7 like arrows. "lines" will not be displayed
renderTo: Ext.getBody(),
listeners: {
itemmouseenter: function(_this, _item) {
var name = _item.get("name");
_item.set("name", "mouseenter");
},
itemmouseleave: function(_this, _item) {
//var name = _item.get('name');
_item.set("name", "leave");
}
},
columns: [
{
xtype: "treecolumn",
dataIndex: "name", // value field which will be displayed on screen
flex: 1
}
]
});
I want to remove the image on mouseleave. Thanks
Added manual workaround for this. On Fast Mouse Hover itemmouseleave event will not get triggered. so i am maintaining array of hovered node and on mouseenter of node, checking if array contain element then set text of that node.
added code to this jsfiddle: http://jsfiddle.net/79ZkX/250/
Ext.create('Ext.tree.Panel', {
title: 'Car Simple Tree',
width: 400,
height: 600,
store: store,
rootVisible: false,
visibleNodes: [],
lines: true, // will show lines to display hierarchy.
useArrows: true, //this is a cool feature - converts the + signs into Windows-7 like arrows. "lines" will not be displayed
renderTo: Ext.getBody(),
listeners : {
itemmouseenter: function(_this, _item) {
for (var i = 0; i < this.visibleNodes.length; i++) {
var node = this.visibleNodes[i];
node.set('name', "leave");
this.visibleNodes.splice(i, 1);
}
var name = _item.get('name');
_item.set('name', "mouseenter");
this.visibleNodes.push(_item);
},
itemmouseleave: function(_this, _item) {
//var name = _item.get('name');
_item.set('name', "leave");
var index = this.visibleNodes.indexOf(_node);
if (index != -1){
this.visibleNodes.splice(index, 1);
}
},
},
columns: [{
xtype: 'treecolumn',
dataIndex: 'name', // value field which will be displayed on screen
flex: 1
}]
});
Related
I hit what seems to be two bugs. Here is a fiddle which demonstrates these bugs. First of all, if you click on the first panel or any other ones, you will see there appear some new panel with a missing title:
And the second bug, is that it is impossible to see the contents of the panel (one textfield, which I put to every panel). The code is as simple as:
Ext.create("Ext.window.Window", {
width: 300,
height: 400,
layout: "fit",
items:[{
xtype: "panel",
layout: {
type: "accordion"
},
scrollable: true,
listeners: {
beforerender: function () {
var i;
for (i = 0; i < 30; i += 1) {
this.add({
title: i,
items:[{
xtype: "textfield",
value: i
}]
});
}
}
}
}]
}).show();
So, the question is how to fix it all?
The outer window should not have a fit layout as this will interfere with the way the accordion layout works as it uses more or less vertical space depending on the user's actions. Also, the accordion should not have scrollable set to true as it is the parent window that should scroll.
The title you are using for the items in the accordion are seen as integer values in JS and so the 0 is not being interpreted as you would like when used in a title (which expects a string). Explicitly converting i to a string will ensure the 0 shows correctly.
In summary, the following changes will enable your code to work better:
On the outer window: remove the layout:fit and add scrollable:true.
On the accordion: remove the scrollable:true.
On the items in the accordion: ensure the title is consistently converted to a string.
See updated fiddle here.
Ext.create("Ext.window.Window", {
width: 300,
height: 400,
scrollable: true,
items: [{
xtype: "panel",
layout: {
type: "accordion"
},
listeners: {
beforerender: function () {
var i;
for (i = 0; i < 30; i += 1) {
this.add({
title: 'box ' + i,
items: [{
xtype: "textfield",
value: i
}]
});
}
}
}
}]
}).show();
Here is a Sencha fiddle of my tab panel setup. Buttons are dynamically added to a vbox tabs container that is part of an hbox layout setup. The tabs container's width is determined by the flex property.
I've tried setting every button's width: '100%', but upon looking at the Sencha docs on button.width, I find that width takes an integer value representing pixels. I've tried setting the width in style, but I've only succeeded in making the button's width be the width of the screen.
Help and an explanation of the underlying CSS concepts would be greatly appreciated
You're looking for the stretchmax option.
var locationCameraList=[];
Ext.application({
name : 'Fiddle',
launch : function() {
var buttonArr = [];
for (i = 0; i < locationCameraList.length; ++i) {
var tabName = locationCameraList[i].location,
index = i;
var tab = {
xtype: 'button',
cls: 'tab'+index,
text: tabName,
scale: 'medium'
};
buttonArr.push(tab);
console.log(i)
}
var forms = {
xtype: 'container',
flex: 4,
layout: 'fit',
align: 'stretch',
html: 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz'
};
Ext.create('Ext.window.Window', {
title: 'Foo',
layout: 'hbox',
items:[{
xtype: 'container',
items: buttonArr,
flex: 1,
layout: {
type: 'vbox',
align: 'stretchmax'
},
autoScroll: true,
height: 200
}, forms]
}).show();
}
});
First time posting, have only started using extjs 2.3 (at my work) and have run into a strange issue. Basically I have an option for a user to get SLD (straight line distance) between a location they have selected and a number of predefined locations, so the users clicks the SLD button, a new window opens which does the following, loads predefined locations into a jsonstore, links this store into a grid in the new window, when the store is created I also send a request to googles directions service to return the driving distance between the locations, on callback I add this data to store which in turns updates the grid.
The issue I see is, the first time the SLD button is clicked, the grid displays the information, and then the google callback adds the extra data into the store and I can see this displayed on the grid. I have a back button on the window, which when clicked returns the user to the menu window, destroys the SLD window and empties the store, so there is no trace of the SLD window any more. The issue will happen now when I click the SLD button again on the main menu, I can see the grid with data but now when the google callback returns and updates the store I see that the cells look like they have been edited and not saved.
On my production machine this issue does not happen when I use Firefox or Chrome, only happens on IE, however I have wrote a small jsFiddle to reproduce the issue and now get the issue to happen on Chrome when I run the test.
I can't understand how it can work correctly the first time, then the second time have this issue, and basically its running the same code as the first time!
This is what my test looks like, have added dummy data and simplified things to reproduce issue
var testData = [
{'name': 'home', 'distance': 16.5, 'driving_distance': 0 },
{'name': 'work', 'distance': 35.2, 'driving_distance': 0 },
{'name': 'gym', 'distance': 12.8, 'driving_distance': 0 },
];
var locations;
// create store and load it with data
function createStore() {
locations = new Ext.data.JsonStore({
data: testData,
sortInfo: {
field: 'distance',
direction: 'ASC'
},
fields: [
{ name: 'name' },
{ name: 'distance', type: 'float' },
{ name: 'driving_distance', type: 'float' }
]
});
var myLocation = new google.maps.LatLng( '55.033778', '-7.125324' );
var anyLocation = new google.maps.LatLng( '54.972441', '-7.345526' );
var directionsService = new google.maps.DirectionsService();
var request = {
origin: new google.maps.LatLng( '55.033778', '-7.125324' ),
destination: anyLocation,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
// get driving distance from myLocation to anyLocation and update locations store
for ( var x = 0; x < locations.data.length; x++ )
{
// call directions service
directionsService.route(request, function(response, status) {
// do stuff if we get a result
if (status == google.maps.DirectionsStatus.OK) {
// update store items to use same value just for text purposes
var distance = response.routes[0].legs[0].distance.value;
distance = distance / 1000;
// update on return call even though it updating the same thing 3 times
locations.data.items[0].set('driving_distance', distance.toFixed(1));
locations.data.items[1].set('driving_distance', (distance + 10.1).toFixed(1) );
locations.data.items[2].set('driving_distance', (distance + 23.3).toFixed(1) );
locations.commitChanges();
}
});
}
}
new Ext.Window ({
// menu normally consists of a combo box in which a user can select SLD
title: 'Menu - cut down',
id: 'rightClickWindow',
headerPosition: 'left',
scope: this,
buttons: [{
text: 'SLD',
id: 'SLDButton',
handler: function () {
// hide menu window
Ext.getCmp('rightClickWindow').hide();
// create store
createStore();
// create SLD window
new Ext.Window ({
title: 'SLD',
id: 'createSLDWindow',
headerPosition: 'left',
width: 450,
scope: this,
items: [{
xtype: 'grid',
id: 'SLDGrid',
singleSelect: true,
store: locations,
columns: [
{id: 'name', header: 'Location', width: 160, sortable: false, dataIndex: 'name'},
{header: 'SLD', width: 80, align: 'center', sortable: false, renderer: 'distance', dataIndex: 'distance'},
{header: 'Driving Distance', width: 90, align: 'center', sortable: false, renderer: 'driving_distance', dataIndex: 'driving_distance'}],
stripeRows: true,
autoExpandColumn: 'name',
enableHdMenu: false,
height: 250,
header: false
} ],
buttons: [{
text: 'Back',
id: 'SLDBackButton',
handler: function () {
// destroy SLD window
Ext.getCmp('createSLDWindow').destroy();
// show menu window
Ext.getCmp('rightClickWindow').show();
// destroy store
locations.loadData([],false);
}
}],
listeners: {
close: function (form) {
// destory everything
Ext.getCmp('createSLDWindow').destroy();
Ext.getCmp('rightClickWindow').destroy();
// destroy store
locations.loadData([],false);
}
}
}).show();
}
}]
}).show();
jsFiddle http://jsfiddle.net/UDkDY/74/
to reproduce click SLD -> back -> SLD
I think there is a problem with the way you update the values :
you send 3 requests (one for each line in the grid), but on the callback of each request you update ALL the lines (when you should only update the line corresponding to the request).
Example :
http://jsfiddle.net/xer0d0he/
-
i have a grid with a checkboxcolumn, all works fine but i would like to only show the checkbox if another field has a certain value. I work with version 3.3.1 but i guess that an example from another version would get me started.
If not possible, disabling the checkbox would also be fine.
Do i have to do that in a renderer or a listener and how ?
var checkColumn = new Ext.grid.CheckColumn({
header: 'Checklist OK ?',
dataIndex: 'checklist_ok',
width: 20,
align: 'center'
});
cmDiverse = new Ext.grid.ColumnModel({
defaults: {"sortable": true, "menuDisabled":false, "align":"right"},
store: storeDiverse,
columns: [
{"id":"id", "header": "id", "hidden": true, "dataIndex": "id", "width": 20},
checkColumn,
...
gridDiverse = new Ext.ux.grid.livegrid.EditorGridPanel({
id : "gridDiverse",
enableDragDrop : false,
loadMask : true,
clicksToEdit : 1,
layout :'anchor',
cm : cmDiverse,
....
You can extend your Ext.ux.grid.livegrid.EditorGridPanel like this:
Ext.extend(Ext.ux.grid.livegrid.EditorGridPanel,{
constructor:function(config){
config = Ext.apply({
cm: this.createColumnModel()
},config);
},
createColumnModel: function(){
PUT YOUR LOGIC HERE AND RETURN AN ARRAY OF COLUMNS...
}
})
Found it myself, added the following renderer to checkColumn
renderer : function(v, p, record){
var type3m = record.get('type3m');
if ((['6M','11e']).indexOf(String(type3m)) != -1){ //if the field type3m contains certain values
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
}
I've got a a Tab panel with a few tabs inside. I'm using the iconCls property in the tabs to give each tab an image along with its title. I'm using the fam fam fam 16x16 icons and the default tab space is cutting the images off at the top/bottom.
I tried messing around with the icon's class by changing the margins but it's not helping. According to the documentation the ext.tab.Tab component has padding and height properties, but setting those is not having an effect on the tab at runtime.
Ext.define('AM.view.Tab.Standard', {
extend: 'Ext.tab.Panel',
alias: 'widget.TabStandard',
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
initComponent: function() {
this.items = this.buildItems();
this.callParent(arguments);
},
buildItems: function(){
var items =
[
{
padding: 10, // nope :(
title: 'Gantt',
autoScroll: true,
iconCls: 'gantt icon',
},
{
height: 10, // nope :(
title: 'Logs',
autoScroll: true,
iconCls: 'logs icon',
},
{
title: 'Help',
autoScroll: true,
iconCls: 'help icon',
}
];
return items
},
});
Perhaps I'm misunderstanding how those properties work, but the everything on the page looks the same.
EDIT: It appears I'm having the same problem with the "Headings" (the bar with the +/-) when used as an accordion panel.
You can customize tabs in a tab panel by using the tabBar property on tabPanel:
var tabpanel = new Ext.tab.Panel({
plain: true,
region: 'center',
tabBar: {
defaults: {
flex: 1, // if you want them to stretch all the way
height: 20, // set the height
padding: 6 // set the padding
},
dock: 'top'
}
});