Related
I'm working on a Sencha ExtJS 6.5 project. I have two gridpanels, one next to each other, and I need them to be scrollable, but no matter what I try, I can't seem to accomplish that.
I must add that this two gridpanels are inside another panel, which is also within a ViewPort.
This is a picture of what I need:
And this the code I have written so far:
Ext.define('ScrollTest.view.MyViewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.myviewport',
requires: [
'ScrollTest.view.MyViewportViewModel',
'Ext.toolbar.Toolbar',
'Ext.button.Button',
'Ext.grid.Panel',
'Ext.grid.column.Column',
'Ext.view.Table'
],
viewModel: {
type: 'myviewport'
},
layout: 'fit',
items: [
{
xtype: 'panel',
alignOnScroll: false,
border: false,
itemId: 'oMainPanel',
title: 'Familias de Activos',
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
itemId: 'oGridToolbar',
items: [
{
xtype: 'button',
text: 'Agregar Familia'
},
{
xtype: 'button',
text: 'Modificar Familia'
},
{
xtype: 'button',
text: 'Eliminar Familia'
},
{
xtype: 'button',
text: 'Detalle'
}
]
}
],
items: [
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'gridpanel',
flex: 1,
alignOnScroll: false,
scrollable: true,
title: 'Familias',
headerBorders: false,
bind: {
store: '{oStore}'
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'blah blah'
}
],
viewConfig: {
scrollable: 'vertical'
}
},
{
xtype: 'gridpanel',
flex: 1,
alignOnScroll: false,
scrollable: 'vertical',
title: 'Articulos',
bind: {
store: '{oStore2}'
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'blop blop'
}
]
}
]
}
]
}
]
});
What am I doing wrong? Thank you very much in advance.
You have an unnecessary layer of nesting, there is a panel with no layout defined. Remove it:
Ext.define('ScrollTest.view.MyViewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.myviewport',
layout: 'fit',
items: [{
xtype: 'panel',
border: false,
itemId: 'oMainPanel',
title: 'Familias de Activos',
layout: {
type: 'hbox',
align: 'stretch'
},
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
itemId: 'oGridToolbar',
items: [{
xtype: 'button',
text: 'Agregar Familia'
}, {
xtype: 'button',
text: 'Modificar Familia'
}, {
xtype: 'button',
text: 'Eliminar Familia'
}, {
xtype: 'button',
text: 'Detalle'
}]
}],
items: [{
xtype: 'gridpanel',
flex: 1,
title: 'Familias',
store: {
data: (function() {
var data = [],
i;
for (i = 1; i <= 100; ++i) {
data.push({id: i});
}
return data;
})()
},
columns: [{
dataIndex: 'id',
text: 'blah blah'
}]
}, {
xtype: 'gridpanel',
flex: 1,
title: 'Articulos',
store: {
data: (function() {
var data = [],
i;
for (i = 1; i <= 100; ++i) {
data.push({id: i});
}
return data;
})()
},
columns: [{
dataIndex: 'id',
text: 'blop blop'
}]
}]
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
new ScrollTest.view.MyViewport();
}
});
I'm trying to make the bar that says my panel to collapse but I failed ... I am new to this framework I would like to give me a solution ..
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
requires: [
'Ext.toolbar.Toolbar',
'Ext.button.Button',
'Ext.grid.Panel',
'Ext.grid.View',
'Ext.grid.column.CheckColumn'
],
autoShow: true,
height: 401,
width: 970,
title: 'Linia de tiempo',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
dockedItems: [
/* {
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'MyButton'
}
]
} */
],
items: [
{
xtype: 'gridpanel',
title: ' ',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
width: 250,
text: 'Grado y Sección'
},
{
xtype: 'checkcolumn',
text: 'Inicio'
},
{
xtype: 'checkcolumn',
text: 'Indice'
},
{
xtype: 'checkcolumn',
text: 'Proyecto1'
},
{
xtype: 'checkcolumn',
text: 'Proyecto2'
},
{
xtype: 'checkcolumn',
text: 'Proyecto3'
},
{
xtype: 'checkcolumn',
text: 'Proyecto4'
},
{
xtype: 'checkcolumn',
text: 'Cierre'
}
]
},
{
title : 'Collapsed Panel ' ,
collapsed: true,
collapsible : true,
anchura : 640 ,
//html : KitchenSink . DummyText . MEDIUMTEXT ,
colspan : 3
},
{
xtype: 'panel',
collapseMode: 'standard',
collapsed: true,
collapsible: true,
autoScroll: true,
split:true,
title: 'My Panel'
html: '<iframe src="http://www.google.com" style="width:100%;height:100%;border:none;"></iframe>'
},
/*{
title : 'Collapsed Panel ' ,
se derrumbó : true ,
plegable : true ,
ancho : 640 ,
colspan : 3
} */
]
});
me.callParent(arguments);
}
});
Here is an example for your problem,
Working fiddle is here
Ext.define('MyApp.view.MyWindow', {
//extend: 'Ext.panel.Panel',
extend: 'Ext.window.Window',
alias: 'widget.parentPanel',
requires: ['Ext.toolbar.Toolbar', 'Ext.button.Button', 'Ext.grid.Panel', 'Ext.grid.View', 'Ext.grid.column.CheckColumn'],
autoShow: true,
height: 401,
width: 520,
style:'margin-top: 200px',
title: 'Linia de tiempo',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
dockedItems: [],
items: [{
xtype: 'gridpanel',
title: ' ',
columns: [{
xtype: 'gridcolumn',
dataIndex: 'string',
width: 250,
text: 'Grado y Sección'
}, {
xtype: 'checkcolumn',
text: 'Inicio'
}, {
xtype: 'checkcolumn',
text: 'Indice'
}, {
xtype: 'checkcolumn',
text: 'Proyecto1'
}, {
xtype: 'checkcolumn',
text: 'Proyecto2'
}, {
xtype: 'checkcolumn',
text: 'Proyecto3'
}, {
xtype: 'checkcolumn',
text: 'Proyecto4'
}, {
xtype: 'checkcolumn',
text: 'Cierre'
}]
}, {
xtype: 'panel',
title: 'Collapsed Panel ',
collapsed: false,
collapsible: true,
anchura: 640,
colspan: 3,
items:[{
xtype: 'textfield'
},{
xtype: 'checkbox',
boxLabel: 'select',
boxLabelAlign: 'before'
}]
}, {
xtype: 'panel',
collapseMode: 'standard',
collapsed: true,
collapsible: true,
autoScroll: true,
split: true,
title: 'My Panel',
html: '<iframe src="http://www.google.com" style="width:100%;height:100%;border:none;"></iframe>'
}]
});
me.callParent(arguments);
}
});
Ext.widget('parentPanel', {renderTo: 'panel'});
I'm new in sencha touch. I run into some strange behavior. Shortly I want to make one window with toolbar and list below.
Main launch code:
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'xxx',
controllers: ['Main'],
views: ['Home', 'Header', 'Footer', 'list.MainMenu'],
stores: ['MainMenu'],
models: ['MenuItem'],
launch: function() {
Ext.create('xxx.view.Viewport');
}
});
Viewport view:
Ext.define('xxx.view.Viewport', {
extend: 'Ext.Panel',
config: {
fullscreen: true,
items: [
{
xtype: 'headerpanel',
},{
xtype: 'MainMenu'
}
]
}
});
Header view:
Ext.define('xxx.view.Header', {
extend: Ext.Panel,
xtype: 'headerpanel',
config: {
items: [
{
xtype: 'titlebar',
docked: 'top',
title: '<img src="lib/resources/images/x.png" />',
items: [
{
text: 'One',
align: 'left'
},{
text: 'Two',
align: 'right'
}
]
}
]
}
});
Meniu view:
Ext.define('xxx.view.list.MainMenu', {
extend: 'Ext.List',
xtype: 'MainMenu',
requires: ['xxx.store.MainMenu'],
config: {
itemTpl: '{title}',
store: 'MainMenu'
}
});
Menu store:
Ext.define('xxx.store.MainMenu', {
extend: 'Ext.data.Store',
config: {
model: 'xxx.model.MenuItem',
data: [
{icon: 'a', title: 'A'},
{icon: 'b', title: 'B'},
]
}
});
Menu model:
Ext.define('xxx.model.MenuItem', {
extend: 'Ext.data.Model',
config: {
fields: ['icon', 'title']
}
});
The result of this piece code is just toolbar without any list.
I set layout to 'fit' value the result is opposite: only list I can see.
You forgot to set a layout to your Viewport view. Without a layout, container don't know how to display inner items.
Try the following :
Ext.define('xxx.view.Viewport', {
extend: 'Ext.Panel',
config: {
fullscreen: true,
layout:'fit',
items: [
{
xtype: 'titlebar',
docked: 'top',
title: '<img src="lib/resources/images/x.png" />',
items: [{
text: 'One',
align: 'left'
},{
text: 'Two',
align: 'right'
}]
},{
xtype: 'list',
itemTpl: '{title}',
store: 'MainMenu'
}
]
}
});
You can find more about layout here
I have a panel which consists of a toolbar and tabs. On each tab there should be a list and a button. I believe I have this set up correctly except for the list, which I am trying to add as follows:
Ext.define('Myapp.view.Search', {
xtype: 'search',
extend: 'Ext.tab.Panel',
config: {
activeItem: 0,
tabBar: {
docked: 'top',
autoScroll: 'auto',
ui: 'light',
layout: {
pack: 'center'
}
},
items: [
{
xtype:'toolbar',
docked:'top',
ui: 'light',
title: 'Search'
},
{
title: 'Tab 1',
xtype: 'formpanel',
items: [
{
xtype: 'Mylist' //DOES NOT WORK
},
{
xtype: 'panel',
defaults: {
xtype: 'button',
style: 'margin: 0.1em',
flex : 1
},
layout: {
type: 'hbox'
},
items: [
{
text: 'Button 1',
}
]
}
]
},
{
title: 'Tab 2',
xtype: 'formpanel',
items: [
{
xtype: 'panel',
defaults: {
xtype: 'button',
style: 'margin: 0.1em',
flex : 1
},
layout: {
type: 'hbox'
},
items: [
{
text: 'Button 1',
}
]
}
]
}
]
}
});
Please let me know what I am doing wrong and thanks for you help!
EDIT: added Mylist below:
Ext.define('Myapp.view.Mylist', {
extend: 'Ext.dataview.NestedList',
xtype: 'Mylist',
config: {
store: 'Sections'
},
getTitleTextTpl: function() {
return '{name}';
},
getItemTextTpl: function(node) {
return '<strong>{name}</strong>';
},
});
Try these
in View:
{
xtype: 'panel',
flex: 4,
width: '400px',
height:"700px",
layout: {
type: 'fit'
},
items: [
{
xtype: 'list',
// loadingText:"Loading Category",
styleHtmlContent: true,
// id:"mylist2",
width:"300px",
itemTpl:
'<div class="mycon">'+
'<input type="image" id="click" img src="{coupon_image}" style="max-width:130%;border:6px double #000000;" width="200" height="200"' +'style="padding:3px;">' +
'</div>'+
'<div><font size="2" color="red"><b>Coupon Name:</b></font></div>'+
'<div><font size="2" color="green"><b>{coupon_name}</b></font></div>'+
'</div>',
store : 'ViewCategoryStore',
},
]
}
in controller:
Ext.define('Expressdeal.controller.ViewCategoryController', {
extend: 'Ext.app.Controller',
config: {
refs: {
viewcat : 'viewcategory' // xtype of the view
},
control: {
'viewcategory list: {
activate: 'onActivate',
itemtap: 'onItemTap',
},
Where you define your list in your List view you should say
alias:'widget.Mylist'
instead of
xtype:'Mylist'
also your list needs an itemTpl config im pretty sure.
config: {
store: 'Sections',
itemTpl:'{example}'
}
And as long as the store that drives your list is in working shape the list should appear correctly
I have an actioncolumn in a grid. I used to open a window after i clicked on this but now do we want to open a new tab in the tabpanel instead of the windows. This is the tab i want to generate when someone clicks on the actionpanel:
Ext.define('MyApp.view.MyTabPanel2', {
extend: 'Ext.tab.Panel',
alias: 'widget.mytabpanel2',
closable: true,
title: 'Report {name}',
activeTab: 1,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'textfield',
fieldLabel: 'Reference',
labelAlign: 'top'
},
{
xtype: 'datefield',
fieldLabel: 'From',
labelAlign: 'top'
},
{
xtype: 'datefield',
fieldLabel: 'To',
labelAlign: 'top'
},
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: 'Open report'
},
{
xtype: 'button',
text: 'Save report'
},
{
xtype: 'button',
text: 'Export report'
},
{
xtype: 'button',
text: 'Refresh data'
}
]
}
],
items: [
{
xtype: 'gridpanel',
title: 'Grid',
forceFit: true,
store: 'resultStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'ccuDesignation',
text: 'CCU Designation'
},
{
xtype: 'gridcolumn',
dataIndex: 'carrierName',
text: 'Carrier Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'dataPackageName',
text: 'Data package name'
},
{
xtype: 'gridcolumn',
dataIndex: 'bytesRx',
text: 'bytesRX'
},
{
xtype: 'gridcolumn',
dataIndex: 'bytesTx',
text: 'bytesTX'
}
],
viewConfig: {
}
},
{
xtype: 'panel',
title: 'Chart',
dockedItems: [
{
xtype: 'chart',
height: 250,
animate: true,
insetPadding: 20,
store: 'resultStore',
dock: 'top',
axes: [
{
type: 'Category',
fields: [
'ccuDesignation'
],
position: 'bottom',
title: 'CCU Designation'
},
{
type: 'Numeric',
fields: [
'bytesTx'
],
position: 'left',
title: 'Bytes'
},
{
type: 'Numeric',
fields: [
'bytesRx'
],
position: 'left',
title: 'Bytes'
}
],
series: [
{
type: 'line',
xField: 'x',
yField: [
'bytesTx'
],
smooth: 3
},
{
type: 'line',
xField: 'x',
yField: [
'bytesRx'
],
smooth: 3
}
],
legend: {
}
}
]
}
]
});
me.callParent(arguments);
}
});
i have read this at sencha:
// tab generation code
var index = 0;
while(index < 3){
addTab(index % 2);
}
function addTab (closable) {
++index;
tabs.add({
title: 'New Tab ' + index,
iconCls: 'tabs',
html: 'Tab Body ' + index + '<br/><br/>' + Ext.example.bogusMarkup,
closable: !!closable
}).show();
}
Ext.createWidget('button', {
renderTo: 'addButtonCt',
text: 'Add Closable Tab',
handler: function () {
addTab(true);
},
iconCls:'new-tab'
});
Ext.createWidget('button', {
renderTo: 'addButtonCt',
text: 'Add Unclosable Tab',
handler: function () {
addTab(false);
},
iconCls:'new-tab',
style: 'margin-left: 8px;'
});
But i don't have the var tabs in my script. So how can i add the tab to this:
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
id: 'tabs',
activeTab: 1,
region: 'center',
items: [
{
xtype: 'gridpanel',
title: 'Reports',
forceFit: true,
store: 'ReportsStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Type',
text: 'Type'
},
{
xtype: 'gridcolumn',
dataIndex: 'Description',
text: 'Description'
},
{
xtype: 'actioncolumn',
dataIndex: 'queryFields',
items: [
{
handler: function(view, rowIndex, colIndex, item, e) {
addTab;
alert('clicked');
},
altText: 'Open report',
icon: 'img/report-arrow.png',
tooltip: 'Open report'
}
]
}
],
viewConfig: {
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
iconCls: 'addReport',
text: 'Add report',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}
]
}
]
}
]
}
]
});
me.callParent(arguments);
},
onButtonClick: function(button, e, options) {
Ext.create('MyApp.view.addReport').show();
}
});
var tabs = Ext.getCmp('tabs');
function addTab (closable) {
alert('yes');
tabs.add(Ext.create('MyApp.view.MyTabPanel2'));
}
How can i do this? I work with extjs designer 2
In that first view you've shown above, you are creating another tabpanel not an individual tab. If you tried to insert that into the tabpanel that you defined in your viewport you would have a tabpanel inside of another tabpanel. I don't think that is what you are trying to do.
You could create that first view above as an Ext.tab.Tab which contains the gridpanel or just create it as the gridpanel itself and include the tab config options in your add method call. To answer your question about referencing the tabpanel when you don't have it defined as a variable: you should just give it an id config (e.g. id: 'tabs') and then you can use Ext.getCmp('tabs'). For example:
// a piece of your viewport config
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
activeTab: 1,
region: 'center',
id: 'tabs', // <-- include this config
// other configs...
Adding the tab could then be done like this:
// get a reference to the tab panel
var tabs = Ext.getCmp('tabs');
// if you create the view as a gridpanel you could do it like this
tabs.add({
title: sometitle,
iconCls: someicon,
closable: yayOrNay,
items: [Ext.create('MyApp.view.MyGridPanel')]
});
// OR if you create the view as an Ext.tab.Tab which already contains the gridpanel
tabs.add(Ext.create('MyApp.view.MyTab'));
Read And Use Following Code:
function allExpenseTypeReport(){
var reportByExpenseType=Ext.getCmp("reportByExpenseType");
if(reportByExpenseType==null){
reportByExpenseType = new Ext.tm.reports.ExpenseTypeReport({
title:WtfGlobal.getLocaleText("ec.reportbyexpensetype"),
layout:'fit' ,
closable: true,
iconCls:'pwnd tabreportsWrap',
id:"reportByExpenseType"
});
Ext.getCmp('as').add(reportByExpenseType);
}
Ext.getCmp("as").setActiveTab(Wtf.getCmp("reportByExpenseType"));
reportByExpenseType.doLayout();
}
Define Here:
Ext.tm.reports.ExpenseTypeReport = function(config){
Ext.apply(this, config);
Ext.tm.reports.ExpenseTypeReport.superclass.constructor.call(this, config);
Define your Code Here:
};