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
Related
To binding between a grid and a form I use something like:
viewModel: {
type: 'viewermodel'
},
items: [{
xtype: 'grid',
title: 'Grid: click on the grid rows',
itemId:'myGridItemId',
flex: 1.2,
margin: '0 10 0 0',
bind:{
store:'{mystore}',
selection:'{users}'
},
columns: [
{ text: 'Name', dataIndex: 'name', flex:0.5 },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Cars', dataIndex: 'cars', flex: 1 }
]
},
FIDDLE: https://fiddle.sencha.com/#fiddle/1is6&view/editor
Problem: the store is not in a viewmodel but in the store's app folder (App.store.MyStore).
Is there any way, in this case, of binding selection: '{users}' from record grid to form fields? Something like:
store:'MyStore',
bind:{
selection:'{users}'
},
You need to add MyStore to your application's store config.
Here's the updated fiddle. You'll see in Ext.application I've added stores: ['MyStore']
I'm using ExtJS5 and trying to put the object items to card panel for a function that user can change the panel when click treepanel. But I don't know is it a right way to do that.
var p = Ext.create('Ext.panel.Panel', {
layout: 'card',
items: [
grid, bottompanel
]
});
I like to do that like Example
And here is the panel on right hand side.
var grid = Ext.create('Ext.grid.Panel', {
//title: 'Simpsons',
title: 'Customers',
height: 300,
width:'100%',
id: 'cus_grid',
columns: [
{text: "Customer ID", dataIndex: "id", flex: 1},
{text: "Customer Name", dataIndex: "name", flex: 1},
{text: "Services Name", dataIndex: "s_name", flex: 1},
{text: "Services Type", dataIndex: "s_type", flex: 1}
],
store: user,
listeners : {
itemclick: function(dv, record, item, index, e) {
//alert(record.get('name'));
Ext.getCmp('infoForm').getForm().findField('id').setReadOnly(true);
Ext.getCmp('infoForm').getForm().findField('s_type').setReadOnly(true);
Ext.getCmp('infoForm').loadRecord(record);
}
}
});
var bottompanel = Ext.create('Ext.form.Panel', {
//region: 'center',
title: 'Information',
bodyPadding: 10,
flex:1,
width:'100%',
id: 'infoForm',
items: [{
xtype: 'textfield',
name: 'id',
fieldLabel: 'Customer ID',
allowBlank: false // requires a non-empty value
},{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}, {
xtype: 'textfield',
name: 's_name',
fieldLabel: 'Services Name',
allowBlank: false // requires a non-empty value
}, cmbBox],
// Reset and Submit buttons
buttons: [],
tbar: toolBar
});
Thank you.
I fixed the problem....
I forgot to add width in card panel so have an error occurred.
Thank you.
I must display complex data (i show it on a table) and i using xtemplate (i think this is the best way) to display them like
Ext.define('My.Example', {
extend: 'Ext.Panel'
, tbar:[{
text:'my button'
}]
,tpl: '{data}'
});
but i need embed a grid after table look like
|button|----|
|---table---|
|-----------|
|-----------|
| |
|---grid----|
|-----------|
What should i do thanks
Use a box layout:
Ext.onReady(function() {
new Ext.panel.Panel({
width: 400,
height: 400,
renderTo: document.body,
layout: {
type: 'vbox',
align: 'stretch'
},
tbar: [{
text: 'Button'
}],
items: [{
flex: 1,
html: 'Top data'
}, {
flex: 1,
xtype: 'gridpanel',
store: {
fields: ['name'],
data: [{
name: 'Item 1'
}]
},
columns: [{
flex: 1,
text: 'Name',
dataIndex: 'name'
}]
}]
});
});
I have the following grid here:
Ext.define('AM.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
initComponent: function () {
this.columns = [{
header: 'Name',
dataIndex: 'name',
flex: 4
}, {
header: 'User ID',
dataIndex: 'user_id',
flex: 1
}, {
header: 'Address',
dataIndex: 'address',
flex: 3
}, {
header: 'Age',
dataIndex: 'agee',
flex: 5
}];
this.callParent(arguments);
}
});
Can a toolbar be added to the bottom of this grid or can they only be added to panels?
Also, how can I place normal text in a toolbar rather than a button?
Yes a grid panel inherits Ext.grid.Panel, you should be able to add:
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Left Button'
}, {
xtype: 'tbfill'
}, {
xtype: 'button',
text: 'Right Button'
}]
}]
Any component that has Docked layout can have toolbars docked. Since Ext.grid.Panel extends Ext.panel.Panel, you can dock to it. See the bbar config: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-bbar
You can add text items to your toolbar by adding this to the toolbar's items:
{ xtype: 'tbtext', text: 'My Text' }
Docs for this here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.toolbar.TextItem
Alternately you can also add button using 'bbar[...]' which is equivalent to
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{ xtype: 'button', text: 'Button 1' }
]
}]
this allows you to add buttons at the bottom of your gridpanel all other button properties are allowed to use.
sample code is here:
bbar: [
{ xtype: 'button', text: 'Button 1' },
{ xtype: 'button', text: 'Button 2' }
]
for more details you can refer the doc: http://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.panel.Panel-cfg-bbar
How do I go about making the gridpanel/table in extjs auto expand based on the window size?
Thanks
I added layout :'fit'.. i didn't change much
var listView = Ext.create('Ext.grid.Panel', {
store: mystore,
multiSelect: true,
title:'Notifications for ' + jsonServiceId + ' <i>(0 items selected)</i>',
viewConfig: {
emptyText: 'No images to display'
},
//reserveScrollOffset: true,
renderTo: containerEl,
layout:'fit',
columns: [{
text: 'Sell',
flex: 10,
dataIndex: 'Sell',
renderer: function(value, metaData, record) {
// alert(record.get('Sell'));
}
},{
text: 'Class',
flex: 10,
dataIndex: 'ClassName'
},
{
text: 'Last Changed',
flex: 20,
dataIndex: 'LastChangedAt',
xtype: 'datecolumn',
format: 'd-M-Y h:i a'
}
]
});
It's a layout thing. You should add layout: 'fit' to the parent container. It will make your grid expand to the size of parent container.
Just as here in example:
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout-browser/layout-browser.html