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
Related
datefield in scrollable container is not rendering its picker properly. Here is the fiddle.
https://fiddle.sencha.com/#fiddle/17l8
Ext.application({
launch : function() {
Ext.create('Ext.container.Container', {
layout:'anchor',
scrollable:true,
width: 400,
height:'100px',
renderTo: Ext.getBody(),
border: 1,
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
defaults: {
labelWidth: 80,
// implicitly create Container by specifying xtype
xtype: 'datefield',
flex: 1,
style: {
padding: '10px'
}
},
items: [{
xtype: 'datefield',
name: 'startDate',
fieldLabel: 'DOB'
},{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},{
xtype: 'textfield',
name: 'age',
fieldLabel: 'Age'
}]
});
}
});
Go to the fiddle, First enter the date, scroll down and enter name and age. Now again scroll to top and try to modify the date. Screen goes off. Screen will return when you give a mouse click.
PS: this is occuring only in EXt js 6. Not in any earlier version.
Figured it out...
in scorallable container, picker is not aligning to component after layout. We are doing it manually with the below override.
Ext.override(Ext.picker.Date, {
afterComponentLayout: function (width, height, oldWidth, oldHeight) {
var field = this.pickerField;
this.callParent([
width,
height,
oldWidth,
oldHeight
]);
// Bound list may change size, so realign on layout
// **if the field is an Ext.form.field.Picker which has alignPicker!**
if (field && field.alignPicker) {
field.alignPicker();
}
}
});
How to create something like:
var simple = Ext.widget({
xtype: 'form',
layout: 'form',
collapsible: true,
frame: true,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
}],
buttons: [{
text: 'Save',
}]
});
but when i click on collapse button stay visible?
Any Ideas?
It is possible to make this kind of behavior when panel is collapsed
enter image description here
an when it is expanded to show it with text and the icons align left to the text.
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 need to intimate the user that toolbar contains the scroll bar and there is some more buttons in the toolbar.
Any sample code for the issue.
thanks in advance...
You may try something like this (in Sencha Touch 2):
var toolbar = Ext.create('Ext.Panel', {
id: 'meetingList',
flex: 1,
scrollable: {direction: 'horizontal', indicators: false},
defaults: {width: 200},
items: [{
xtype: 'button',
text: 'Button1'
},{
xtype: 'button',
text: 'Button2'
},
....
]
});
i'm trying to load some content to an existing panel with #{component}.load({url:''}); but the panel has already some content, how do i clear the panel content?
See the panel method removeAll(...).
var panel = new Ext.Panel({
title: 'Panel',
id: 'panel',
layout: 'form',
items:
[
{
xtype: 'textfield',
fieldLabel: 'Text',
value: 'Textfield'
}
]
});
panel.removeAll(true);
Does this work for you?
Ext.getCmp('xxxxxxxxxxx').getStore().removeAll();
WHERE XXXXXXXXX IS YOUR STORE.