I have panel with border layout:
var panel = new Ext.Panel({
width:'100%',
height:'100%',
layout:'border',
renderTo:'wrapper',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
},
items: [{
title: 'Header',
region: 'north',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0',
html: Ext.get("header-div").getHTML()
}
......
and I have a tree
var tree = Ext.create('Ext.tree.Panel', {
xtype: 'tree-xml',
id:'treegrid',
title: treeTitle,
width: '80%',
height: '80%',
renderTo: Ext.get("tree"),
....
My question is:how can I refernce tree in my panel, which means I want to append the tree into
'north' region of panel.
Thanks.
How to reference components in Extjs:
var treeReference = Ext.ComponentQuery.query ('tree-xml [title=treeTitle])[0]; // basically you are saying get me the first component you find that is a tree-xml and that its title is treeTitle
Check out the docs in sencha.
Be careful to refer to element 0 of the array (query method returns an array even if there is only 1 element matching).
Use methods add and remove from panels and containers to achieve desired functionality.
Best regards.
Related
Im trying to create a carousel where, apart of the active item, the user can preview part of the next and previous items. I made a draw to illustrate it:
I tried things like padding or margin, but anything works.
Here's a carousel to play with: http://jsfiddle.net/XpG8v/
Ext.Viewport.add({
xtype: 'carousel',
height: 300,
width: 300,
items: [{
style: 'background-color: #00ffff;'
},{
style: 'background-color: #ff00ff;'
},{
style: 'background-color: #ffff00;'
}]
});
Thanks!
Simply set the 'itemLength' config to a fixed value, for example:
Ext.Viewport.add({
xtype: 'carousel',
itemLength: 200,
// ...
});
Please let me know, how to add checkbox column in a grid.
I tried the following. But its read only checkbox.
Should I use checkboxModel? if so, then please let me have the complete code
Here you go, an Ext4 example matching any data element:
{
xtype: 'checkcolumn',
header: 'My Checkbox column',
dataIndex: 'myBooleanFieldThatMatchesTheModelFieldOfMyGridStore',
listeners: {// In case you want to perform a specific action on click...
checkChange: me.onCheckChange
},
flex: 1
}
Here is an example of a grid with a checkbox.
var sm = Ext.create('Ext.selection.CheckboxModel');
var grid2 = Ext.create('Ext.grid.Panel', {
store: //
selModel: sm,
columns: //[]
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection',
renderTo: Ext.getBody()
});
How to have 2 lists in one single panel in sencha touch 2?
I can see the first list if i use
layout:'card'
I tried :
layout: {
type: 'vbox',
align: 'stretch'
}
Please let me know how can i have 2 lists inside the same panel.
You need to use the flex config on each of your list.
You can see and example below here : Sencha Fiddle
Hope it helps
create panel with vbox layout inside it create two panel with fit layout and put every list into respective panle
try this method
Hi #Akshatha you can try this into your Ext.Panel,
...
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'list',
width: '40%',
flex: 1,
styleHtmlContent: true,
...
},
{
xtype: 'list',
width: '60%',
flex: 0.5,
styleHtmlContent: true,
...
},
]
...
You can define the width of Panel and you have Ext.List.
I hope help you. :)
I have a problem with EXTJS 4.1 layout.
how to set the column layout for a panel in ext 4.1.
In mozilla its working fine.
But in IE, it was not rendering and moreover, IE is trying to close.
the sample code is,
var panel1 = getPanel1();
var panel2 = getPanel2();
var panel3 = Ext.create('Ext.Panel',{
layout:{type:'table',columns:2},
title:'Panel3',
items:[panel1,panel2],
renderTo:Ext.getBody()
});
Please give me a solution to render the panels in columns in ext4.1 ....
A way that I know works because I do it in my code is to use a hbox layout. I believe this is an equivalent layout for your example:
var panel1 = getPanel1();//make sure this panel contains flex: .5
var panel2 = getPanel2();//make sure this panel contains flex: .5
var panel3 = Ext.create('Ext.Panel',{
layout:{type:'hbox'},
title:'Panel3',
items:[panel1,panel2],
renderTo:Ext.getBody()
});
Have you tried the example that they show in the documentation?
Ext.create('Ext.panel.Panel', {
title: 'Column Layout',
width: 350,
height: 250,
layout:'column',
items: [{
title: 'Column 1',
columnWidth: 0.50
},{
title: 'Column 2',
columnWidth: 0.50
}],
renderTo: Ext.getBody()
});
Suppose I have 3 different Panels [bottomCar0,bottomCar1,bottomCar2] and want to adjust the height and width of them as per my requirement, how can i do that??
My Code :
var bottomCar=new Ext.Panel({
layout:{
type:'hbox',
align:'stretch'
},
defaults:{
flex:1
},
items: [bottomCar0,bottomCar1,bottomCar2]
});
how can i change the defaults??
Thnaks
Sneha
The thing is, that you setted flex:1. This will give the property flex:1 to each one of your items. This will force them to capture the available space, accordingly the remaining space, devided by the number of the setted flex objects.
Like if u have, in your case, 3 items with flex:1, than each will get 33% of the available height.
What you need to do is remove the flex from the defaults and give it to the panel itself, than set the dimensions.
You can set inside the defaults the height and width, if all of them will get the same values
defaults:{
height: 200,
width: 300
}
or set to each item its height and width
items: [
{
title: 'Home',
iconCls: 'home',
height: 200,
width: 300
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen',
height: 100,
width: 150
}
]
More on Flex
Shlomi.
OR you can add "cls" to your panel and adjust it in css file.