How can i add grid in the center of the tab panel..My grid is not taking margins,style:{margintop:'10px'} even height: and width:
here is my grid:-
{
title: 'Credit Card',
id:'credit_tab',
html:'html',
items:[{
xtype:'grid',
title: 'Simpsons',
resizable: true,
// margins:'20 20 20 20',
style:{marginLeft:'200px',marginTop:'30px'},
//store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
// height: 100,
width: 100,
// renderTo:Ext.getBody()
}]
}
Try nesting the grid into a container. Then from the container you can try out different sizes and layouts to place it exactly where you want. Here's one example.
I would remove the "style" padding/position, at least to start and see how you like within the container. Then pad/position from there. Try this:
{
title: 'Credit Card',
id:'credit_tab',
html:'html',
items:[{
xtype: 'container',
layout: {
type: 'hbox',
align: 'center',
pack: 'center',
},
items: [{
xtype:'grid',
title: 'Simpsons',
resizable: true,
// margins:'20 20 20 20',
height: 200,
//store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
// height: 100,
width: 500,
// renderTo:Ext.getBody()
}]
}]
}
Do not use CSS positioning (margins etc.) for that purpose. Use layout: center.
Here is an example: https://fiddle.sencha.com/#fiddle/s7h
Related
How we can fixed the textbox width in extjs,Here i used the width property also but first time its displaying perfect but when we click on outside the textfield automatically width is changed. here is my code please provide any suggestion
Ext.Loader.setConfig({
enabled: true
});
Ext.require([
'Ext.form.*',
'Ext.window.Window'
]);
Ext.onReady(function() {
//renderTo: Ext.getBody();
var container = Ext.create('Ext.container.Container', {
items: [{
contentPaddingProperty: '10 10 10 10',
renderTo: Ext.get('main'),
border: false,
html: '<img src="image/syneLogo.jpg" height="100" width="950"/>'
}]
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.get('main'),
name: 'myForm',
width: 950,
height: 800,
border: false,
frame: false,
// title:'Login',
bodyBorder: false,
fieldDefaults: {
labelWidth: 60
},
padding: '150 25 25 300',
items: [
{
align: 'center',
xtype: 'fieldset',
cls: 'my-fieldset-legend',
width: 400,
height: 250,
title: 'CAS Login',
collapsible: false,
items: [
{
xtype: 'container',
height: 30
},
{
xtype: 'textfield',
width: '300px',
allowBlank: false,
id: 'txtuser',
fieldLabel: 'User ID',
name: 'enter user id',
emptyText: 'enter user id'
},
{
xtype: 'container',
height: 30
},
{
xtype: 'textfield',
width: '300px',
allowBlank: false,
id: 'txtpass',
fieldLabel: 'Password',
name: 'pass',
emptyText: 'enter password',
inputType: 'password'
},
{
align: 'center',
cls: 'btn-margin',
border: false,
padding: '10 100 10 10',
buttons: [
{
style: 'btn-margin',
formBind: true,
disabled: true,
align: 'middle',
cls: 'btn-margin',
scale: 'medium',
text: 'Submit',
width: 40,
handler: function()
{
var usr = this.up("form").getForm().findField("txtuser").getValue();
alert('Welcome--> ' + usr);
}
},
{
style: 'btn-margin',
formBind: true,
disabled: true,
align: 'middle',
cls: 'btn-margin',
scale: 'medium',
text: 'Reset',
width: 40,
handler: function()
{
form.getForm().reset();
alert('Fields are cleared now');
}
}]
},
{
xtype: 'container',
height: 25
},
{
xtype: 'label',
padding: '150 5 5 100',
text: 'Please enter user id and password'
}
]
}
]
});
});
Use proper combination of layouts, probably you can try using 'fit' layout.
If the issue persist then try using minWidth config property of textfield.
has anyone else ran into a problem with ext js checkboxes not showing up? We have tried everything, even download the architect software and it still won't display... Any ideas?
I have a feeling it's like a css/include file we're missing, but I've looked all over the Internet and I still can't find a solution.
{
xtype: 'checkboxfield',
anchor: '100%',
fieldLabel: 'Label2',
boxLabel: 'Box Label2'
}
Here's the panel:
var manForm = Ext.create('Ext.form.Panel', {
width: 800,
style: 'position: relative; left: 20px;',
renderTo: Ext.getBody(),
id: 'man_form',
title: 'Mobile Information',
waitMsgTarget: true,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 85,
msgTarget: 'side'
},
items: [
{
xtype: 'container',
padding: '10px',
defaults: { height: 28 },
items: [{
xtype: 'hiddenfield',
name: 'id',
id: 'id',
},
{
xtype:'hiddenfield',
name: 'item_id',
id: 'item_id'
},
{ xtype: 'container',
layout: 'hbox',
defaults: { height: 28 },
margin: ' 0 10 0 0',
items: [{
xtype:'textfield',
fieldLabel: 'Number',
name: 'ItemNumber',
id: 'ItemNumber',
labelWidth: 45,
width: 345,
},
{
xtype:'textfield',
fieldLabel: 'Name',
name: 'ItemName',
id: 'ItemName',
labelWidth: 70,
width: 425,
}]
},
{
xtype: 'textfield',
fieldLabel: 'Category List',
labelWidth: 140,
width: 700,
name: 'CategoryList',
id: 'CategoryList'
},
{
xtype: 'textfield',
fieldLabel: 'Short Desc For Cat List',
name: 'ShortDescriptionForCategoryList',
id: 'ShortDescriptionForCategoryList',
labelWidth: 140,
width: 600
},
{ xtype: 'container',
layout: 'hbox',
margin: ' 0 10 0 0',
items: [{
xtype: 'textfield',
name: 'BasePrice',
fieldLabel: 'Base Price',
id: 'BasePrice',
labelWidth: 140,
width: 270,
height: 28
},
{
xtype: 'textfield',
name: 'RetailPrice',
fieldLabel: 'Retail Price',
id: 'RetailPrice',
labelWidth: 140,
width: 270,
height: 28
},{
xtype: 'checkboxfield',
anchor: '100%',
fieldLabel: 'Label2',
boxLabel: 'Box Label2'
}
]
},
{
xtype: 'textfield',
name: 'ItemImages',
fieldLabel: 'Item Images',
id: 'ItemImages',
labelWidth: 140,
width: 700
},
{
xtype: 'textfield',
name: 'ItemPrimaryImageUrl',
fieldLabel: 'Primary Image URL',
id: 'ItemPrimaryImageUrl',
labelWidth: 140,
width: 700
},
{
xtype: 'textfield',
name: 'ItemPrimaryImageAltText',
fieldLabel: 'Primary Image Alt Text',
id: 'ItemPrimaryImageAltText',
labelWidth: 140,
width: 700
},
{
xtype: 'textfield',
name: 'ItemThumbnailUrl',
fieldLabel: 'Thumbnail URL',
id: 'ItemThumbnailUrl',
labelWidth: 140,
width: 700
},
{
xtype: 'textfield',
name: 'ItemThumbnailAltText',
fieldLabel: 'Thumbnail Alt Text',
id: 'ItemThumbnailAltText',
labelWidth: 140,
width: 700
},
{
xtype: 'button',
text: 'Update',
name: 'new_button',
id: 'new_button',
style: 'margin-left:720px; margin-bottom:5px',
handler: function(event, toolEl, panel){
Ext.Msg.show({
title:'Update Data',
msg: 'Are you sure you want to update these settings?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function(btn){
if (btn === 'yes'){
var obj = manForm.getForm().getValues();
for (var prop in obj) {
store.getAt(0).set(prop,obj[prop]);
//alert(prop + " : " + obj[prop]);
}
store.update();
store.load();
}
}
});
}
},
]
}],
});
I didnt really test your code like kevhender did. But the fact that it works for him but not you, makes me think that you dont have the image file that extjs uses for a checkbox. Usually it is placed in images/form/checkbox.gif.
please check your images folder once. Also dev tools (either Firebug or chrome dev tools) console should throw an error if thats the case - saying "file could not be found at path blahblah" or something.
var loginForm = new Ext.form.FormPanel({
frame: true,
border: true,
height: 155,
width: 350,
layout: {
type: 'hbox',
},
items: [{
xtype: 'image',
src : 'images/system-users.png',
width: 100,
},{
xtype: 'container',
defaults: {
labelWidth: 80,
},
layout: {
type: 'vbox',
//align: 'stretch',
padding:'0 0 20 0'
},
items: [{
xtype: 'textfield',
width: 250,
id: 'username',
fieldLabel: 'Username'
},{
xtype: 'textfield',
width: 250,
id: 'password',
fieldLabel: 'Password ',
inputType: 'password',
submitValue: false
},{
xtype: 'hidden',
id: 'challenge',
value: "<?php echo $challenge; ?>",
submitValue: false
},btnLogin],
}
]//contain items
});
Question
this is an live demo http://jsfiddle.net/anthor/WM9DD/88/
1)how to align center the login button?
2)the image and all textbox align center and middle of the window box.
Try this:
var loginForm = new Ext.form.FormPanel({
frame: true,
border: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'image',
src: 'images/system-users.png',
width: 100,
}, {
xtype: 'container',
defaults: {
labelWidth: 80,
},
layout: {
type: 'vbox',
align: 'stretch',
padding: '0 0 20 0'
},
flex: 1,
items: [{
xtype: 'textfield',
id: 'username',
fieldLabel: 'Username'
}, {
xtype: 'textfield',
id: 'password',
fieldLabel: 'Password ',
inputType: 'password',
submitValue: false
}, {
xtype: 'hidden',
id: 'challenge',
value: "<?php echo $challenge; ?>",
submitValue: false
}, {
xtype: 'container',
layout: {
type: 'hbox',
pack: 'end'
},
items: [btnLogin]
}],
}] //contain items
});
In the hbox layout you can add the align: 'stretch' option and the flex: 1 option to the items to stretch them. I also put the button in another container to stick it to the right.
I am trying to modify the sample code to build a similar form like
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/form/form-grid.html
My code is below:
var references = new Ext.form.FormPanel({
frame: true,
title: 'References',
bodyPadding: 5,
layout: 'column',
fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},
items: [{
columnWidth: 0.60,
xtype: 'gridpanel',
store: reference_store,
height: 400,
title:'General',
columns: [
{ id: 'name', header : 'Reference', flex: 1, sortable : true, dataIndex: 'reference' },
{ header: 'Impact', width : 75, sortable : true, dataIndex: 'impact'},
]
}, {
columnWidth: 0.4,
margin: '0 0 0 10',
xtype: 'fieldset',
title:'Details',
defaults: {
width: 240,
labelWidth: 90
},
defaultType: 'textfield',
items: [{fieldLabel: 'Name', name: 'reference'}]
}]
});
But the entire FormPanel failed to show. When I replace the 'gridpanel' with 'fieldset' or other type, the FormPanel does appear regardless of the bad format.
xtype should be “grid“ instead of “gridpanel“
I have the following extJs window which has two tabs in it. One of the tab has got a column chart and the other one has a grid. Everything is working fine but what i want to accomplish here is that if i maximize the window the tabs size+ the charts size in the tabs should too. How can i accomplish it. I also have two calendar fields in the window above the tabs..
var win = Ext.create('Ext.Window', {
width: eachWindowWidth,
height: eachWindowHeight,
hidden: false,
maximizable: true,
title: 'Registered Hosts',
renderTo: Ext.getBody(),
items: [
{
xtype: 'datefield',
name: 'time',
fieldLabel: 'From',
anchor: '90%'
},
{
xtype: 'datefield',
name: 'time',
fieldLabel: 'To',
anchor: '90%'
},
{
xtype: "label",
fieldLabel: text,
name: 'txt',
text: text
},
{
xtype: 'tabpanel',
activeTab: 0,
width: eachTabWidth,
height: eachTabHeight,
plain: true,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [
{
title: 'Normal Tab',
items: [
{
id: 'chartCmp',
xtype: 'chart',
height: 300,
width: 300,
style: 'background:#fff',
animate: true,
shadow: true,
store: store1,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
grid: true,
fields: ['name']
}
],
series: [
{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data1'
}
]
}
]
},
{
title: 'Table View',
xtype: 'grid',
width: 200,
height: 200,
collapsible: false,
store: store1,
multiSelect: true,
viewConfig: {
emptyText: 'No information to display'
},
columns: [
{
text: 'Devices',
flex: 50,
dataIndex: 'name'
},
{
text: 'Pass',
flex: 50,
dataIndex: 'data1'
}
]
}
]
}
]
});
On resize event of window, change width of tabs size and the charts size however you want. Write a function which will execute on window resize event, In function you can access your fields like below :
var tab = Ext.getCmp('tabId');
var chart = Ext.getCmp('chartId');
change lengths of tab and chart according to your requirement.
Check out window resize event here.