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'
}]
}]
});
});
Related
How do I databind my extjs6 grid to include "commission" using the following format I created from webapi ef?
grid columns should look like this.
title: 'Commissions',
xtype: 'grid',
bind: {
store: '{myAccountDetails.commission}'
},
ui: 'featuredpanel-framed',
cls: 'custom-grid',
margin: '0 0 0 0',
itemId: 'gridCommId',
collapsible: true,
columns: [
{
header: 'USD',
dataIndex: 'usd',
flex: 1
},
{
header: 'AUD',
dataIndex: 'aud',
flex: 1
},
{
header: 'CAD',
dataIndex: 'cad',
flex: 1
}
This is my view of grid
the screenshot I attached is myAccountDetails
any help would be greatly appreciated!
just a sidenote... if I add a label I am able to return the info I am looking for but I want it to be inside a grid.
xtype: 'label',
cls: 'myLabelCRM2',
bind: {
text: '{myAccountDetails.commission.aud}'
}
Best approach is to define a store in viewmodel, and bind it's data field directly to the details commision field using the mustache syntax.
Ext.define('MyView', {
viewModel: {
data: {
myAccountDetails: {
accountName: 'foo',
commision: {
aud: 7,
cad: 8,
usd: 9
}
}
},
stores: {
commisionStore: {
fields: ['aud', 'cad', 'usd'],
data: '{myAccountDetails.commision}'
}
}
},
extend: 'Ext.grid.Panel',
xtype: 'MyView',
bind: {
store: '{commisionStore}'
},
columns: [{
header: 'USD',
dataIndex: 'usd',
flex: 1
}, {
header: 'AUD',
dataIndex: 'aud',
flex: 1
}, {
header: 'CAD',
dataIndex: 'cad',
flex: 1
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'MyView',
width: 300,
height: 300,
renderTo: Ext.getBody()
});
}
});
I have a page with 3 elements created on the page and a 4th element (D) being loaded from a different script file using #parse. What I want to do is to force table layout to align them like this
____ ___
| A | |
|____| |
| B | D |
|____| |
| C | |
|____|___|
Is it possible? If yes, how?
I tried using colspan and rowspan to no avail.
You can do this by using layout specifically by using flex.
Example Code:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.Viewport.add({
xtype: 'panel',
title: 'Flexbox Layout Example',
items: [{
xtype: 'panel',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
height: '100%',
border: 1,
items: [{
xtype: 'panel',
flex: 1,
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
items: [{
xtype: 'panel',
flex: 1,
html: 'Panel 1',
border: 1,
}, {
xtype: 'panel',
flex: 1,
html: 'Panel 2',
border: 1,
}, {
xtype: 'panel',
flex: 1,
html: 'panel 3',
border: 1,
}]
}, {
html: 'panel D',
xtype: 'panel',
flex: 1,
border: 1,
}]
}]
});
}
});
Link to working fiddle:
https://fiddle.sencha.com/#view/editor&fiddle/2nio
FIDDLE
items: [{
html: 'Cell A content'
}, {
html: 'Cell B content',
rowspan: 3
}, {
html: 'Cell C content'
}, {
html: 'Cell D content'
}]
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
In the following grid when you first popup the window, you can select items with the checkboxes.
But if you click OK to close the popup, and then click to launch it again, the checkboxes do not seem to work.
If you close the popup and launch it again, the checkboxes you just clicked on are now selected/deselected.
If I set closeAction to 'hide' on the window this issue goes away, but then don't I lose the value of the default closeAction of destroy?
In fact, not destroying the window and re-creating it every time messes up other stuff, so setting closeAction to hide does not work in my real app.
When closeAction is set to destroy, when a grid row checkbox is clicked, at least these three events are dispatched: itemclick, cellclick, select. But when closeAction is set to hide, the select event is not dispatched.
Ext.define('MyPopup', {
extend: 'Ext.window.Window',
alias: 'widget.myPopup',
width: 200,
height: 200,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'grid',
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: false,
mode: "MULTI"
}),
store: Ext.create('Ext.data.Store', {
fields: ['name'],
data: [
{name: 'one'},
{name: 'two'},
{name: 'three'}
]
}),
columns: [{
text: 'Name',
dataIndex: 'name'
}]
}],
dockedItems: [{
dock: 'bottom',
xtype: 'button',
width: '50',
text: 'OK',
handler: function(comp){
comp.up('window').close();
}
}]
});
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'center'
},
items: [{
xtype: 'button',
width: 50,
text: 'Click',
handler: function(){
Ext.create('MyPopup').show();
}
}]
}]
});
});
I was able to recreate your issue in a fiddle and found that if instead of creating the checkboxmodel object you define it. It fixes the issue.
Here is code demonstrating defining the selType and selModel configs:
Ext.define('MyPopup', {
extend: 'Ext.window.Window',
alias: 'widget.myPopup',
width: 200,
height: 200,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'grid',
selType:'checkboxmodel',
selModel: {
checkOnly: false,
mode: "MULTI"
},
store: Ext.create('Ext.data.Store', {
fields: ['name'],
data: [{
name: 'one'
}, {
name: 'two'
}, {
name: 'three'
}]
}),
columns: [{
text: 'Name',
dataIndex: 'name'
}]
}],
dockedItems: [{
dock: 'bottom',
xtype: 'button',
width: '50',
text: 'OK',
handler: function(comp) {
comp.up('window').close();
}
}]
});
And a working fiddle for demonstration.
I have a tabpanel. In the tab, i have a panel which includes a toolbar and 3 items: [ fieldset, a gridpanel, and another fieldset (or some buttons)]. I cannot get the gridpanel to show scroll bar. It only works if i set the maxheight/minheight of the gridpanel.
I also tried wrapping gridpanel inside a container. No luck.
In the example, i use fit layout. I tried "anchor" layout, and assigned anchor:'100% 50%' to gridpanel, hoping that it would resize when i resize browser. No luck.
Alternatively, if gridpanel is the ONLY item in the tab, autoscroll would work. So it appears when it's inside another panel, autoscroll/ resizing does not work.
Did I miss something here ?
Ext.application({
name: 'MyApp',
launch: function () {
// create the data store
var d = ['company', 100];
var myData = [];
for (var i = 0; i < 50; i++) {
myData[i] = d;
}
var store = Ext.create('Ext.data.ArrayStore', {
fields: [{
name: 'company'
}, {
name: 'price',
type: 'float'
}],
data: myData
});
Ext.create("Ext.container.Viewport", {
layout: {
type: 'border'
},
items: [{
xtype: 'toolbar',
id: 'headerbar',
region: 'north',
height: 30
}, {
xtype: 'toolbar',
id: 'menubar',
region: 'north',
height: 30
}, {
xtype: 'tabpanel',
itemId: 'maintabpanel',
activeTab: 0,
region: 'center',
plain: true,
margins: '5 5 5 5',
layout: 'fit',
items: [{
closable: false,
title: 'Tab',
margins: '0 0 0 0',
items: [{
xtype: 'panel',
title: 'Panel',
layout: 'fit',
tools: [{
type: 'help',
tooltip: 'Help'
}, {
type: 'close',
tooltip: 'Close'
}],
items: [{
xtype: 'fieldset',
title: 'Field Set',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Input'
}]
}, {
xtype: 'gridpanel',
autoScroll: true,
store: store,
columns: [{
text: 'Company',
flex: 1,
sortable: true,
dataIndex: 'company'
}, {
text: 'Price',
flex: 1,
sortable: true,
dataIndex: 'price'
}],
viewConfig: {
autoFit: true
}
}, {
xtype: 'fieldset',
title: 'Field Set 2',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Output'
}]
}]
}]
}]
}, {
xtype: 'box',
id: 'footer',
region: 'south',
html: '<h1> Copyright 2012</h1>',
height: 30
}]
});
}
});
Note that the parent panel of the gridpanel has fit layout, yet it has more than 1 item (the fieldset, the gridpanel, and another fieldset). A fit layout can only have 1 child.
Also, the parent of that fit panel (the one with closable : false - the tab) has no layout definition.
Here's a JsFiddle modified version of your code that works.