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
Related
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
I have an ExtJS 6.2 modern app. What is the proper way to add a button to a grid cell?
I tried using the column renderer fn to return a button but I just see the HTML tags rendered, not the actual element. I also tried using the "widgetcell" component which does render the button but not the button text.
Fiddle.
Using your fiddle as an example, you can make a widget button like this
columns: [
//other columns
{
dataIndex: 'description',
flex: 1,
cell: {
xtype: "widgetcell",
widget: {
xtype: "button",
}
}
}
]
You can do it without widgetcell by:
{
text: "Button Widget ",
flex: 1,
cell: {
xtype: 'button',
text: 'CLICK ME'
}
}
Or with panel
{
text: "Button Widget ",
flex: 1,
cell: {
xtype: "widgetcell",
widget: {
xtype: 'panel',
header: false,
items: [{
xtype: 'button',
text: 'CLICK ME'
}]
}
}
}
I wanted to accomplish the same task but thought I would include a little more complete example. This was the first resource I came across so figured I should post here.
So for my problem I just wanted to pass the data and render a view utilizing that data.To do that I add a column to my grid and added a widgetcell inside that column. The grid column requires a dataIndex but my button wasn't associated with a specific column in my model, so I just added a non-existent column for the required value which worked.
After that you can specify a widget object as a cell config. You can add a handler key and access the record object from the grid like below.
{
xtype: 'gridcolumn',
flex: 1,
width: 80,
dataIndex: 'button',
text: 'Details',
cell: {
xtype: 'widgetcell',
widget: {
xtype: 'button',
text: 'View',
width: '100%',
handler: function(button,e){
let accountData = this.up().up()._record.data
console.log(accountData);}
}
}
}
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've been playing with this for hours and cannot get it to work.
I am trying to add items to a toolbar I have in my view.
I know the proxy is working from the server because I am printing results to console successfully.
please assist... I've been looking in documentation and cant see to find result
Use method addDocked of panel instead method add of dockedItems. (example)
function addToolbar() {
this.up('panel').addDocked({
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'user 1'
}, {
text: 'user 2'
}]
});
};
var filterPanel = Ext.create('Ext.panel.Panel', {
width: 300,
heigth: 300,
title: 'Example',
items: [{
xtype: 'button',
text: 'add toolbar',
handler: addToolbar
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'left',
items: [{
text: 'user 1'
}, {
text: 'user 2'
}]
}],
renderTo: Ext.getBody()
});
For adding new button to existing toolbar in your example use:
view.down('toolbar').add({ text: 'user X' });
I not sure, do you want add new toolbar with buttons, or just want to add new buttons to exist toolbar? This example add new toolbars, as you try to do in your code.
Try something like:
dockedItems: [
xtype: "toolbar",
reference: "myMenu",
items: [...]
]
Then:
this.lookupReference("myMenu").add({text: "new button"});
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