I trying to make both numberfield and dropdown box in same grid cell. But I haven't got the correct solution. Can anyone knows about logic Please help me.
You can create hbox layout fieldcontainer for wrap you components.
{
xtype: 'widgetcolumn',
flex: 1,
widget: {
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
xtype: 'combobox',
flex: 1
}, {
xtype: 'numberfield',
flex: 1
}, ]
}
}
fiddle
Related
I am trying to design a layout like the one shown in the image. I tried the following code
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
defaults: {
// applied to each contained panel
bodyStyle: 'padding:20px'
},
items: [{
// This is the component A in layout image
xtype: 'textfield',
fieldLabel: 'Text-1'
},{
// This is the component B in layout image
xtype: 'textfield',
fieldLabel: 'Text-2'
},{
// This is the component C in layout image
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
colspan: 2
}],
layout: {
type: 'table',
columns: 2,
align:'stretch'
},
});
}
});
But I'm not able to make the colspan work for the textarea field. The output of the above code looks something like this.
Can anyone please help me to make this one work?
PS: I tried emulating the table layout by creating a container - Hbox layout combination. That one works. But I still need to get this one working.
As #qmat suggests, you need to assign a percentage width to your textareafield, in order to give it the full width. The colspan is working as intended, but the textarea uses its standart width.
{
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
width: "100%", // <- gives the textarea the full width
colspan: 2
}
The align:'stretch' config has no effect, it is not an actual config of the table layout.
See the ExtJs 4.2.5 docs and the working Sencha Fiddle.
Hope This will work for you.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
items: [{
// This is the component A in layout image
xtype: 'textfield',
width:250,
emptyText :'A'
},{
// This is the component B in layout image
xtype: 'textfield',
width:250,
emptyText :'B'
},{
// This is the component C in layout image
xtype: 'textfield',
width:500,
colspan:2,
emptyText :'C'
}],
layout: {
type: 'table',
columns: 2
},
});
}});
You can check the link below and adjust width size as your requirment. Also add css if you want.
https://fiddle.sencha.com/#fiddle/1at3
I would like to display multiple grid on page, grid should not overlap each other and all the grid should populate horizontally , every request should create a new grid on the same page so that we can compare the data very easily across the grid. Please help me how to do that in the EXTJS. I don't have much idea of EXTJS.
do you want to generate grids dynamically or their quantity is static? can you provide you code to work with?
is your answer as simple as :
{
xtype:"container",
height: 353,
width: 994,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'gridpanel',
flex: 1,
title: 'My Grid Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
}
]
},
{
xtype: 'gridpanel',
flex: 1,
title: 'My Grid Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
}
]
},
{
xtype: 'gridpanel',
flex: 1,
title: 'My Grid Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
}
]
}
]
}
Create a main panel and set its layout to hbox,then add grids dynamically to that panel's item list on user's request
Can we add combo box in grid header in extjs ?
we have a special requirement here, if anybody has idea then please let me know.
Thanks
Deepak
If you want it in the grid column header (for example to implement custom filters), look at http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#big-data-grid
Basically, you configure items in the column configuration and off you go:
Ext.define('KitchenSink.view.grid.BigData', {
extend: 'Ext.grid.Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'status',
text: 'Item status'
items: [
{xtype: 'combobox'}
]
}
]
});
You can use extjs tbar to implement components to grid header:
tbar: [
{ xtype: 'button', text: 'Button 1' }
]
or:
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [
{ xtype: 'button', text: 'Button 1' }
]
}]
to implement combobox, best way is to define custom combobox component and provide alias for it, then in your grid tbar just say xtype: 'mygridcombo'
Here is a example.
This works for me well
{
text : 'Save Energy Mode',
dataIndex: 'fs',
items: [{
xtype: 'combobox',
padding: 2,
flex: 1
}]
}
or simply (if you do not need title text)
columns: { items: [{ xtype: 'combobox'}] }
If you can have it in the grid panel's toolbar, then Davor's suggestion is the way to go. If you actually need it in the grid's header (e.g., like for filtering on columns), you might check out the Grid Filtering example in the Ext JS docs: http://docs.sencha.com/extjs/4.2.1/#!/example/grid-filtering/grid-filter-local.html
I want the following layout (the chart count in the top right is dynamic):
I tried to take a border-layout for the main container. Chart1 is region: 'west' and the rest is in region: 'center'.
In the center, I got a vbox container, with 2 containers, one for the charts (top) and one is the grid (bottom)
The Problem is now, that these 2 containers want a fixed width, or else they get a zero width...
Also I want to have all the containers to be fluid, so I can resize everything without getting empty spaces.
I read about using flex: 1 if I want some containers in a vbox to to get a 100% width, but this didn't work. It just made the 2 containers in the vbox use the same height.
Any ideas?
How about something like this (quickly drawn in the architect):
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
height: 600,
width: 1000,
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'My Window',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'fit'
},
items: [{
xtype: 'chart'
}]
}, {
xtype: 'container',
flex: 4,
layout: {
align: 'stretch',
type: 'vbox'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [{
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}]
}, {
xtype: 'gridpanel',
flex: 1,
title: 'My Grid Panel',
}]
}]
});
me.callParent(arguments);
}
});
Although that way the Flex value of the second container has to account for the amount of charts you're displaying horizontally.
Have you tried table layout? It's quite easy to create such layout with it. Example:
Ext.onReady(function(){
Ext.create('Ext.Viewport', {
renderTo: Ext.getBody(),
style: 'border: 1px solid red',
layout: {
type: 'table',
columns: 5,
tdAttrs: {
style: 'padding: 20px; border: 1px solid blue;'
}
},
defaults: {
bodyStyle: 'border: 1px solid red'
},
items: [
{ xtype: 'panel', html: 'Chart1', rowspan: 2 },
{ xtype: 'panel', html: 'Chart2' },
{ xtype: 'panel', html: 'Chart3' },
{ xtype: 'panel', html: 'Chart4' },
{ xtype: 'panel', html: 'Chart5' },
{ xtype: 'panel', html: 'Grid', colspan: 4 }
]
});
});
Working sample: http://jsbin.com/ojijax/1/
To have dynamic layout IMO the best solution is to use hbox and vbox layouts.
For example you can wrap charts from 2 to n into one container, let's say chartPanel - this will have hbox layout. Then wrap chartPanel and grid into another container - panel with vbox layout. Then again wrap chart1 with panel with hbox layout. Then you must set align: stretch for each box layout, and proper flex to divide screen equaly.
Working sample: http://jsfiddle.net/75T7h/
I think you are loading chart2, 3, 4 , 5 in a for loop using panel.add option of extjs (better way).
If so then keep a count of these panels (here 4) and for each panel while assigning width you give like
width:(1/countOfchrtLIst2345) * grid.getWidth(),
So whatever count comes it will divide available width between all these horizontal panels within your top vbox and allocates.
In your example it assigns
(1/4) * 200
(thinking grid has width of 200)
I need to set a dynamic text (units of measurement,Eg:*C,mm) beside a textfield
I declared the text field as,
{
xtype:'textfield',
hidden:true,
id:'XX',
fieldLabel:' Value',
name:'Value'
}
and label as
{
xtype:'label',
id:'X',
name:'X'
}
I could set and get the values but the alignment is the problem. Plz help me with that.
Thank you
You probably need to wrap this textfield into fieldcontainer, something like:
{
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Temperature',
}, {
xtype: 'displayfield',
value: '*C'
}]
}