I am trying to add Checkboxes for a Rally Report version 2.00p2.
I defined severals place holders for the filter (releaseFilter and stateFilter)
and Adding the checkboxes at the body of the onReady function at the end.
However, Instead of 5 different checkbox I get 1 and on top of the Release filter.
Sorry But I couldn't add an Image.
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
autoScroll: 'true',
items: [
{
xtype: 'container',
itemId: 'releaseFilter',
style: {
margin: '5px'
}
},
{
xtype: 'container',
itemId: 'stateFilter',
style: {
margin: '5px'
}
},
{
xtype: 'container',
itemId: 'grid',
style: {
margin: '10px',
}
},
// SOME CODE
],
launch: function() {
Rally.data.ModelFactory.getModel({
type: 'UserStory',
success: function(model) {
this.grid = this.add({
xtype: 'rallygrid',
model: model,
columnCfgs: [
'FormattedID',
'Release',
'Iteration',
'PlanEstimate',
'PlanDevEstDays',
'PlanQAEstDays'
],
storeConfig: {
filters: [
{
property: 'ScheduleState',
operator: '=',
value: 'Accepted'
}
]
}
});
this.down('#releaseFilter').add(
{
xtype: 'rallyreleasecombobox'
}
);
this.down('#stateFilter').add([{
xtype: 'menucheckitem',
text: 'Backlog',
floating: 'false'
},{
xtype: 'menucheckitem',
text: 'Defined'
},{
xtype: 'menucheckitem',
text: 'In-Progress'
},{
xtype: 'menucheckitem',
text: 'Completed'
},{
xtype: 'menucheckitem',
text: 'Accepted'
}]
);
},
scope: this
});
}
});
Rally.launchApp('CustomApp', {
name: 'Grid Example'
});
});
The original Entry in your javadoc is:
Ext.create('Ext.menu.Menu', {
width: 100,
height: 110,
floating: false, // usually you want this set to True (default)
renderTo: Ext.getBody(), // usually rendered by it's containing component
items: [{
xtype: 'menucheckitem',
text: 'select all'
},{
xtype: 'menucheckitem',
text: 'select specific',
},{
iconCls: 'add16',
text: 'icon item'
},{
text: 'regular item'
}]
});
What did I do wrong ?
Instead of using menucheckitem, use a standard Ext checkbox. Like this:
this.down('#stateFilter').add([{
xtype: 'checkbox',
fieldLabel: 'Backlog'
},
...
]);
Be sure change it from text to fieldLabel
Related
I am creating a menu using Ext.tab.Panel and would like to have Search feature. Something like Bootstrap navbar - https://getbootstrap.com/docs/4.0/components/navbar/
I tried to simply add the textfield element but didn't work obviously.
Ext.create('Ext.TabPanel', {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
},
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}
]
});
Is it possible to achieve this at all?
You can archive it with the tabbar config of the Ext.tab.Panel.
The Ext.tab.Bar is a specialized Ext.container.Container where you can add items like a to Textfield.
So add te search textfield to the tabbar config and you can archive what you want to, see the example code below and the Sencha Fiddle.
Ext.create('Ext.TabPanel', {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
},
],
tabBar: {
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}
]
},
renderTo: Ext.getBody()
});
At first this functionality does not exist in the tabpanel, which I recommend you do and replace the idea of tabpanel to apply a cardlayout which is the same tabpanel layout system.
And then you can use a toolbar, with the buttons being configured with the toogleGroup, in short, you'd better see the code example below working.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Panel', {
fullscreen: true,
renderTo: Ext.getBody(),
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'toolbar',
height: 42,
defaults: {
xtype: 'button',
},
items: [{
text: 'Tab1',
handler: function(button){
var me = this,
fakeContainer = button.up('panel').down('#fakeTab');
fakeContainer.setActiveItem(button.tabIndex);
},
tabIndex: 0,
toggleGroup: 'tabHandler',
enableToggle: true,
pressed: true,
margin: '0'
}, {
text: 'Tab2',
handler: function(button){
var me = this,
fakeContainer = button.up('panel').down('#fakeTab');
fakeContainer.setActiveItem(button.tabIndex);
},
tabIndex: 1,
enableToggle: true,
margin: '0'
}, {
text: 'Tab3',
handler: function(button){
var me = this,
fakeContainer = button.up('panel').down('#fakeTab');
fakeContainer.setActiveItem(button.tabIndex);
},
tabIndex: 2,
toggleGroup: 'tabHandler',
enableToggle: true,
margin: '0'
}, '->', {
xtype: 'textfield',
fieldLabel: 'Search:',
labelWidth: 70,
width: 250,
margin: 0
}, {
iconCls: 'x-fa fa-search',
handler: function(){
alert('Your Search here!');
}
}]
}, {
xtype: 'container',
itemId: 'fakeTab',
margin: '16 0 0 0',
flex: 1,
layout: 'card',
defaults: {
xtype: 'container',
height: 800
},
items: [{
html: '<STRONG>TAB 1 your content here</STRONG>'
}, {
html: '<STRONG>TAB 2 your content here</STRONG>'
}, {
html: '<STRONG>TAB 3 your content here</STRONG>'
}]
}]
});
}
});
Working sample here
I am working on Ext JS 6.5 modern. I have some condition to disable the grid component, user has only rights to view the grid no one else.
I have tried disabled config and disable method but not working. Here is my Fiddle.
Code snippet
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'gridStore',
fields: ['name'],
data: [{
name: 'Test 1'
}, {
name: 'Test 2'
}, {
name: 'Test 3'
}, {
name: 'Test 4'
}]
});
Ext.create({
xtype: 'grid',
layout: 'fit',
fullscreen: true,
title: 'Baisc grid example',
store: 'gridStore',
//Here I have put {disabled: true} but not working
disabled: true,
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
}],
listeners: {
childtap: function (grid, location, eOpts) {
alert('childtap');
}
},
items: [{
xtype: 'toolbar',
items: {
xtype: 'button',
ui: 'action',
text: 'Disabled grid',
iconCls: 'x-fa fa-ban',
handler: function () {
//IT is also not working
this.up('grid').setDisabled(true);
this.up('grid').disable();
}
}
}]
//renderTo:Ext.getBody()
});
}
});
Somebody please help me with a solution for disabling the grid component.
As a workaround we can use grid.setMasked(true);
Here is the example Fiddle.
Another approach is to set grid's hideMode to opacity and then set it to hidden (this.up('grid').setHidden(true);).
For Example (editing your fiddle)
Ext.create('Ext.data.Store', {
storeId: 'gridStore',
fields: ['name'],
data: [{
name: 'Test 1'
}, {
name: 'Test 2'
}, {
name: 'Test 3'
}, {
name: 'Test 4'
}]
});
Ext.create({
xtype: 'grid',
layout: 'fit',
fullscreen: true,
title: 'Baisc grid example',
store: 'gridStore',
//Here I have put {disabled: true} but not working
//disabled: true,
hideMode: 'opacity',
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
}],
listeners: {
childtap: function (grid, location, eOpts) {
alert('childtap');
}
},
items: [{
xtype: 'toolbar',
items: {
xtype: 'button',
ui: 'action',
text: 'Disabled grid',
iconCls: 'x-fa fa-ban',
handler: function () {
this.up('grid').setHidden(true);
}
}
}]
//renderTo:Ext.getBody()
});
Also you need this css override:
<style>
.x-hidden-opacity {
opacity: 0.2 !important; //default is 0
pointer-events: none;
}
</style>
I created a table using extjs where it is having three columns name, email and cars. In extjs we are having a default sorting method. here i want to add search method for all these three columns so that i can also search using the name, email and cars.
What change i need to do for the below code
The expected output is i need to get search filter option under each columns.
Ext.define('ViewerModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.viewermodel',
stores: {
mystore: {
fields: ['name', 'email', 'cars'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa#simpsons.com"
}, {
'name': 'Bart',
"email": "bart#simpsons.com"
}, {
'name': 'Homer',
"email": "homer#simpsons.com"
}, {
'name': 'Marge',
"email": "marge#simpsons.com"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}
}
});
Ext.define('APP.HorizontalBox', {
extend: 'Ext.container.Container',
requires: ['Ext.layout.container.HBox'],
xtype: 'layout-horizontal-box',
width: 750,
height: 300,
layout: {
type: 'hbox',
align: 'stretch'
},
bodyPadding: 10,
defaults: {
frame: true,
bodyPadding: 10
},
viewModel: {
type: 'viewermodel'
},
items: [{
xtype: 'grid',
title: 'Grid: click on the grid rows',
itemId: 'myGridItemId',
flex: 1.2,
margin: '0 10 0 0',
bind: {
store: '{mystore}',
selection: '{users}'
},
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 0.5
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Cars',
dataIndex: 'cars',
flex: 1
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
padding: '2 5 2 5',
text: 'Edit item',
handler: function (btn) {
var grid = btn.up('grid');
var selectedRow = grid.getSelectionModel().getSelection()[0];
var janela = Ext.create('APP.MyWindow', {
animateTarget: btn.getEl(),
//EDITED
viewModel: {
data: {
users: selectedRow
}
}
}).show();
}
}]
}],
}, {
xtype: 'form',
title: 'View',
itemId: 'panelbindItemId',
flex: 1,
margin: '0 10 0 0',
defaults: {
labelWidth: 50
},
items: [{
xtype: 'displayfield',
margin: '20 0 0 0',
fieldLabel: 'Name',
bind: '{users.name}'
}, {
xtype: 'displayfield',
fieldLabel: 'Email',
bind: '{users.email}'
}]
}]
});
Ext.define('APP.MyWindow', {
extend: 'Ext.window.Window',
alias: 'widget.mywindow',
reference: 'windowreference',
title: 'MyWindow | Edit record',
closable: true,
modal: true,
padding: '10px',
height: 150,
layout: 'fit',
initComponent: function () {
var me = this;
Ext.apply(me, {
items: [{
xtype: 'form',
layout: 'anchor',
defaults: {
padding: '5 0 5 0'
},
items: [{
xtype: 'textfield',
margin: '10 0 0 0',
fieldLabel: 'Name',
bind: '{users.name}'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
bind: '{users.email}'
}]
}]
});
me.callParent(arguments);
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('APP.HorizontalBox', {
renderTo: document.body,
width: 750,
height: 400,
title: 'Title'
});
}
});
You can do it in the afterrender event of grid (Refer this post.) For example:
listeners: {
afterrender: function () {
var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
menu.add([{
text: 'Search',
iconCls: 'x-fa fa-home',
handler: function () {
console.log("Search Item");
}
}]);
}
}
Check this Fiddle.
What you are searching for is the FiltersFeature, and the usage is as follows:
xtype:'grid',
...
features:[{
ftype: 'filters',
local: true,
filters: [{
type: 'string',
dataIndex: 'name'
}, {
... (one definition for every column you want to allow filtering one)
}]
}]
Please note that you have to add a requires and maybe even load Ext.ux, as can be found in the last comment.
Other readers please be aware that FiltersFeature is ExtJS4 specific, and has been moved around for ExtJS 5 and 6.
You can also use this code where it will search the data using the date.
listeners: {
afterrender: function () {
var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
menu.add([{
xtype:'datefield',
name:'date1',
fieldLabel:'Filter By',
format: 'y-m-d',
listeners:{
renderer: Ext.util.Format.dateRenderer('y-m-d'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'y-m-d'}) }
}
}
It seems ridiculous to have to ask this question - but here we go. How do you align a Label with a textfield horizontally?
I need:
Label Text
Label
TextArea
Here is my code. I've tried everything, including a labelField but the text does not appear in my view.
Ext.define('CAMSApp.view.OpBuyoffVoidView', {
extend: 'Ext.Panel',
alias: ['widget.opbuyoffvoidview'], //ToDo Use I18N
config: {
xtype: 'Ext.form.Panel',
cls: 'dialogview formview',
centered: true,
scrollable: 'vertical',
modal: true,
screenId: 'opbuyoffvoidview',
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch',
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Void Buyoff',
cls: 'grey-bold-34pt',
ui: 'transparent',
items: [{
xtype: 'button',
cls: 'grey-bold-40pt greyBtn',
text: 'Cancel',
idForAction: 'opbuyoff-void-cancel_btn',
}, {
xtype: 'spacer',
},{
xtype: 'button',
cls: 'grey-bold-40pt greyBtn',
text: 'Save',
idForAction: 'opbuyoff-void-save_btn',
}],
},
{
xtype: 'panel',
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch',
padding: 5
},
items: [
{
xtype: 'label',
cls: 'block',
text: 'tesdfasrewaer'
},
{
fieldLabel: 'label',
labelWidth: 300,
xtype: 'textfield',
value: 'blahhhhh',
}, {
// xtype: 'panel' implied by default
xtype: 'textfield',
value: 'blahhhhhhhhhhh',
fieldLabel: 'text 2',
},{
xtype: 'textareafield',
width: 460,
height: 230,
idForUpdate: 'buyoff_reason_void',
//cls: 'priorityMedLabel',
}],
},
],
listeners: {
initialize: function(me, eOpts) {
CAMSApp.util.I18N.resolveStaticUIBindings(me);
},
show: function (me, eOpts) {
// Publish the screen id event.
log('[OpBuyoffVoid.show]');
CAMSApp.app.fireEvent('setscreenfocus', this);
},
},
}
});
So far I understood from your question that you need structure like below:
Label Text
Label
TextArea
Put below items in your view file:
items: [{
xtype: 'fieldset',
title: 'Enter your name and bio',
items: [{
xtype: 'textfield',
label: 'Name',
name: 'name'
}, {
xtype: 'textfield', // This textfield is dummy.
label: 'Bio', // You can simply put html here
labelWidth: '100%' // And can put your css to mimic default sencha label
}, {
xtype: 'textareafield',
name: 'bio'
}]
}]
Here is the fiddle for ref. Let me know if it serves your purpose or not.
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:
};