Develop Reference

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

ExtJs DataView height inside a vbox

I've got a profile home view (Home2). In this view a want to show a top docked title bar, a user profile info and user's posts.
Ext.define('FreescribbleApp.view.Home2', {
extend: 'Ext.Panel',
xtype: 'homepage2',
config: {
title: 'Home',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items:[
{
xtype: 'titlebarview'
},
{
xtype: 'userinfoview',
itemId: 'userInfoWrapper',
height: 150
},
{
itemId: 'homeStage',
autoScroll: true
}
]
}
});
I also have a DataView:
Ext.define('FreescribbleApp.view.PostList', {
extend: 'Ext.dataview.DataView',
xtype: 'postlist',
config: {
scrollable: false,
defaultType: 'postitem',
useComponents: true
}
});
which lists DataItems:
Ext.define('FreescribbleApp.view.PostItem', {
extend: 'Ext.dataview.component.DataItem',
xtype: 'postitem',
requires: ['Ext.field.Text'],
config: {
style: 'background-color: #f00',
height: 100,
styleHtmlContent: false,
authorName: {
height: 30,
style: 'background-color: #0f0'
},
dataMap: {
getAuthorName: {
setHtml: 'userName'
}
},
},
applyAuthorName: function(config) {
return Ext.factory(config, Ext.Component, this.getAuthorName());
},
updateAuthorName: function(newAuthorName, oldAuthorName) {
if (newAuthorName) {
this.add(newAuthorName);
}
if (oldAuthorName) {
this.remove(oldAuthorName);
}
}
});
in my HomeController I create a PostStore, fill it with some posts and add to the DataView. After that I add the DataView to my Home2-View Element HomeStage:
var postStore = Ext.create('FreescribbleApp.store.PostStore', {
params: {
user: localStorage.getItem('userId'),
token: localStorage.getItem('token'),
target: localStorage.getItem('userName')
}
});
postStore.load();
postStore.on('load', function(){
var currentView = Ext.create('FreescribbleApp.view.PostList');
currentView.setStore(postStore);
homeStage.add(currentView);
});
I can't see any items till I set height of the DataView. It is a common issue, bun in my case I cannot set my HomeStage to 'fit' since it's only a part of Home2 and the item userinfo should get scrolled with the posts. So how can I set size of my DataView dynamicly?
I also see in my Sencha debuger for Chrome that between my DataView-List and my DataItems is a Container, which has the right heigh of all the items inside. can I just get the size of this container and set i for my DataView? Will it work and will it be a good practice?

I'm sorry, i just had to set scrollable: null, and not false in my DataView!

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();
});

Changing accordion to vbox only renders the first child item

Initially this panel had accordion layout. Both the child panels where shown then. But as soon as I changed it to vbox, it shows the second panel. But no tree inside!
See the image.
Related Code
OurApp.online_tree_store = Ext.create('Ext.data.TreeStore', {
root : {
expanded : true,
children : []
}
});
OurApp.online_tree = Ext.create('Ext.tree.Panel', {
store : OurApp.online_tree_store,
title : 'Online',
region: 'north',
useArrows : true,
rootVisible : false,
listeners : {
itemdblclick : contactitemdblclick
}
});
/// Note: Offline tree is exactly the same as online tree.
Ext.create('Ext.panel.Panel', {
closable : false,
width : 300,
maxWidth : 400,
itemId : 'viewport-contacts',
constrain : true,
layout : 'accordion', // <--- layout changed to vbox or border
region : 'west',
hidden : true,
border : true,
defaults : {
height : '50%', // <--- used for vbox
},
tbar : [{
xtype : 'button',
text : 'Sign out',
iconCls : 'icon-disconnect',
handler : function() {
}
}],
items : [OurApp.online_tree, OurApp.offline_tree],
});

height: '50%' should be flex: 1.
You'll also want to specify align: 'stretch'
Ext.require('*');
Ext.onReady(function() {
var panel = Ext.create('Ext.panel.Panel', {
renderTo: document.body,
width: 400,
height: 400,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
title: 'P1',
flex: 1
}, {
title: 'P2',
flex: 1
}]
});
});

getter returning undefined

i am using sencha touch 2 to build an app.
i Have the following view:
Ext.define("DRT.view.Pbox", {
extend: 'Ext.form.Panel',
xtype: 'pboxcard',
config: {
floating: true,
centered: true,
modal: true,
height: 200,
wifth: 300,
styleHtmlContent: true,
html: 'Hi this is a popup',
items: [
{
xtype: 'button',
action: 'hide',
ui: 'confirm',
docked: 'bottom'
}
]
}
});
in my controller i have the follow ref:
config: {
refs: {
home: 'homecard',
pbox: 'pboxcard',
}
}
and i have one the following function:
showError: function(){
var popup = this.getPbox();
console.log(popup);
Ext.Viewport.add(popup);
popup.show();
}
but for some reason popup is undefined. and i cant seem to find out what the problem is

sorry guys i figured it out ... posted it a little too soon i guess. had to do this instead
pbox: {
selector: 'formpanel pboxcard',
xtype: 'pboxcard',
autoCreate: true
},