I'm trying to build a FormPanel in my application, made by a field and two buttons.
The problem is that, while textfield is shown, Buttons are not shown on the view!
This is the Login.js view:
Ext.define('appTrial.view.Login',{
extend: 'Ext.form.Panel',
xtype: 'Login',
alias: 'widget.Login',
config : {
id : 'LoginId',
title : 'Welcome',
resizable : false,
collapsible : true,
bodyPadding : '5',
buttonAlign : 'center',
border : false,
trackResetOnLoad : true,
items : [{
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to My New App!!!'
},
{
xtype: 'container',
name: 'mainContainer',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
//width : '100%',
items : [{
layout: {
pack: 'center'
},
html :'Associa attivita',
margin: '80 0 0 0'
},{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name: 'codAttivita'
}]
}],
buttons :[{
text : 'Associa',
itemId : 'btnAssocia',
formBind : true,
ui: 'confirm'
},{
text : 'Reset',
itemId : 'btnReset',
formBind : true,
ui: 'decline'
}]
}]
}
});
Does anyone have any idea?
Thanks in advance
Containers doesn't have the button config. You must define the button config into the formpanel object.
Related
I trying renderTo a panel(Ext.panel with title:'titlet' in the end of code) to the mainView ('Foresto.view.main.Main') or to a part of courusel (id:'mapId') But i havn't got a positive result.
So my quistions:
1) How to render panel to the mainview or to a courusel item ('mapId')
2)What mains approaches in Ext JS 6+, modern toolkit, for render object to the mainview or mainview's elements??
Now my code looks like that:
Ext.define('Foresto.view.main.Main', {
extend: 'Ext.form.Panel',
id:"control-panel",
plugins: 'responsive',
responsiveConfig:{
tall:{
tabPosition:'center'
}
},
xtype: 'app-main',
controller:'menuform',
requires: [
'Foresto.view.map.Map',
'Foresto.view.main.ButtonController',
'Foresto.view.forms.LoginRoom'
],
autosize:true,
padding: 0,
id:"bighBox",
header: {
cls: 'header-cls',
title : {
cls : 'header-title-cls',
text : 'FOREST'
}
},
tools: [{
type: 'menu',
handler: function() {
Ext.Viewport.toggleMenu('top');
}
}],
items:[{
xtype: 'carousel',
id: "mainPart",
flex: 1,
defaults: {
border: true,
ui: 'light'
},
items: [{
title: 'MAP',
id:'mapId',
xtype: 'panel',
layout:'vbox',
padding: 0,
items: [{
xtype: 'panel',
title:'PLACEFORMAP'
}]
},{
title: 'REPORTS',
xtype: 'panel',
cls: 'foresBack',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items:[{
xtype:'button',
cls:'threethbutton',
ui: 'confirm',
text:'REPORT1',
margin:'10px'
},{
xtype:'button',
cls:'threethbutton',
ui: 'confirm',
text:'REPORT2'
}]
}]
}
],
initialize: function() {
Ext.Viewport.add({
xtype:'button',
id:'pan11111',
text:'KAB',
flex:1,
height: 1000,
width: 100,
items:[{
xtype:'tabpanel',
title:'Projects',
layout:'card',
items:[{
xtype:'panel',
title:'11111'
},{
xtype:'panel',
title:'uuuuu'
}]
}]
});
}
}});
now I edit function for rendering panel on viewport. Panel 'pan11111' is rendering, bu viewport cover all other elements, and I can work only with panel and white board viewport, witch cover all classes: –THIS problem was solved by great clearning of coockies
Hi I am using the Extjs 6.0.1 version for my project.
There is a requirement to show the grid panel into the tab panel in my project.
I want to show the some title for the particular tab of tab panel and different title for grid panel. below is code I have try out for the same thing.
1st Grid panel:
Ext.define('com.SomeName', {
extend: 'Ext.grid.Panel',
xtype: 'GridPanelXtype',
id: 'GridPanel',
controller: 'GridPanelController',
title: 'GridPanel <span style ="margin-left: 620px"><img class="Some class" src> Accept</span>',
flex: 1,
layout: 'fit',
columns: [{
header : 'column1',
sortable : true,
flex:1,
menuDisabled: true
},{
header : 'column2',
sortable : true,
flex:1,
menuDisabled: true
},{
header: 'column3',
flex: 1,
sortable: true,
format: 'm/d/y',
menuDisabled: true
},{
header: 'column4',
flex: 1,
sortable: true,
menuDisabled: true
}]
});
2nd tab panel:
Ext.define('com.HomeScreen', {
extend: 'Ext.form.Panel',
xtype: 'newHomePage',
controller: 'tabpanelController',
items: [{
xtype: 'tabpanel',
id: 'advertiseHomeContainer',
anchor: '100% 100%',
border: 2,
layout: 'column',
controller: 'tabpanelController',
items: [{
id: 'tab1',
title: 'Tab Panel title',
xtype : 'GridPanelXtype',
}],
}]
});
Above code only show the tab title(Tab Panel title) and girdpanel with the columns means I can not able to show the "GridPanel"(with image) title or header part. I want to show the tab title and the girdpanel title inside the tabpanel.
Please show me the way to do this thing.
The tab panel title must be defined on tabpanel, not on the item.
xtype: 'tabpanel',
id: 'advertiseHomeContainer',
title: 'Tab Panel title',
anchor: '100% 100%',
border: 2,
layout: 'column',
controller: 'tabpanelController',
items: [{
id: 'tab1',
xtype : 'GridPanelXtype',
}],
Fiddle
As per your comment, you have to use overnesting:
xtype: 'tabpanel',
id: 'advertiseHomeContainer',
anchor: '100% 100%',
border: 2,
layout: 'column',
controller: 'tabpanelController',
items: [{
xtype:'panel',
title: 'Tab title',
items:[{
id: 'tab1',
xtype : 'GridPanelXtype',
}]
}],
Fiddle
I have a window where I have items as in below image.I want give gap between fileds
code:
new Ext.Window({
title : bundle.getMsg('add.camera'),
id:'win-add-camera',
closable:true,
autoHeight:true,
modal:true,
defaults : {
labelWidth: 60,
labelAlign: 'left',
margin: '0 0 20 0'
},
items: [{
xtype:'form',
layoutConfig: {
trackLabels: true
},
id: 'form-camera',
autoHeight:true,
autoScroll:true,
items:[
{
layout:'column',
items:[
{
columnWidth: .50,
bodyPadding:30,
margin: '0 0 20 0',
layout: 'form',
defaults:{anchor:'80%'},
items: [ {
id:'cam-name-id',
fieldLabel : bundle.getMsg('camera.name'),
name : 'cameraName',
margin: '0 0 20 0',
xtype:'textfield',
width:450,
emptyText : bundle.getMsg('enter.camName'),
maxLength:10,
enforceMaxLength:true
,required:true,
},
{
id:'url-id',
fieldLabel : bundle.getMsg('url'),
name : 'cameraWebUrl',
xtype:'textfield',
width:450,
margin: '0 0 20 0',
emptyText : bundle.getMsg('enter.url')
,
maxLength:10,enforceMaxLength:true,required:true,
},
{
id:'place-id',
fieldLabel : bundle.getMsg('place.name'),
maxLength:35,
name : 'cameraPlaceName',
xtype:'textfield',
width:450,
emptyText : bundle.getMsg('enter.place'),required:true
},
{
id:'latitude-id',
fieldLabel :bundle.getMsg('lattitude'),
name : 'cameraLatitude',xtype:'textfield',
width:450,emptyText :bundle.getMsg('enter.lattitude'), growMax: 500,required:true
},
{
id:'longitude-id',
fieldLabel : bundle.getMsg('longitude'),
name : 'cameraLongitude',xtype:'textfield',
width:450,emptyText : bundle.getMsg('enter.long'),required:true
},
{
xtype:'combo',
id: 'camera-combo-id',
name:'cameraStatus',
store : new Ext.data.ArrayStore({
data:[["Enable","1"],["Disable","2"]],
fields : ['cameraStatus','no']
}),
fieldLabel : bundle.getMsg('camera.status'),
displayField :'cameraStatus',
emptyText : bundle.getMsg('advice.select'),
valueField : 'no',
selectOnFocus:true,
allowBlank: false,
autoSelect:false,
mode:'local',
listeners:{
'select': function(){
camera_status_combo_value=Ext.getCmp('camera-combo-id').getValue();
camera_status_combo_value_name = Ext.getCmp('camera-combo-id').getRawValue();
alert(camera_status_combo_value)
alert(camera_status_combo_value_name)
},
'afterrender':function(){
this.getStore().load();
}
}
},
{
xtype : 'combo',
id: 'police-station-name-id',
name:'policeStationName',
width:450,
store : police_station_store,
fieldLabel : bundle.getMsg('policestation'),required:true,
displayField :'policeStationName',
emptyText : bundle.getMsg('selectpolicestation'),
valueField : 'gid',
triggerAction:"all",
selectOnFocus:true,
forceSelection: true,
queryMode : 'local',
listeners:{
'select': function(){
police_stn_id=Ext.getCmp('police-station-name-id').getValue();
police_station_combo=Ext.getCmp('police-station-name-id').getValue();
},
'afterrender':function(){
this.getStore().load();
}
}
},
I got the solution
I have written below line in between fields
{
xtype: 'tbspacer',
height:10
},
and also we can add instead of above code
{
height:10
}
both will work !
Before Adding this code:
after adding the code:
You need to set margin for the fields.
Check this fiddle - https://fiddle.sencha.com/#fiddle/md1
The fiddle is in 5.1 but the config is available in 4.x as well.
Use layout:'hbox' for every row.
But, looks like you should use type: 'label' instead of setting label right in the textfield component.
Here is a fiddle for you: https://fiddle.sencha.com/#fiddle/md3
My layout:
layout: {
type: 'vbox',
align: 'stretch'
},
width: 400,
defaults: {
layout: 'hbox',
margin: 10
},
items: [{
items: [{
xtype: 'label',
text: 'Market',
forId: 'test-1',
flex: 1
}, {
xtype: 'combo',
inputId: 'test-1',
allowBlank: false,
store: store,
queryMode: 'local',
displayField: 'MarketName',
forceSelection: true,
valueField: 'Id',
flex: 3
}]
}, {
items: [{
xtype: 'label',
text: 'Name',
forId: 'test-2',
flex: 1
}, {
xtype: 'textfield',
inputId: 'test-2',
flex: 3
}]
}],
I am using ExtJS 4 and trying to add button on a tab panel header. Please have a look at this jsfiddle:
http://jsfiddle.net/ramarajuv/Sadnj/7/ . You can see it working fine with just the two tabs. Now, modify the same code by adding a tabBar as below:
Ext.create('Ext.panel.Panel',{
renderTo : Ext.getBody(),
id : 'testPanel',
height : 200,
width : 300,
items: [{
xtype : 'tabpanel',
activeTab : 1,
tabBar:[{
dockedItems:[{
xtype: 'button',
text : 'Test Button'
}]
}],
items: [{
title: 'tab1'
},{
title: 'tab2'
}]
}]
});
No Javascript error is thrown, but the button that I want to see to the right of the tab panel header is not coming up. Could you please help how I can bring up a button on the tab panel?
If I understand your question it seems you want the button to be in the tabBar itself and not in its own toobar? If that's the case then you can use the following code available in this fiddle.
http://jsfiddle.net/Sadnj/15/
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
id: 'testPanel',
height: 200,
width: 200,
items: [{
xtype: 'tabpanel',
activeTab: 1,
tabBar: {
items: [{
xtype: 'tbfill'
}, {
xtype: 'button',
text: 'Test Button'
}]
},
items: [{
title: 'tab1',
}, {
title: 'tab2',
}]
}]
});
you can use this:
Ext.create('Ext.panel.Panel',{
renderTo : Ext.getBody(),
id : 'testPanel',
height : 200,
width : 200,
items: [{
xtype : 'tabpanel',
activeTab : 1,
tbar:[{
text : 'txtButton'
}],
items: [{
title: 'tab1'
},{
title: 'tab2'
}]
}]
});
this will make buttons for your tabpanel.
Add button to tabpanel header simply with this:
tabBar: {
items: [
{ xtype: 'tbfill' },//fill the empty space between left and right
{
xtype: 'button',
text: 'Button 1'
}
]
}
I have a tabpanel. In the tab, i have a panel which includes a toolbar and 3 items: [ fieldset, a gridpanel, and another fieldset (or some buttons)]. I cannot get the gridpanel to show scroll bar. It only works if i set the maxheight/minheight of the gridpanel.
I also tried wrapping gridpanel inside a container. No luck.
In the example, i use fit layout. I tried "anchor" layout, and assigned anchor:'100% 50%' to gridpanel, hoping that it would resize when i resize browser. No luck.
Alternatively, if gridpanel is the ONLY item in the tab, autoscroll would work. So it appears when it's inside another panel, autoscroll/ resizing does not work.
Did I miss something here ?
Ext.application({
name: 'MyApp',
launch: function () {
// create the data store
var d = ['company', 100];
var myData = [];
for (var i = 0; i < 50; i++) {
myData[i] = d;
}
var store = Ext.create('Ext.data.ArrayStore', {
fields: [{
name: 'company'
}, {
name: 'price',
type: 'float'
}],
data: myData
});
Ext.create("Ext.container.Viewport", {
layout: {
type: 'border'
},
items: [{
xtype: 'toolbar',
id: 'headerbar',
region: 'north',
height: 30
}, {
xtype: 'toolbar',
id: 'menubar',
region: 'north',
height: 30
}, {
xtype: 'tabpanel',
itemId: 'maintabpanel',
activeTab: 0,
region: 'center',
plain: true,
margins: '5 5 5 5',
layout: 'fit',
items: [{
closable: false,
title: 'Tab',
margins: '0 0 0 0',
items: [{
xtype: 'panel',
title: 'Panel',
layout: 'fit',
tools: [{
type: 'help',
tooltip: 'Help'
}, {
type: 'close',
tooltip: 'Close'
}],
items: [{
xtype: 'fieldset',
title: 'Field Set',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Input'
}]
}, {
xtype: 'gridpanel',
autoScroll: true,
store: store,
columns: [{
text: 'Company',
flex: 1,
sortable: true,
dataIndex: 'company'
}, {
text: 'Price',
flex: 1,
sortable: true,
dataIndex: 'price'
}],
viewConfig: {
autoFit: true
}
}, {
xtype: 'fieldset',
title: 'Field Set 2',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Output'
}]
}]
}]
}]
}, {
xtype: 'box',
id: 'footer',
region: 'south',
html: '<h1> Copyright 2012</h1>',
height: 30
}]
});
}
});
Note that the parent panel of the gridpanel has fit layout, yet it has more than 1 item (the fieldset, the gridpanel, and another fieldset). A fit layout can only have 1 child.
Also, the parent of that fit panel (the one with closable : false - the tab) has no layout definition.
Here's a JsFiddle modified version of your code that works.