i am working in extjs4. i have 'boxselect' as xtype with following configuration=
xtype: 'boxselect',
emptyText: Email
store: store,
displayField: 'emailAddress',
width: 500,
height: 40,
valueField: 'emailAddress',
queryMode: 'local',
allowBlank: false,
submitValue: false,
But when this box is rendering,it already appearing with red border to user. If user not will not entered email and proceed ahead then only i want to show it in rec block. So how to remove this red border of required intially during rendering
Related
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.
I am using SuperBoxSelect as one of my components in a form. As the height of the SuperBoxSelect increases when we select data, I want the height of the form to increase/decrease respectively.
Is there any property which help me achieve this?
{
xtype:'container',
layout:'vbox',
items:[{
xtype: 'boxselect',
closable:true,
height:40,
//fieldLabel:'Discipline',
width:240,
displayField: 'fullName',
valueField: 'userID',
queryMode: 'remote',
forceSelection: true,
store : store
}
i have a view where i have list, now i required a header sub-title for view, which should not get scroll.
If i place a panel inside view it's start scrolling...i need a stickey one. Need help.
config: {
AccountName: '',
AccountNumber: '',
style: 'background-image: -webkit-linear-gradient(bottom, rgb(223,223,223) 60%, rgb(199,199,199) 80%);',
layout: 'vbox',
height: '100%',
scrollable: true,
items: [ .....
]
You should be able to just set the doc property of an item.
For example a docked toolbar component.
items:[
{
xtype: 'toolbar',
docked: 'top'
}
]
The docked property will not be part of the parents (your list) scrollable component.
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,
// ...
});
//Here i am creating overlay on button tap event and loading another view using ContentEl:''. Overlay working fine with animation but i need to hide this overlay with animation when user select a particular item in that overlay.
if (!this.overlay)
{
this.overlay = Ext.Viewport.add({
xtype: 'panel',
id:'menuOverlayView',
modal: true,
hideOnMaskTap: true,
centered: true,
scroll: 'vertical',
autoDestroy:false,
floating: true,
showAnimation: {
type: 'slide',
duration: 4000,
direction:'down'
},
hideAnimation: {
type: 'slide',
duration: 4000,
direction:'up'
},
contentEl:'menuViewid',
top: Ext.os.deviceType == 'Phone' ? '20%' : '20%',
width: Ext.os.deviceType == 'Phone' ? 260 : 700,
height: Ext.os.deviceType == 'Phone' ? 220 : 600
});
}
this.overlay.show();
// And my code to hide this overlay in controller is below .I am accessing panel id and hiding the panel but panel should hide with animation like as i mentioned above hideAnimation
var overlayView=Ext.getCmp('menuOverlayView');
overlayView.setHidden(true);
//so what i should do to hide panel with with smooth scrolling up.. i am writingng below sentence but not working giving error
overlayView.hideAnimation({type: 'slide', direction: 'up', duration:1000});
To hide an overlay panel, you need to call panel's hide() method.
Ext.getCmp('menuOverlayView').hide();
and then try your hideAnimation code.