My code in Extjs goes something like
{
xtype: 'numbercolumn',
header: 'Model1',
sortable: false,
resizable: false,
format: '0,000.00',
align: 'right',
width: 80,
dataIndex: 'description',
id: 'description'
}
Here the header is static. I want to change the header text also like dataIndex field. How can I do it?
Look at reconfigure method: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Table-method-reconfigure
Yes you can to this.
Initially set header text blank or what you want.
and on the gridstore.load event get the column name and set text.
e.g.,
linelistunitstore.on('load',function(store)
{
Ext.getCmp('usertype').setText(store.getAt('0').get('operationconditiontempunit'));
});
Related
I can resize dxDataGrid column, but that column overwriting beside column.
Is there any option to expand (resize) dxDataGrid when column resizing
$scope.dataGridOptions = {
bindingOptions: { dataSource: 'gridDataSource' },
allowColumnResizing: true,
columnAutoWidth: true,
hoverStateEnabled: true,
allowColumnReordering: true,
filterRow: {
visible: true
},
paging: {
enabled: false
},
..............
..............
I am using html 5 and angular:
<div id="gridContainer" dx-data-grid="dataGridOptions" ></div>
The DevExtreme team added this option out-of-the-box in v17.1. You can learn more about this from the following DevExpress blog post:
DevExtreme DataGrid - Advanced Column Resizing
i am working in extjs4. i have window as=
addComment : function(btn) {
var me = this;
var reviewWindow = Ext.create('Ext.window.Window', {
bodyPadding: '0 0 0 15px',
cls: 'requestWindowCls',
style: {
borderColor: 'white'
},
width: 575,
header : true,
id: 'addcomment',
buttonAlign: 'right',
html : 'Add Comment',...
i want to update window's html on condition and want to place that html in header as title which will consist of text along with some icon. So how to perform this in extjs4
For updating window content you can use reviewWindow.update('HTML content');
For updating window's header content you can use reviewWindow.getHeader().update('HTML content');
I am using ExtJs 4.2
My app needs to a have a button that will invoke a panel, that holds the navigation tree show once clicked.
This button needs to be visible at all times, and centered vertical to the middle and to the right of the screen.
How do I achieve this behavior? I don't want to nest the button in a panel, it should be a part of the view port...
Here is what I have tried:
Ext.define('NG.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id: 'appviewport',
items: [{
itemId: 'app-header',
xtype: 'appheader',
region: 'north',
weight: 10,
border: false,
height: 60
}, {
itemId: 'navigation',
xtype: 'button',
region: 'west',
weight:15
}, {
xtype: 'carddeckmanager',
region: 'center',
weight:10,
border: false,
cls:'n-cardmanager-box',
items: [{
itemId: 'dashboard',
xtype: 'dashboard'
}]
}]
});
but this makes the button expand as the height of the viewport.
If you really want to float that button, there's no sense in adding it to a container or the viewport. Render it to the document body, configure it with floating: true, and give it a z-index that will ensure that it remains above any window (if that's what you want).
Then you can position it where you want with its alignTo method but, better yet, use anchorTo so that it sticks where you put it, even when the browser is resized.
All of this gives us:
var body = Ext.getBody();
// Create the button
var button = Ext.widget('button', {
text: "Yo"
,floating: true
,renderTo: body
});
// z-index
// Ext4's windows default z-index starts from 29000
button.setZIndex(40000);
// Anchor the right of the button to the right of the document body
// with a 5px horizontal offset.
button.anchorTo(body, 'r-r', [-5, 0]);
Put this code somewhere in the startup process of your application. Candidates could be the init method of your application, the initComponent method of your viewport, or a single afterrender listener on the viewport...
Now, if what you want is just that the button remains visible in the right border of the viewport but without it filling the whole region, you need to wrap it in a container with an appropriate layout. For example, add this to your viewport:
{
region: 'west',
layout: {type: 'hbox', pack: 'center', align: 'middle'},
items: [{
xtype: 'button',
text: "Viewport button"
}]
}
Using ExtJs 4.1.
I'm creating a panel (for example) and I would like that the generated html includes one or more "data-" attributes (for example: data-intro="some text" data-step="1")
How can this be done?
After the component has rendered, you could apply the attributes to the top level element representing the component
Example:
var panel = Ext.create('Ext.panel.Panel',{
title: 'Test',
width: 500,
height: 200,
renderTo: Ext.getBody(),
listeners: {
afterrender: function(cmp) {
cmp.getEl().set({
"data-intro": 'some text',
"data-step": 1
});
}
}
});
panel.show();
You can use the autoEl config option to achieve this.
{
xtype: 'panel',
title: 'My Panel',
autoEl: {
tag: 'div',
'data-step': '1'
}
}
I want a dojox.grid.DataGrid with a dojo.data.ItemFileReadStore as the data store. I want it to fill the entire screen. I don't want to specify dimensions in pixels. All the examples that I've seen specify them in pixels or use a CSV data store. I've tried using HTML elements and javascript to setup the datagrid and store.
Has anyone done this? Is there a bug? It seems like what anyone would want, but maybe it's not possible for some reason. Any ideas? Thanks!
Edit to insert code:
<div id="gridContainer" style="width: 100%; height: 100%;"></div>
<div id="gridContainer1" style="width: 400px; height: 200px;"></div>
<script type="text/javascript">
dojo.addOnLoad(function(){
// our test data store for this example:
var jsonStore = new dojo.data.ItemFileReadStore({
url: '/mydata.json'
});
var layout = [{
field: 'id',
name: 'id',
width: '20px'
},
{
field: 'name',
name: 'name',
width: '50px'
},
{
field: 'owner',
name: 'owner',
width: '50px'
}];
// create a new grid:
var grid = new dojox.grid.DataGrid({
query: {
rowid: '*'
},
store: jsonStore,
clientSort: true,
rowSelector: '20px',
structure: layout
},
document.createElement('div'));
dojo.byId("gridContainer1").appendChild(grid.domNode);
grid.startup();
});
</script>
Depending on whether I use gridContainer or gridContainer1, it does not show or shows the grid respectively.
What gives?
Yep - perfectly possible.
1) Page layout is the responsibility of the layout widgets (ContentPane, StackContainer, BorderContainer, TabContainer...) The grid is able to take part in a layout but you should really place it in a contianer that is designed to do layout.
2) Programatic creation can be achieved with:
var layout = [{
name: "MyFirstColumnHeader",
field: 'someColumnNameInMyData',
width: "180px;"
},
{
name: "MySecondColumnHeader",
field: 'someOtherColumnName',
width: "180px;"
}
];
var emptyData = {
identifier: 'uniqueIdOfEachItem',
label: 'displayName',
items: []
};
var store = new dojo.data.ItemFileWriteStore({
data: emptyData
});
var grid = new dojox.grid.DataGrid({
id: 'myGrid',
query: {
uniqueIdOfEachItem: '*'
},
store: store,
structure: layout
}, gridPlaceholder);
grid.startup();
where
MyFirstColumnHeader is the text you would like in the first column header
someColumnInMyData is the object attribute or 'column' in the data to be displayed
gridPlaceholder is a div on the page to put the grid into (just add an empty div to ContentPane and make the style of the ContentPane to be width : 100%, height : 100%
uniqueIdOfEachItem is the property of each displayed item that marks them as unique, e.g. their primary key or ID property
This example creates a read/write store and has a simple layout, but the dojo docs should be able to help with more complex examples.