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
}
Related
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.
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
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,
// ...
});
I am trying to display a grid but add a panel in between List of customers and the columns Customer Id, active, firstname last name, email address.
I need to add a panel between these 2 componants. And in that panel i will be having different UI elements. How can i do this ?
Well I believe you have just a grid with The title list of costumers, The easiest way is to have a panel and a grid (grid with no title) into another panel with the title.
{
xtype: 'panel',
title: 'List of customers',
layout:'border',
items: [
{
//the panel you want
xtype: 'panel',
region: 'north',
height: 100,
},
{
//your current grid without a title
xtype: 'gridpanel',
region: 'center',
height: 300,
}
]
}
I need to add panel, with title "List if Customers" and vertical layout. In it you need to add two items: your new panel, and that grid (without title). There you will get what yout want.
{
xtype: 'panel',
layout: {
type:"vbox",
pack:"start",
align:"stretch"}
title:"List of Customers",
items: [ ... your new panel and grid .. ]
}
I've tried adding style: float: right to the button but it isn't working.
myapp.cards.home.add({
xtype: 'button',
id: 'previmagebutton',
// text: 'p',
iconCls: 'arrow_left',
iconMask: true,
style: 'float: right'
});
myapp.cards.home = new Ext.Panel({
scroll: 'vertical',
id: "home-card",
layout:{
type:"vbox",
align:"center"
},
items: [header]
});
myapp.mainPanel = new Ext.Panel({
fullscreen: true,
layout: "card",
cardAnimation: 'slide',
items: [myapp.cards.home]
});
I have to use the add method if that is what's causing the problem. Many thanks.
In your myapp.cards.home object you have the layout set up to align:"center".
I've succeeded in creating a floating button by using
floating:true
config on the button. It is a private member, so I'm still looking for an official way.
This should work ::
layout : {
type : 'vbox',
align : 'left'
}
or you can add a spacer if its in the toolbar, or if you stretch the element, then add another hbox element on its side with a flex that occupies as much space that you don't need