In my code I have given grid in one tab in the center region. Here is my full code
<html>
<head>
<title>Ext Js 4.0</title>
<link rel="stylesheet" type="text/css"
href="E:/Sikandar/extjs/ext-4.2.1.883/resources/css/ext-all.css" />
<script src="E:/Sikandar/extjs/ext-4.2.1.883/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var store = Ext.create('Ext.data.ArrayStore', {
fields:['id','title', 'director', 'released', 'genre','tagline', 'price', 'available'],
data: [
[
1,
"Office Space",
"Mike Judge",
"1999-02-19",
1,
"Work Sucks",
"19.95",
1
],
[
3,
"Super Troopers",
"Jay Chandrasekhar",
"2002-02-15",
1,
"Altered State Police",
"14.95",
1
]
]
});
var grid = Ext.create('Ext.grid.Panel',{
renderTo: document.body,
title: 'Movie Database',
layout:'fit',
store: store,
columns: [
{header: "Id", dataIndex: 'id', hidden:true},
{header: "Title", dataIndex: 'title'},
{header: "Director", dataIndex: 'director'},
{header: "Released", dataIndex: 'released',renderer: Ext.util.Format.dateRenderer('m/d/Y')},
{header: "Genre", dataIndex: 'genre'},
{header: "Tagline", dataIndex: 'tagline'}
]
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Implementing Ext Js</h1>',
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 150
// could use a TreePanel or AccordionLayout for navigational items
},
{
region: 'center',
layout:'fit',
title: 'Practice_Till_Date',
id:'center',
border: true,
items:[
grid]
}]
});
});
</script>
</head>
<body>
<!-- Nothing in the body -->
</body>
</html>
How can i add new tab in center region? please help
I've opened a fiddle to show you how I did it, you just need to add a tabpanel to you your center region.
I hope this is what you were looking for.
Ext.onReady(function() {
var store = Ext.create('Ext.data.ArrayStore', {
fields:['id','title', 'director', 'released', 'genre','tagline', 'price', 'available'],
data: [
[
1,
"Office Space",
"Mike Judge",
"1999-02-19",
1,
"Work Sucks",
"19.95",
1
],
[
3,
"Super Troopers",
"Jay Chandrasekhar",
"2002-02-15",
1,
"Altered State Police",
"14.95",
1
]
]
});
var grid = Ext.create('Ext.grid.Panel',{
renderTo: document.body,
title: 'Movie Database',
layout:'fit',
store: store,
columns: [
{header: "Id", dataIndex: 'id', hidden:true},
{header: "Title", dataIndex: 'title'},
{header: "Director", dataIndex: 'director'},
{header: "Released", dataIndex: 'released',renderer: Ext.util.Format.dateRenderer('m/d/Y')},
{header: "Genre", dataIndex: 'genre'},
{header: "Tagline", dataIndex: 'tagline'}
]
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Implementing Ext Js</h1>',
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 150
// could use a TreePanel or AccordionLayout for navigational items
}, {
region: 'center',
xtype: 'tabpanel',
title: null,
id:'center',
border: true,
items:[{
xtype: 'panel',
id: 'panel1',
title: 'Practice_Till_Date',
items:[grid]
}, {
// xtype: 'panel',
// id: 'panel2',
title: 'Another tab',
html: 'bla bla bla'
}]
}]
});
});
Related
I'm trying to make the bar that says my panel to collapse but I failed ... I am new to this framework I would like to give me a solution ..
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
requires: [
'Ext.toolbar.Toolbar',
'Ext.button.Button',
'Ext.grid.Panel',
'Ext.grid.View',
'Ext.grid.column.CheckColumn'
],
autoShow: true,
height: 401,
width: 970,
title: 'Linia de tiempo',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
dockedItems: [
/* {
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'MyButton'
}
]
} */
],
items: [
{
xtype: 'gridpanel',
title: ' ',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
width: 250,
text: 'Grado y Sección'
},
{
xtype: 'checkcolumn',
text: 'Inicio'
},
{
xtype: 'checkcolumn',
text: 'Indice'
},
{
xtype: 'checkcolumn',
text: 'Proyecto1'
},
{
xtype: 'checkcolumn',
text: 'Proyecto2'
},
{
xtype: 'checkcolumn',
text: 'Proyecto3'
},
{
xtype: 'checkcolumn',
text: 'Proyecto4'
},
{
xtype: 'checkcolumn',
text: 'Cierre'
}
]
},
{
title : 'Collapsed Panel ' ,
collapsed: true,
collapsible : true,
anchura : 640 ,
//html : KitchenSink . DummyText . MEDIUMTEXT ,
colspan : 3
},
{
xtype: 'panel',
collapseMode: 'standard',
collapsed: true,
collapsible: true,
autoScroll: true,
split:true,
title: 'My Panel'
html: '<iframe src="http://www.google.com" style="width:100%;height:100%;border:none;"></iframe>'
},
/*{
title : 'Collapsed Panel ' ,
se derrumbó : true ,
plegable : true ,
ancho : 640 ,
colspan : 3
} */
]
});
me.callParent(arguments);
}
});
Here is an example for your problem,
Working fiddle is here
Ext.define('MyApp.view.MyWindow', {
//extend: 'Ext.panel.Panel',
extend: 'Ext.window.Window',
alias: 'widget.parentPanel',
requires: ['Ext.toolbar.Toolbar', 'Ext.button.Button', 'Ext.grid.Panel', 'Ext.grid.View', 'Ext.grid.column.CheckColumn'],
autoShow: true,
height: 401,
width: 520,
style:'margin-top: 200px',
title: 'Linia de tiempo',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
dockedItems: [],
items: [{
xtype: 'gridpanel',
title: ' ',
columns: [{
xtype: 'gridcolumn',
dataIndex: 'string',
width: 250,
text: 'Grado y Sección'
}, {
xtype: 'checkcolumn',
text: 'Inicio'
}, {
xtype: 'checkcolumn',
text: 'Indice'
}, {
xtype: 'checkcolumn',
text: 'Proyecto1'
}, {
xtype: 'checkcolumn',
text: 'Proyecto2'
}, {
xtype: 'checkcolumn',
text: 'Proyecto3'
}, {
xtype: 'checkcolumn',
text: 'Proyecto4'
}, {
xtype: 'checkcolumn',
text: 'Cierre'
}]
}, {
xtype: 'panel',
title: 'Collapsed Panel ',
collapsed: false,
collapsible: true,
anchura: 640,
colspan: 3,
items:[{
xtype: 'textfield'
},{
xtype: 'checkbox',
boxLabel: 'select',
boxLabelAlign: 'before'
}]
}, {
xtype: 'panel',
collapseMode: 'standard',
collapsed: true,
collapsible: true,
autoScroll: true,
split: true,
title: 'My Panel',
html: '<iframe src="http://www.google.com" style="width:100%;height:100%;border:none;"></iframe>'
}]
});
me.callParent(arguments);
}
});
Ext.widget('parentPanel', {renderTo: 'panel'});
I am using ExtJs 4.1 and trying to add items to panel and columns to grid dynamically.
My Requirement
MainPanel (Ext.panel.Panel) has 2 child items:
DynamicPanel (Ext.panel.Panel)
I want to add this panel to the main panel dynamically.
Then... I want to add items to DynamicPanel dynamically, the items are a config of the MainPanel called : "elements"
DynamicGrid (Ext.grid.Panel)
I want to again, add this to the main panel dynamically.
I want to add columns to DynamicGrid dynamically, and again these columns are part of the MainPanel config gridcolumns.
I am getting the below error:
this.dpanel is undefined
[Break On This Error] this.dpanel.add(this.elements)
My code is as below:
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', 'date', 'time'],
data: {
'items': [{
"name": "Lisa",
"email": "[EMAIL="
lisa#simpsons.com "]lisa#simpsons.com[/EMAIL]",
"phone": "555-111-1224",
"date": "12/21/2012",
"time": "12:22:33"
}, {
"name": "Bart",
"email": "[EMAIL="
bart#simpsons.com "]bart#simpsons.com[/EMAIL]",
"phone": "555-222-1234",
"date": "12/21/2012",
"time": "12:22:33"
}, {
"name": "Homer",
"email": "[EMAIL="
home#simpsons.com "]home#simpsons.com[/EMAIL]",
"phone": "555-222-1244",
"date": "12/21/2012",
"time": "12:22:33"
}, {
"name": "Marge",
"email": "[EMAIL="
marge#simpsons.com "]marge#simpsons.com[/EMAIL]",
"phone": "555-222-1254",
"date": "12/21/2012",
"time": "12:22:33"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.define('DynamicGridPanel', {
extends: 'Ext.grid.Panel',
alias: 'widget.dynamicGridPanel',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
height: 200,
width: 200
});
Ext.define('DynamicPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.dynamicPanel',
title: 'DynamicAdd',
width: 200,
height: 200
});
Ext.define('MainPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.dynamicMainPanel',
title: 'MainPanel',
renderTo: Ext.getBody(),
width: 600,
height: 600,
constructor: function (config) {
var me = this;
me.callParent(arguments);
me.dpanel = Ext.create('DynamicPanel');
me.dgridpanel = Ext.create('DynamicGridPanel');
me.items = [this.dpanel, this.dgridpanel];
}, //eo constructor
onRender: function () {
var me = this;
me.callParent(arguments);
//I am getting error at the below lines saying the dpanel and dynamicGridPanel undefined
me.dpanel.add(this.elements);
me.dynamicGridPanel.columns.add(this.gridcolumns);
}
});
var panel1 = Ext.create('MainPanel', {
gridcolumns: [{
xtype: 'actioncolumn',
width: 42,
dataIndex: 'notes',
processEvent: function () {
return false;
}
}, {
xtype: 'gridcolumn',
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
xtype: 'gridcolumn',
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
xtype: 'gridcolumn',
header: 'Date',
dataIndex: 'date',
flex: 1,
editor: {
xtype: 'datetextfield',
allowBlank: false
}
}, {
xtype: 'gridcolumn',
header: 'Time',
dataIndex: 'time',
flex: 1,
editor: {
xtype: 'timetextfield',
allowBlank: false
}
}],
elements: [{
xtype: 'numberfield',
width: 70,
tabIndex: 1,
fieldLabel: 'Account No',
itemId: 'acctno',
labelAlign: 'top'
}, {
xtype: 'textfield',
itemId: 'lastname',
width: 90,
tabIndex: 2,
fieldLabel: 'Last Name',
labelAlign: 'top'
}, {
xtype: 'textfield',
itemId: 'firstname',
width: 100,
tabIndex: 3,
fieldLabel: 'First Name',
labelAlign: 'top'
}]
});
Create the child elements in initComponent:
initComponent: function() {
var me = this;
me.dpanel = Ext.create('DynamicPanel');
me.dgridpanel = Ext.create('DynamicGridPanel');
me.items = [this.dpanel, this.dgridpanel];
me.callParent(arguments);
}
Dont forget to define the require config for columns in your grid:
columns: []
Look at that Example here for adding dynamically columns in grid http://neiliscoding.blogspot.de/2011/09/extjs4-dynamically-add-columns.html
I'm creating a toolbar then later adding it to a Panel in ExtJS. It looks great except in IE7 where it has a much larger height than other browsers. ExtJS is hardcoding the height in an inline CSS style. Some of the menus are created before the toolbar...
var menu = Ext.create('Ext.menu.Menu', {
id: 'mainMenu',
style: {
overflow: 'visible'
},
items: [
{
text: 'choice1'
},{
text: 'choice2'
},{
text: 'choice3'
}]
});
var tb = Ext.create('Ext.toolbar.Toolbar');
tb.suspendLayouts();
tb.add({
text:'Choice 1',
iconCls: 'bmenu',
menu: menu
},{
xtype: 'tbfill'
},{
xtype: 'tbtext',
text: 'Last name'
});
menu.add(' ');
tb.add('-', {
iconCls: 'icon-help',
clickEvent: 'mousedown'
});
tb.resumeLayouts(true);
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
id: 'North',
items: [{
region: 'center',
style: {
overflow: 'visible'
},
}, tb]
},{
region: 'west',
id: 'West',
xtype: 'panel',
layout: 'vbox',
collapsible: true,
split: true,
width: 200,
items: [{
xtype: 'panel',
id: 'upperWest',
width: 200,
flex: 1,
html: myAlerts
},{
xtype: 'panel',
id: 'lowerWest',
width: 200,
flex: 3,
html: quickView
}
]
]
},{
region: 'center',
id: 'center',
height: '100%',
minheight: 200,
minwidth: 200,
layout: 'border',
border: false,
autoScroll:true,
tbar: [
{xtype: 'tbfill'},
{
xtype: 'combo',
height: 20,
editable: false,
store: [
'choice1',
'choice2',
'choice3',
],
value: 'choice1'
},
{xtype: 'tbfill'}
],
items: [{
region: 'east',
id: 'center-east',
height: '100%',
minheight: 200,
width: 200,
items: barChartPanel
},{
region: 'center',
id: 'center-center',
layout: 'fit',
baseCls:'x-plain',
items: columnChartPanel
}]
},{
region: 'east',
id: 'moreOptions',
xtype: 'panel',
title: 'More Options',
collapsible: true,
split: true,
width: 200,
items: [
{xtype: 'panel',
id: 'rightPanel1',
collapsible: true,
collapsed: true,
}
]
},{
region: 'south',
xtype: 'container',
}]
});
Found the solution. HTML 5 Boilerplate included a CSS property that was adding bottom padding to some elements. This was causing ExtJS to also add top padding to the toolbar. I removed the CSS element and the issue went away
I'm trying to put a Grid (Ext.grid.GridPanel) object inside a Tab .
This is the code:
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
autoDestroy: true,
reader: reader,
data: xg.dummyData
}),
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
{header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: 'Change', dataIndex: 'change'},
{header: '% Change', dataIndex: 'pctChange'},
// instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
{
header: 'Last Updated', width: 135, dataIndex: 'lastChange',
xtype: 'datecolumn', format: 'M d, Y'
}
]
}),
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: 'Framed with Row Selection and Horizontal Scrolling',
iconCls: 'icon-grid'
});
this.tabs = new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
dockedItems: [
{
xtype:'toolbar',
title:'Hello World'
}],
tabBar: {
ui: 'light',
layout: {
pack: 'left'
}
},
items: [
{
cls:'hello',
id:'tab1',
html : '<a>hello</a>',
title:'Monitor'
}, {
cls:'world',
id:'tab2',
xtype: 'map',
html : '<a>hello world</a>',
title:'Map'
}, {
cls:'world',
id:'tab3',
html : '<a>hello world</a>',
dockedItems:grid
}]
});
When I load the page there's no error, but the grid is not shown.
The grid is not a docked item (that's for toolbars and other things that should stick to one side of a container). If you want the grid to take up the entire tab, just add it directly as an item to the TabPanel and it will become the full tab:
items: [
{
cls:'hello',
id:'tab1',
html : '<a>hello</a>',
title:'Monitor'
}, {
cls:'world',
id:'tab2',
xtype: 'map',
html : '<a>hello world</a>',
title:'Map'
},
grid ]
Next code can not working, my gridpanel can not render ok:
Ext.onReady(function(){
Ext.namespace('App', 'App.ui', 'App.data');
// Add the additional VTypes
Ext.apply(Ext.form.VTypes, {
password : function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText : 'Passwords do not match'
});
App.data.userstore = new Ext.data.DirectStore({
autoLoad: true,
directFn: ExtDirect.UserController.selectAll,
paramsAsHash: true,
idProperty: 'UserID',
listeners: {
load: function(s, records){
//Ext.MessageBox.alert( "Information", "Loaded " +
//records.length + " records");
}
},
fields : [ 'UserID', 'UserLevelID', 'UserName', 'Password',
'FirstName', 'LastName', 'Email', 'Skype',
'OfficePhone', 'CellPhone', 'Position' ]
})
// row expander
var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<p><b>Company:</b> {company}</p><br>',
'<p><b>Summary:</b> {desc}</p>'
)
});
var sm = new Ext.grid.CheckboxSelectionModel();
//Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
App.userColumns = [
{header: "UserID", width: 100, sortable: true, dataIndex: 'UserID'},
{header: "UserLevelID", width: 100, sortable: true, dataIndex: 'UserLevelID', editor: new Ext.form.ComboBox({})},
{header: "UserName", width: 100, sortable: true, dataIndex: 'UserName', editor: new Ext.form.TextField({})},
{header: "Password", width: 100, sortable: true, dataIndex: 'Password'},
{header: "FirstName", width: 100, sortable: true, dataIndex: 'FirstName', editor: new Ext.form.TextField({})},
{header: "LastName", width: 100, sortable: true, dataIndex: 'LastName', editor: new Ext.form.TextField({})},
{header: "Email", width: 100, sortable: true, dataIndex: 'Email', editor: new Ext.form.TextField({})},
{header: "Skype", width: 100, sortable: true, dataIndex: 'Skype', editor: new Ext.form.TextField({})},
{header: "OfficePhone", width: 100, sortable: true, dataIndex: 'OfficePhone', editor: new Ext.form.TextField({})},
{header: "CellPhone", width: 100, sortable: true, dataIndex: 'CellPhone', editor: new Ext.form.TextField({})},
{header: "Position", width: 100, sortable: true, dataIndex: 'Position', editor: new Ext.form.TextField({})}
];
App.ui.editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});
// create the Grid
App.ui.grid = new Ext.grid.GridPanel({
store: App.data.userstore,
columns: App.userColumns,
stripeRows: true,
plugins: [expander],
layout: 'fit',
height: 250,
width: 500,
title: 'DB Grid',
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("userformgrid-panel").getForm().loadRecord(rec);
}
}
}),
columnLines: true,
frame: true,
listeners: {
viewready: function(g) {
g.getSelectionModel().selectRow(0);
} // Allow rows to be rendered.
},
// inline toolbars
tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove',
// Place a reference in the GridPanel
ref: '../removeButton',
disabled: true
}],
});
App.data.userstore.load();
App.ui.adduser = new Ext.FormPanel({
id: 'adduser-panel',
labelWidth: 75, // label settings here cascade unless overridden
frame: true,
title: 'Add a new user',
bodyStyle:'padding:5px 5px 0',
width: 350,
items: [{
xtype:'fieldset',
checkboxToggle:false,
title: 'Account Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
collapsed: false,
items :[{
fieldLabel: 'User Name',
name: 'username',
allowBlank:false
},{
fieldLabel: 'Password',
name: 'password',
id: 'password',
allowBlank:false
},{
fieldLabel: 'Confirm Password',
name: 'pass-cfrm',
id: 'pass-cfrm',
vtype: 'password',
initialPassField: 'password' // id of the initial password field
}]
}, {
xtype:'fieldset',
checkboxToggle:false,
title: 'Personal Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
collapsed: false,
items :[{
fieldLabel: 'First Name',
name: 'firstname',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'lastname',
allowBlank: false
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email',
allowBlank: false
}
]
},{
xtype:'fieldset',
title: 'Other',
collapsible: true,
autoHeight:true,
collapsed: true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel:'Skype',
name:'skype'
}, {
fieldLabel:'Office Phone',
name:'phone'
}, {
fieldLabel:'Cell Phone',
name:'cellphone'
}, {
fieldLabel:'Position',
name:'posion'
}, {
xtype: 'fileuploadfield',
emptyText: 'Select an image',
fieldLabel:'Picture',
name:'picture',
id: 'picture',
buttonText: '',
buttonCfg: {
iconCls: 'upload-icon'
}
}, {
xtype: 'textarea',
fieldLabel:'Comment',
name:'comment',
flex: 1 // Take up all *remaining* vertical space
}]
}],
buttons: [{
text: 'Submit'
},{
text: 'Clear'
}]
});
var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
html: Ext.example.shortBogusMarkup,
title:'Navigation',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'Settings',
html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings'
}]
},{
region:'center',
margins:'35 5 5 0',
layout:'fit',
autoScroll:true,
items: [{
columnWidth:.4,
baseCls:'x-plain',
bodyStyle:'padding:5px 0 5px 5px',
items:[App.ui.adduser]
},{
columnWidth:.60,
layout: 'fit',
baseCls:'x-plain',
bodyStyle:'padding:5px',
items:[App.ui.grid]
}]
}]
});});
But next code can working:
{
region:'center',
margins:'35 5 5 0',
layout:'fit',
autoScroll:true,
items: [App.ui.adduser, App.ui.grid]
}
Why? I just wrapped App.ui.grid with a panel, why it can not render the data? Thanks for any help!!!
Layout:'fit' is intended for a single child panel, but you are adding two child panels as columns, so I assume you want layout:'column' instead? Also your column panel that contains App.ui.adduser does not have any layout specified, which could also cause problems.