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'
}]
}
// ...
})
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 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.
Is there a way I can set the columns width to match the width of the column text? The user can resize the columns to see the content if needed, but I want the full header text to be showing at least, even if the column content isnt.
thanks
Yes it should be possible. You can call the method autoSize() on the column.
You can combine it with the minWidth and maxWidth.
I have found this example on the Sencha forums for Ext 4.2 so it should be very similar for Ext 6.2:
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name', width: 150, autoSizeColumn: true },
{ text: 'Email', dataIndex: 'email', width: 150, autoSizeColumn: true, minWidth: 150 },
{ text: 'Phone', dataIndex: 'phone', width: 150 }
],
viewConfig: {
listeners: {
refresh: function(dataview) {
Ext.each(dataview.panel.columns, function(column) {
if (column.autoSizeColumn === true)
column.autoSize();
})
}
}
},
width: 450,
renderTo: Ext.getBody()
});
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
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