I was wondering if it is possible to dynamically create a grid view. I'll do my best to explain...
I have currently have a database table that have different regions, I have created a grid around this and you can add new entries into this grid, which in turn adds it to the table..
I also have a database table for contact people that contain the names, phone numbers, and uses the all the regions as a drop down. Again you can add new entries in this table via the grid.
Finally I have a third grid that shows all the contact people, broken down to their regions. The problem I am having is how do I make it dynamic? Currently I have hard coded the region titles and populate a grid which filters properly, however what if someone adds a new region completely? How can I create a title and grid with the proper filter for the newly added region?
Third grid code:
Ext.define('myproject.example', {
extend: 'Ext.form.Panel',
alias: 'widget.********',
requires: [
'store.exampleStore'
],
modal: true,
draggable: true,
header: {
title: 'Technical Advisors Contact Information',
height: 55,
items: [{
xtype: 'button',
text: 'X',
listeners: { click: 'onModalX' }
}]
},
scrollable: true,
align: 'center',
floating: true,
width: 1500,
height: 800,
items: [{
xtype: 'grid',
title: 'Region: ME',
scrollable: true,
collapsible: true,
store: { type: 'exampleStore', filters: [{ property: 'Region', value: 'ME' }, { property: 'Active', value: 'true' }] },
columns: [{
text: 'Contact',
dataIndex: 'ContactName',
sortable: true,
flex: 2
}, {
text: 'Office #',
dataIndex: 'Office',
sortable: true,
flex: 1
}, {
text: 'Home #',
dataIndex: 'Home',
sortable: true,
flex: 1
}, {
text: 'Pager #',
dataIndex: 'Pager',
sortable: true,
flex: 1
}, {
text: 'Cellular #',
dataIndex: 'Cellular',
sortable: true,
flex: 1
}, {
text: 'Area',
dataIndex: 'Region',
sortable: true,
flex: 3
}] //continues...
For the first, you need to get data on the client-side (in the browser). This can be done via an ajax request (jsonp, ext.direct, rest, etc..).
Then you can load data into your store:
grid.store.loadData(result.data);
You can do this manually, or read about proxies in extjs. The easiest way to start is rest-proxy.
Related
I want dynamically load columns for grid from loaded store.
I used code like in sencha fiddle https://fiddle.sencha.com/#fiddle/lc5&view/editor, it work, but in modern version it dose not work. Because modern version not have reconfigure method.
How can I solve that problem.
Based on your example, the solution is as follows:
var grid = Ext.create({
xtype: 'grid',
fullscreen: true,
minHeight: 150,
renderTo: document.body,
plugins: {
gridsummaryrow: true
},
store: {
fields: ['student', 'mark'],
idProperty: 'student',
data: [{
"student": 'Student 1',
"mark": 84
}, {
"student": 'Student 2',
"mark": 72
}, {
"student": 'Student 3',
"mark": 96
}, {
"student": 'Student 4',
"mark": 68
}],
proxy: {
type: 'memory'
}
},
columns: [{
dataIndex: 'student',
text: 'Name'
}]
});
grid.getStore().load();
grid.setColumns([{
width: 200,
dataIndex: 'student',
text: 'Name',
summaryType: 'count',
summaryRenderer: function(value){
return Ext.String.format('Number of students: {0}', value);
}
}, {
"dataIndex": 'mark',
"text": 'Mark',
"summaryType": 'average'
}]);
the most important
You must define a column on the grid columns, even though it will be changed at a future time on your grid.
I removed the dependency from your students.json sample file and put the data into an in-memory store to facilitate the demonstration here.
In modern version, you will use setColumns method.
Working Sample on fiddle.
Another option I did is to bind the columns after populating them in the controller.
Sample code:
{
xtype: 'gridpanel',
id: 'user-grid',
cls: 'user-grid',
width: '100%',
scrollable: false,
bind: {
store: '{userStore}',
columns: '{columns}'
}
}
In the controller I populated the columns this way:
setUserGridColumns: function () {
var fields = ['title', 'Surname', 'Profession', 'Age', 'randomValue'];// this can come from server
var columns = [];
fields.forEach(element => {
var column = {
xtype: 'gridcolumn',
cls: 'content-column',
dataIndex: element,
text: element,
flex: 1,
sortable: false,
align: 'center',
style: 'border-width:0px !important; margin-bottom:15px'
}
columns.push(column);
});
this.getViewModel().set('columns', columns);
}
I've been trying to find an answer to this problem for the last 24 hours and couldn't find a way to resolve this. Here it is:
I'm using MVC architecture with ExtJS 4. I have a tabpanel that has some grid as items. When these grids load, they do not have a vertical scrollbar, even though I set autoScroll to 'true' and their content is bigger than the screen can show. Every post I read about this problem was resolved setting the grid's parent layout to 'fit', but, as you can see below, I already done it and still not have a scrollbar... If I define a height to the grid, the scrollbar works perfectly, but I need it to work with different heights...
I belive I might have a overnesting problem, but I just started developing with ExtJS some days ago and it stills a little confusing to me...
The question is: how can I make this structure work with autoScroll?
SO won't let me post an image here as my reputation is lower than 10, so you can find my app's structure here
Please note that I wrote "layout: 'fix'" in the image, but I meant "layout: 'fit'" :)
This is my Main view, which has 2 panels. The 'center' one is where I load the tabpanel that has the grid.
Ext.define('MyApp.view.Main', {
extend: 'Ext.container.Container',
requires:[
// 'Ext.tab.Panel',
// 'Ext.layout.container.Border',
'MyApp.view.Menus'
],
xtype: 'app-main',
layout: {
type: 'border'
},
items: [
{
region: 'north',
xtype: 'panel',
padding: '5 5 0 5',
title: 'MyApp',
items: {
xtype: 'menus'
}
},
{
region: 'center',
itemId: 'centerPanel',
xtype: 'panel',
padding: 5,
layout: 'fit'
}
]
});
This is the view that have the fieldset and the tabpanel as items:
Ext.define('MyApp.view.licencas.List', {
extend: 'Ext.form.Panel',
xtype: 'licencaslist',
title: 'Licenças de software',
border: false,
items: [
{
xtype: 'fieldset',
title: 'Dados do Veículo',
margin: 5,
items: [
{
xtype: 'combobox',
anchor: '100%',
valueField: 'id',
displayField: 'descricao',
store: 'ComboEmpresas',
typeAhead: true,
queryMode: 'local',
name: 'empresa',
fieldLabel: 'Empresa'
},
{
xtype: 'combobox',
editable: false,
valueField: 'id',
displayField: 'descricao',
store: 'ComboSoftwares',
queryMode: 'local',
name: 'software',
fieldLabel: 'Software'
},
{
name: 'valor',
fieldLabel: 'Valor empresa:',
xtype: 'numberfield',
minValue: 0,
maxValue: 100000,
allowDecimals: true,
disabled: true,
},
{
name: 'contrato',
fieldLabel: 'Contrato:',
xtype: 'textfield',
disabled: true,
},
{
name: 'demonstracao',
xtype: 'checkbox',
fieldLabel: 'Demonstração',
disabled: true,
}
]
},
{
xtype: 'licencastabpanel',
border: false,
margin: 5
}
],
initComponent: function() {
this.callParent(arguments)
}
});
And finally this is the grid where I need the autoScroll property...
Ext.define('MyApp.view.licencas.placas.List', {
extend: 'Ext.grid.Panel',
xtype: 'licencasplacaslist',
store: 'EmpresaVeiculos',
border: false,
forceFit: true,
autoScroll: true,
plugins: [new Ext.grid.plugin.CellEditing({
clicksToEdit: 1,
})],
dockedItems: [
{
dock: 'top',
xtype: 'toolbar',
items: [
{
text: 'Alterar todos',
iconCls: 'money-16',
action: 'alterartodos',
xtype: 'button'
},
'->',
{
xtype: 'trigger',
name: 'searchfieldLicencasPlacas',
itemId: 'searchfieldLicencasPlacas',
emptyText: 'Filtrar por placa...',
width: '500px',
hideLabel: true,
selectOnFocus: true,
triggerCls: 'x-form-search-trigger'
}
]
}
],
columns: [
Ext.create('Ext.grid.RowNumberer'),
{
text: "Placa",
dataIndex: 'placa',
width: 70
},
{
text: "Serial",
dataIndex: 'serial',
width: 70
},
{
text: "Condutor",
dataIndex: 'condutor'
},
{
text: "Ativo",
dataIndex: 'ativo',
width: 50
},
{
text: "Data Início",
dataIndex: 'data_inicio',
format: 'd.m.Y',
width: 60
},
{
text: "Data Fim",
dataIndex: 'dt_fim',
format: 'd.m.Y',
width: 60,
editor: {
xtype: 'datefield',
format: 'd.m.Y'
}
},
{
text: "Contrato",
dataIndex: 'contrato',
width: 70,
editor: {
xtype: 'textfield'
}
},
{
text: "Software",
dataIndex: 'valor_software',
renderer: 'usMoney',
width: 70,
editor: {
xtype: 'numberfield',
minValue: 0,
maxValue: 1000,
allowDecimals : true
}
},
{
text: "Comunicação",
dataIndex: 'valor_comunicacao',
renderer: 'usMoney',
width: 70,
editor: {
xtype: 'numberfield',
minValue: 0,
maxValue: 1000,
allowDecimals : true
}
},
{
text: "Comodato",
dataIndex: 'valor_comodato',
renderer: 'usMoney',
width: 70,
editor: {
xtype: 'numberfield',
minValue: 0,
maxValue: 1000,
allowDecimals : true
}
},
{
text: 'Empresa para faturar',
dataIndex: 'fatura',
width: 200,
editor:
{
xtype: 'combobox',
displayField: 'descricao',
valueField: 'descricao',
store: 'ComboFaturas',
name: 'software',
queryMode: 'local'
}
}
],
initComponent: function() {
this.callParent(arguments)
}
});
Please, note that I removed all "layout: 'fit'" (except from the Main view, which has influence over other views) from the code as it wasn't working anyway... :)
Please, let me know if I need to provide you any extra information. I tried to make it easier to understand with the image below.
Thank you guys!
It works as follows:
grid ignores autoScroll config option
grid needs a height, either explicit or controlled by a layout of its parent container
if grid does not have a height, it tries to expand itself vertically according to the number of records loaded in the store so that it does not show the scrollbar
fit layout can only have one item - if it is a grid then its height (and width) is controlled by the size of the parent container
To summarize: If you want a grid to scroll it must have a height.
I am trying to get numbered rows with my grid.
var grid = Ext.create('Ext.grid.Panel',
{
I looked into the documentation for Grids in Ext JS, however, I cannot find a numbering property. Any ideas for me?
Here's my columns section. The info in the columns is pulled from a server.
columns:
{
xtype: 'rownumberer',
defaults:
{
align: 'center',
flex: 0,
width: 40,
sortable: false,
menuDisabled: true
},
items:
[
Use the RowNumberer column type.
Edit:
You must add an extra column of this type. Example:
Ext.widget('grid', {
columns: {
defaults: {
// you column defaults
},
items: [{
xtype: 'rownumberer' // this is a column type
},{
dataIndex: 'foo'
,text: 'Column Foo'
},{
dataIndex: 'bar'
,text: 'Column Bar'
}]
}
// ...
})
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
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 ]