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()
});
Related
I have created a radio button from the following link, https://github.com/yozef/TiRadioButtonGroup. I am able to see the radio buttons but the respective radio button labels are not showing. How can we display the radio button labels.
My code:
View:
<Alloy>
<Window class="container">
<View id="radiopicker" ></View>
</Window>
</Alloy>
Style:
".container": {
backgroundColor:"red",
layout: 'vertical'
}
"#radiopicker":
{
width: '90%',
top: '25dp'
}
Controller:
(function() {
var radioButton = require('/ui/tiRadioButton');
var radioGroup2 = radioButton.createGroup({
groupId:1,
width:20,
height:150,
layout:'vertical',
radioItemsValue:['One', 'Two', 'Three'],
radioItemsPadding:10,
radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
radioItemsBackgroundImage:'/radioButton.png',
radioItemsWidth:33,
radioItemsHeight:34
});
var button = Ti.UI.createButton({
title:'Get value'
});
button.addEventListener('singletap', function(e) {
alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
});
$.radiopicker.add(radioGroup2);
$.radiopicker.add(button);
})();
$.index.open();
Screenshot:
The label option one, two and three are not displaying. Please help me out of this issue. I need to display the labels too.
I've gone ahead and updated my Module which will give you the result you want... You can fetch it here:
https://github.com/yozef/TiRadioButtonGroup
I think you should put some label near to the radioButtons by yourself. Have a look at my modified code. It is not tested but should do the trick. Maybe you have to play around with the width/height/left etc attributes a bit.
(function() {
var radioButton = require('/ui/tiRadioButton');
var radioGroup2 = radioButton.createGroup({
groupId:1,
width:20,
height:150,
layout:'vertical',
radioItemsValue:['One', 'Two', 'Three'],
radioItemsPadding:10,
radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
radioItemsBackgroundImage:'/radioButton.png',
radioItemsWidth:33,
radioItemsHeight:34
});
//Create a view to hold your labels
var labelsView = Ti.UI.createView({
height:150,
left: "30" //Or whereever you want to place it
layout:'vertical'
});
//Create the labels
var label1 = Ti.UI.createLabel({
text: "One",
height: "34",
width: Titanium.UI.SIZE
});
var label2 = Ti.UI.createLabel({
text: "Two",
height: "34",
width: Titanium.UI.SIZE
});
var label3 = Ti.UI.createLabel({
text: "Three",
height: "34",
width: Titanium.UI.SIZE
});
//Attach the labels to your view and your view to your radioPicker view
labelsView.add(label1);
labelsView.add(label2);
labelsView.add(label3);
$.radiopicker.add(labelsView);
var button = Ti.UI.createButton({
title:'Get value'
});
button.addEventListener('singletap', function(e) {
alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
});
$.radiopicker.add(radioGroup2);
$.radiopicker.add(button);
})();
$.index.open();
I have gone through your code and found that your window background color is set to 'white' or '#ffffff' and in tiRadioButton.js module label color is also set to 'white' or '#ffffff'. Hence you are not able to see the lable.
You can change either the window backgroundColor or label color.
For change windowBackground color :
at abc.tss file
".container": {
backgroundColor:"red", // any color you want
layout: 'vertical'
}
For change Label color :
at tiRadioButton.js file
var radioItemLabel = Ti.UI.createLabel({
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
text: arg.radioItemsValue[i],
font: {}, // Can add your own font styles
color:'#FFFFFF', //Label color
top:isVertical?null:5, // 5 padding between RadioBtn & Label
left:!isVertical?null:5, // 5 padding between RadioBtn & Label
id:i,
});
//**In color field you can change the label color **
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.
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()
});
I'm getting a scrollbar in the Viewport, how can I remove it.
I know that is a strange situation because in the documentation we have this :
The Viewport does not provide scrolling, so child Panels within the Viewport
should provide for scrolling if needed using the autoScroll config.
from viewport sencha doc
My Viewport :
Ext.define('MyViewport', {
extend : 'Ext.container.Viewport',
layout : 'border',
padding : '5 5 5 5',
defaults: {
split: true,
autoScroll : false
},
initComponent : function() {
this.items = [{
region: 'north',
height: 70,
width : '100%',
split : false,
padding : '0 0 5 0',
items:[{
//here some items
}]
},{
region:'west',
collapsible: true,
width: 210,
maxWidth : 210,
autoScroll : false,
items:[{
//here some items
}]
},{
region:'center',
id : 'workspace',
//here I add panels dynamically
}];
this.callParent(arguments);
}
});
am I missing somthing ?!
Like the docs say, a viewport will never get a scrollbar applied directly on to it automatically.
But each of your regions are Ext.panel.Panel components by default which automatically get a scrollbar on overflow.
Try adding a layout: fit config to your viewport.
If that doesn't handle it, add the same config to the panel component that has the scroll bars.