Develop Reference

ExtJS Toolbar: how keep an item always directly accesible, never put in the "more" menu

I have an ExtJS toolbar at the top of my panel that can have between 5 and 10 actions (buttons), plus a search text field as the last item.
Depending on the size of the window, all items may fit directly on the toolbar, or some of them may get put into a "more" menu button. I need to specify one of those button to have some sort of priority so it is the last one to be put on the "more" button. Or even to never be put on it.
Is there any way to achieve this?

Solution:
Add items with code. I don't know if this is exactly your case, but I often use this to arrange buttons in toolbar:
Working example:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Trnd.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 400,
height: 500,
modal: true,
closable: true,
resizable: true,
layout: 'fit',
fillToolbar: function() {
var me = this;
me.toolbar.add(me.button5);
me.toolbar.add(me.button1);
me.toolbar.add(me.button2);
me.toolbar.add(me.button3);
me.toolbar.add(me.edit);
me.toolbar.add(me.button4);
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.button1 = Ext.create('Ext.button.Button', {
text: 'Button 1'
});
me.button2 = Ext.create('Ext.button.Button', {
text: 'Button 2'
});
me.button3 = Ext.create('Ext.button.Button', {
text: 'Button 3'
});
me.button4 = Ext.create('Ext.button.Button', {
text: 'Button 4'
});
me.button5 = Ext.create('Ext.button.Button', {
text: 'Button 5'
});
me.edit = Ext.create('Ext.form.TextField', {
text: 'Edit'
});
me.toolbar = Ext.create('Ext.toolbar.Toolbar', {
enableOverflow: true,
items: []
});
me.panel = Ext.create('Ext.panel.Panel', {
tbar: me.toolbar
});
me.add(me.panel);
me.fillToolbar();
}
});
var win = new Trnd.TestWindow({
});
win.show();
});
Notes:
Tested with ExtJS 4.2

I solved this by wrapping the toolbar in a container like this:
tbar: [
{
xtype: 'container',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'mail-compose-toolbar',
flex: 1
},
{
xtype: 'mail-compose-search',
itemId: 'mailComposeSearch',
width: 200
}
]
}
]
The search field is of fixed width and the toolbar has a flex:1 so it stretches.

How to resize a pop up based on a loaded text in sencha?

This is my container where I want to load text, this code is inside a modal (pop up) I need that my pop up take the text height that was loaded.
Ext.define('Base.view.Notes', {
extend: 'Ext.Container',
xtype: 'notes',
config: {
modal: true,
scrollable: null,
itemId: 'generalNotesContainer',
width: '90%',
height: '90%',
margin: '2em 5% 5% 5%',
maxHeight: "90%",
minHeight: "90%",
floating: true,
centered: true,
layout: 'vbox',
items: [
//other item
{
xtype: 'container',
itemId: 'generalNotesContent',
padding: "10",
scrollable: true,
flex: true,
html: ''
}
]
}
});

Use Ext.window.MessageBox and dont give any configs like height,width.It will handle dimensions as per its content.Currently you have used Container as parent,replace it by messagebox.

I got to resize the pop up doing this:
Ext.define('Base.controller.WorkOrders', {
config: {
refs: {
woView: 'woview',
generalNotesContent: 'container#generalNotesContent',
},
control:{
woView:{
activate: 'woViewActivate'
}
}
},
woViewActivate: function(){
this.loadNotes();
},
loadNotes: function(){
var gNotesView = Ext.widget('notes');
Ext.Viewport.add(gNotesView);
var html = "<div>My html</div>"
this.getGeneralNotesContent().setHtml(html);
var NotesHtml = this.getGeneralNotesContent();
this.getGeneralNotesContent().setHeight(NotesHtml.innerHtmlElement.dom.scrollHeight);
//if it is needed extra height we can do this
//var extraHeight= 70;
//this.getGeneralNotesContent().setHeight(NotesHtml.innerHtmlElement.dom.scrollHeight+ extraHeight);
gNotesView.show();
}
this is how how looks my screen

How to temporary expand collapsed panel on mouse over title bar in extjs?

I have a border layout with two panels inside center and west regions. By default, west panel is collapsed and if you click on any part of the title bar while is collapsed, the panel is temporary expanded until you move the mouse pointer out of its boundaries.
What I want to do is to have this same "temporary expand" not by clicking on the panel's title bar, but just hovering over it. How can I make that possible?
Here is my code:
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'Center Panel',
region: 'center',
flex: 1
},{
xtype: 'panel',
title: 'West Panel',
region: 'west',
flex: 1,
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true
}]
}).show();
});
Please refer to the following fiddle for your convenience: http://jsfiddle.net/3FJ58/3/
Thanks in advance!

Yes, this is possible but you have to extend from Ext.panel.Panel to override the getPlaceholder method that is used by the borderlayout
getPlaceholder: function(direction) {
var me = this,
collapseDir = direction || me.collapseDirection,
listeners = null,
placeholder = me.placeholder,
floatable = me.floatable,
titleCollapse = me.titleCollapse;
if (!placeholder) {
if (floatable || (me.collapsible && titleCollapse)) {
listeners = {
mouseenter: {
// titleCollapse needs to take precedence over floatable
fn: (!titleCollapse && floatable) ? me.floatCollapsedPanel : me.toggleCollapse,
element: 'el',
scope: me
}
};
}
me.placeholder = placeholder = Ext.widget(me.createReExpander(collapseDir, {
id: me.id + '-placeholder',
listeners: listeners
}));
}
// User created placeholder was passed in
if (!placeholder.placeholderFor) {
// Handle the case of a placeholder config
if (!placeholder.isComponent) {
me.placeholder = placeholder = me.lookupComponent(placeholder);
}
Ext.applyIf(placeholder, {
margins: me.margins,
placeholderFor: me
});
placeholder.addCls([Ext.baseCSSPrefix + 'region-collapsed-placeholder', Ext.baseCSSPrefix + 'region-collapsed-' + collapseDir + '-placeholder', me.collapsedCls]);
}
return placeholder;
}
See the updated JSFiddle
Overriding is at least the cleanest way IMO. But it would also be possible to manipulate the placeholder created by the borderlayout.
#JoseRivas already posted something like this but with some issues I will add the snipped how this can be done in a cleaner way
listeners: {
afterrender: function(p){
p.placeholder.getEl().on('mouseenter', function(){ p.floatCollapsedPanel() })
}
}
See the updated JSFiddle

jacoviza. Can you try to capture focus event of panel. this link helps you. Extjs panel. Keyboard events

add a listener to the el of the placeholder for mouseover and then call the floatCollapsedPanel()
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'panel1',
region: 'center',
flex: 1
}, {
xtype: 'panel',
title: 'panel2',
region: 'west',
flex: 1,
id: 'mypanel2',
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true,
listeners: {
afterrender: {
fn: function (self) {
self.placeholder.getEl().on('mouseover', function () {
var panel = Ext.getCmp('mypanel2');
panel.floatCollapsedPanel()
})
}
}
}
}]
}).show();
});

Extjs 4 cellEditing plugin doesn't work with more then one grid

I have a simple page with 2 or more grids and I want to use CellEditing plugin to edit cells of those grids.
If I have only a grid all works well, but if I make 2 grids (or more) CellEditing plugin stop to work.
Anyone know how to solve this problem?
I have made a little minimized example that is affected with this problem.
In this example you can try to add a row to the first grid and double click to edit that grid. As you can see cell editing doesn't work at all.
If you add and edit the cell in the second grid, it work.
here you can found the example in jsfiddle:
http://jsfiddle.net/eternasparta/amHRr/
and this is the javascript code:
Ext.require([
'Ext.form.*',
'Ext.tip.*']);
var store = Ext.create('Ext.data.Store', {
fields: ['label'],
data: []
});
Ext.define('AM.view.editpanel.CustomList', {
extend: 'Ext.container.Container',
alias: 'widget.sclist',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'grid',
plugins: [],
selModel: {
selType: 'cellmodel'
},
tbar: [{
text: 'Add',
actionId: 'add',
handler: function (th, e, eArg) {
var store = th.up('grid').store;
var r = Ext.create(store.model.modelName);
store.insert(0, r);
}
}],
height: 200,
store: store,
columns: [{
text: 'Name',
dataIndex: 'label',
flex: 1,
editor: {
xtype: 'numberfield',
allowBlank: false
}
}, {
xtype: 'actioncolumn',
width: 30,
sortable: false,
actionId: 'delete',
header: 'delete',
items: [{
tooltip: 'tool'
}]
}],
flex: 1
}],
flex: 1,
initComponent: function () {
this.items[0].plugins.push(Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
}));
this.callParent(arguments);
var sto = Ext.create('Ext.data.Store', {
fields: ['label'],
data: []
});
this.down('grid').bindStore(sto);
this.down('grid').columns[0].text = 'Name';
this.down('grid').columns[0].dataIndex = 'label';
}
});
Ext.onReady(function () {
Ext.QuickTips.init();
var grid1 = Ext.create('AM.view.editpanel.CustomList', {
renderTo: Ext.getBody()
});
var grid2 = Ext.create('AM.view.editpanel.CustomList', {
renderTo: Ext.getBody()
});
});
Any help is appreciated, thank you!

Just put configs of Object or array type (in your case - items) inside initComponent: demo.
For more info see my answer here.

You can create separate objects for each grid like
//For grid 1
var rowEditing1 = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: true
});
//For grid 2
var rowEditing2 = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: true
});
It will create different instances for the different grids. Tested Working fine :)

Fading a picture with sliders [Sencha Touch]

I wanted to ask for help cause I can't find any apropriate answers.
I'm developing an app which has 2 modules, one left and one right side that i can enable/disable with a toggle. Each side has a picture with a slider below. The slider has 4 steps which change the pictures. Now I want the pictures to have a fade animation onChange. I can't find an example that comes close enough to my problem.
Here is the code:
{
xtype: 'container',
name: 'rightContainer',
flex: 1,
padding: '2',
items: [
{
xtype: 'container',
id: 'containerr',
flex: 1,
html: '<img src="boerse_icon1.png" />',
margin: 25,
},
{
xtype: 'container',
flex: 1,
docked: 'bottom',
items: [
{
xtype: 'sliderfield',
id: 'sliderr',
disabled: true,
value: 0,
minValue: 0,
maxValue: 3,
margin: 25,
flex: 1,
listeners: {
change: function( me, Slider, thumb, newValue, oldValue, eOpts) {
if (newValue == 0) {
Ext.getCmp('containerr').setHtml('<img src="boerse_icon1.png" />');
}
if (newValue == 1) {
Ext.getCmp('containerr').setHtml('<img src="boerse_icon2.png" />');
}
if (newValue == 2) {
Ext.getCmp('containerr').setHtml('<img src="boerse_icon3.png" />');
}
if (newValue == 3) {
Ext.getCmp('containerr').setHtml('<img src="boerse_icon4.png" />');
}
}
}
}
]
}
]
}
this is just the right container. I'm running Sencha Touch framework 2.0
TIA

What you need to do is basically:
Create a panel with the following layout:
layout: {
type: 'card',
animation: {
type: 'fade',
duration: 2000
}
}
Then you create a slider with a listener on the change event:
listeners: {
change: function(me, Slider, thumb, newValue, oldValue, eOpts) {
panel.setActiveItem(newValue);
}
}
Fill the panel with items (images) and you are good to go.
Just for the sake of it I've put together a working Senchafiddle for you to experiment with:
Senchafiddle example
Hopefully this helps you!

May be this work.
{
xtype: 'container',
id: 'containerr',
showAnimation :'fadeIn',
flex: 1,
html: '<img src="boerse_icon1.png" />',
margin: 25,
},