How to show extjs window only in a specific panel. Currently it appears on top of all panels. I have 3 tabs and I am creating and showing window in one of them. I don't want it to be visible when someone changes the tab.
This is a simple what exactly you are looking for
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:"Main Panel",
layout:'hbox',
width:600,height:300,
tbar:[
{text:"CreatWindow",handler:function(){
Ext.create('Ext.window.Window', {
title: 'Renders Only in Panel1',
height: 100,
width: 100,
renderTo:'panel1'
}).show();
}
}
],
renderTo:document.body,
items:[
{xtype:'panel',title:'panel1',id:"panel1",width:300,height:300},
{xtype:'panel',title:'panel1',id:"panel2",width:300,height:300}
]
});
});
Related
I want to add Ext.button.Split into panel's header instead of title. It must be something like switcher of a panel's content and title of the same panel together.
Is there any option in extjs 4 to do that? Or is there better solution instead of Split button? Unfortunately, switcher in panel header is the key requirement, so it must be placed there.
Below works for me ExtJs 4.2.2
{
xtype: 'panel',
......
header: {
titlePosition: 0,
items: [
{
xtype: 'splitbutton',
}
]
}
}
Add the header object to your panel with your tools and add items for buttons.
Ext.create('Ext.panel.Panel', {
width: 300,
height: 200,
renderTo: Ext.getBody(),
header: {
// if you want your button positioned on the right hand side add
// titlePosition: 0,
items: [{
xtype: 'splitbutton',
text: 'test'
}]
}
});
I have an application in ExtJS that uses a JWplayer for reproduce some videos. But i'm experiencing some weird bugs.
When the page loads it seems that the JWPlayer won't load and then I receive a black line where the player should be displayed.
I am loading the jwplayer inside a extjs panel.
Has anyone experienced this? Is there a way to solve that?
I have created a draggable floating panel with an instance of JW Player inside and it works just find.
Check it out, maybe you are doing something wrong there.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel',{
title: 'Testing JW Player',
width: 480,
height: 300,
floating: true,
draggable: true,
layout: 'fit',
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
id: 'testing'
}],
listeners: {
afterrender : function(component) {
jwplayer('testing').setup({
file: "http://videos-jp.jwpsrv.com/zWLy8Jer/videos/HkauGhRi-1753142.mp4?77c801d752d5207784c49e7ed80fb953798fae0fcca03ecf79558491aa7db70fc9392eb19e958e847c3e486d709eab9f57d25c86934c4b6091bc427de8ab078578054aaba8384904c4762bd67442c3809470687047",
image: "http://demo.jwplayer.com/homepage/homepage_preroll.jpg"
});
}
}
});
}
});
You can access my fiddle here: https://fiddle.sencha.com/#fiddle/blb
JWPlayer is a nice library by the way, this was the first time I saw it, nice work.
For those whom may have the same issue that I had.
I was placing the player in a panel but I didn't set the height of the component. Since the player takes a while to load I guess that the Extjs just see it as a common div with no size.
I am trying to vertically center some text in an ExtJS Panel. I have this as a kludge but I want to know the right way?
var instructions = new Ext.Panel(
{
height: 40,
items: [
{
html: '<br>To access an Aircraft Profile, please highlight a row in the table and select the N-Number hyperlink displayed in the summary below the table'
}]
});
Here is what I ended up implementing using the answer below:
var instructions = new Ext.Panel(
{
height: 40,
layout: 'hbox',
layoutConfig: {
align: 'middle'
},
items: [
{
xtype: 'displayfield',
value: 'To access an Aircraft Profile, please highlight a row in the table and select the N-Number hyperlink displayed in the summary below the table'
}]
});
I think you should be able to set your panels layout as 'hbox' and use pack 'center' or alternatively nest a container within the panel with hbox layout and pack center.
I'm following examples in the "ExtJS in Action" book and I ran into a problem with one of them. The code intends to add new panels to a window, unfortunately when the panels being added are collapsed by default, they are not rendered correctly.
Here is the code in question:
var childPnl1 = {
frame: true,
height: 50,
html: 'My First Child Panel',
title: 'First children are fun'
};
var myWin = new Ext.Window({
height: 300,
width: 300,
title: 'A window with a container layout',
autoScroll: true,
items: [
childPnl1
],
tbar: [
{
text: 'Add child',
handler: function() {
var numItems = myWin.items.getCount() + 1;
myWin.add({
title: 'Child number ' + numItems,
height: 60,
frame: true,
collapsible: true,
collapsed: true,
html: 'Yay, another child!'
});
myWin.doLayout();
}}
]
});
myWin.show();
When I run it, I get the result presented in this fiddle:
http://jsfiddle.net/PHaP4/
When I hit the 'Add child' button, the collapsed panels are rendered as very narrow elements, as if width was not properly set.
Is this a bug in Ext or is there a new way of doing this properly in ExtJS4?
The new public 4.0.7 release seems no to have this bug fixed yet.
Looks like a bug in ExtJS 4.0.2, and appears to be fixed in ExtJS 4.0.5. Here is what I found in the release notes:
[EXTJSIV-2547] - Child components not rendered.sized in initially
collapsed, uncontained Panel.
My job has a premium account, so I was able to download and check 4.0.5. You'll have to wait for the general release, though.
Hello I got problem with scroll on my grid.
Here is the code (nothing fancy or special in it)
Ext.define('grid.list',{
alias:'widget.grid.list',
extend: 'Ext.grid.Panel',
title: 'list',
frame:true,
width:325,
store: new axs.dry.cargo.data.store.list,
queryMode: 'remote',
style:{
cursor: 'default'
},
viewConfig: {
autoScroll: true
},
features:[Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: '{name}'
})],
columns: [
{
text: 'Name',
flex: true,
dataIndex: 'name',
sortable: false
}
],
initComponent:function(){
this.on('beforerender',function(){
this.store.load();
});
grid.list.superclass.initComponent.apply(this,arguments)
}
})
Grid is looking good and the scroller is showing BUT over the scrollbar extjs generates a DIV who is making the real problem. Because of that div I CAN'T click on the scrollbar because the transparent DIV is over it.... here is the code of this useless DIV
<div id="gridscroller-1032" class="x-component x-scroller x-scroller-vertical x-component-default x-docked x-docked-right x-component-docked-right x-component-default-docked-right" style="width: 17px; height: 297px; left: 302px; top: 47px; " role="presentation"><div class="x-stretcher" id="ext-gen1392" style="width: 1px; height: 2953px; "></div></div>
I hear opinion that this div is generated for "infinitive grid" but ...
Can you help me with good solusion (removing the element by selecting its ID is not a good solusion)
PS. When I remove the fixet width of my grid.list element the problem gone ... but then it starts showing horisontal scroll bar who looks ugly and I can remove it only by setting the width to fixed size.
PS2. I'm using the default css files and no special styles or anything.
The problem fixed by itself. I have integrate my form in the main project and the scrollbar appears...
I don't know why is that happening, maybe it is extjs bug.