Develop Reference

How to create a button in the controller which opens the form (ext js)

I have a view (Main.js), form (RenterData.js) and I want to code controller which will open RenterData form by button from view Main.
Now my controller looks like that:
Ext.define('MyApp.controller.ButtonController', {
extend: 'Ext.app.ViewController',
views: ['MyApp.view.main.Main'],
refs: [{
ref: 'control-panel',
selector: 'control-panel'
}],
init: function(application) {
this.control({
"RenterId": function () {
click: this.onButtonClickRenterId
}
})
},
onButtonClickRenterId: function() {
/* place for form calling by button function */
}
});
I am a beginner in sencha ext js, and I don't understand which method I have to use for calling form by button. Note, that the button is into a carousel, which is into a menu on the view.
I use Ext JS 6.2.0
Grazie!

You can do this by showing the form content in a window or you can render it to a region panel in your view port here is an Example Fiddle
app.js
Ext.application({
name: 'Test',
requires: ['Test.view.Main', 'Test.view.MyForm'],
mainView: 'Test.view.Main',
launch: function () {}
});
app/view/Main.js
Ext.define('Test.view.Main', {
extend: 'Ext.container.Viewport',
title: 'main',
xtype: 'main',
// renderTo:Ext.getBody(),
width: 600,
height: 400,
layout: 'border',
items: [{
region: 'north',
height: 100,
items: [{
xtype: 'button',
text: 'Open Form in pop up window',
handler: function () {
Ext.create('Ext.window.Window', {
title: 'Popup',
width: 400,
height: 100,
autoShow: true,
items: {
xtype: 'myForm'
}
})
}
}, {}, {
xtype: 'button',
text: 'Open Form View Port Center Region',
handler: function () {
let myForm = Ext.create('Test.view.MyForm')
this.up('viewport').items.getAt(1).add(myForm);
}
}]
}, {
region: 'center',
id: 'mycenter',
title: 'Center Region',
items: [{
html: ''
}]
}]
})
app/view/MyForm
Ext.define('Test.view.MyForm', {
extend: 'Ext.form.Panel',
xtype: 'myForm',
width: 400,
height: 200,
items: [{
xtype: 'textfield',
name: 'mtfield',
fieldLabel: 'TextField'
}]
})

Inside the function handler function of the button, create object of the class related to it and call "show" method to add it viewport.
onButtonClickRenterId: function() {
/* place for form calling by button function */
var form = Ext.create('<class name defined in RenterData.js>');
form.show();
}

How to set properties based on an initial configuration?

I'd been searching for so long and I cannot find a concrete answer. Let's say I have an extended control from panel like this:
Ext.define('MyApp.view.admin.User',{
extend: 'Ext.panel.Panel',
config: {
canAdd: false,
canDelete: false,
canEdit: false
},
constructor: function(config){
this.initConfig(config);
this.callParent(arguments);
},
xtype: 'user',
requires: [
'MyApp.view.admin.UsersGrid',
'MyApp.view.admin.UserModel',
'MyApp.view.admin.UserController',
'MyApp.model.User'
],
viewModel: {
type: 'user'
},
controller: 'user',
frame: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'users-grid',
flex: 1
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Add',
glyph: MyApp.util.Glyphs.getGlyph('add'),
hidden: **[config.canAdd]**
listeners: {
click: 'onAdd'
}
},
{
xtype: 'button',
bind: {
disabled: '{!usersGrid.selection}'
},
text: 'Edit',
hidden: **[config.canEdit]**
hidden: this.setElementConfiguration,
glyph: Mofeg.util.Glyphs.getGlyph('edit'),
listeners: {
click: 'onEdit'
}
},
{
xtype: 'button',
bind: {
disabled: '{!usersGrid.selection}'
},
text: 'Eliminar',
glyph: MyApp.util.Glyphs.getGlyph('destroy'),
listeners: {
click: 'onDelete'
}
}
]
}
]});
I want to apply the hidden properties of the buttons based on the initial configurations, how can I accomplish it?

You can write an initComponent:
initComponent: function () {
var me = this,
editButton = Ext.ComponentQuery.query('button[itemId=edit]')[0],
canEdit = me.getCanEdit();
editButton.setHidden(canEdit);
me.callParent(arguments);
}

Default value in grid

I have a grid/list:
items: [
{
xtype: 'gridpanel',
reference: 'list',
resizable: false,
width: 200,
title: '',
forceFit: true,
bind: {
store: '{schedules}'
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'revision',
text: 'Revision'
}
],
I want to add a listener so that the record at index 0 in the store is selected by default.
I've tried playing with selModel but its not working as intended.

Do it on viewready event:
{
xtype: 'gridpanel',
listeners: {
'viewready': function(g) {
g.getSelectionModel().select(0);
}
},
// ....
}
Example: https://fiddle.sencha.com/#fiddle/qe6

Listen to the store load event (as example in the controller):
onLaunch: function () {
var me = this,
grid = me.getGrid(),
store = me.getGroupsStore();
store.load({
callback: function(records, operation, success) {
grid.getSelectionModel().select(0);
},
scope: this
});
},

Ext JS, item click listener does't seem to work

I have a grid panel which shows all my users from my database.
I want my grid items(rows) to be clickable, as something to happen when i click on them but it doesn't seem like the listener is ok.
Ext.define('PRJ.view.Home', {
extend: 'Ext.panel.Panel',
alias: 'widget.home',
title: 'Home',
layout: 'fit',
items: [
{
xtype: 'gridpanel',
store: 'Users',
title: 'Users grid',
columns: [
{text: 'Id', dataIndex: 'id' },
{text: 'Name', dataIndex: 'name', width : 200 }
]
}
]
});
Ext.define('PRJ.controller.Menu', {
extend: 'Ext.app.Controller',
refs: [
{
ref: 'centerPanel',
selector: '#center-panel'
}
],
stores: ["Users"
],
init: function() {
this.control({
'gridpanel': {
itemdblclick: this.editUser
}
});
},
editUser: function() {
alert('User double clicked');
},
});

This may just be as simple as changing itemdblclick to rowdblclick.
I have created a fiddle here showing a slightly different approach (by adding listeners in the config). Code below:
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
listeners: {
rowdblclick: function(grid, record, tr, rowIndex, e, eOpts) {
alert(record.get("name"));
}
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
You should also look at Selection Model and Row Editing.

You can use cell editing plugin to make cells editable on click.
Include something like this in your grid conf :
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
pluginId: 'cellEditor'
})
]

I found out what the problem was.
The answers I got were not helping, because I needed to keep the listener in the controller instead of moving it to the view.
The problem was that I needed to put the listener on home gridpanel like
init: function() {
this.control({
'home gridpanel': {
itemdblclick: this.editUser
}
});
},
Now it works like charm.

How can i use a button on a sencha tabbar to put an overlay panel

I am working with a sencha app and we have 3 tab panels but want to add an extra button to the tab bar that instead of sliding to a tab, just overlays a panel with buttons ontop of the first tabpanel. Eg if you are on the first tab and press the button then the overlay panel is displayed over top. If you are on the third tab panel it then takes you back to the first tabpanel and overlays the button panel.
I can display the button but can not get it to just overlay the tab panel with a panel with the buttons.
MainPanel:
Ext.define("MyApp.view.Main", {
extend: 'Ext.Panel',
requires: ['Ext.TitleBar', 'Ext.tab.Panel'],
config: {
fullscreen: true,
id: 'viewMain',
layout: 'vbox',
items: [
{
xtype: 'topbar'
},
{
xtype: 'tabpanel',
tabBarPosition: 'bottom',
flex: 1,
id: 'mainTabs',
cardSwitchAnimation: false,
animation: false,
ui: 'bottom',
items: [
{
xtype: 'mappanel',
id: 'mapPanel'
},
{
xtype: 'showbutton'
},
{
xtype: 'searchpanel'
},
{
xtype: 'directionspanel'
},
{
xtype: 'rcpanel'
}
]
}
]
}
});
ShowButton:
Ext.define("MyApp.view.ShowButton", {
extend: 'Ext.Button',
requires: ['Ext.Button'],
xtype: 'showbutton',
config: {
title: 'Show',
iconCls: 'locate4',
id: 'showBtn',
text: 'OK',
id: 'showBtn',
iconCls: 'locate4',
iconMask: true,
handler: function () {
this.fireEvent('onShowBar', this);
}
}
});
ShowController
Ext.define('MyApp.controller.ShowController', {
extend: 'MyApp.controller.BaseController',
config: {
refs: {
},
control: {
}
},
//called when the Application is launched, remove if not needed
launch: function(app) {
},
onShowBar: function () {
var newShowBar = {
xtype: 'showBar',
docked: 'bottom'
};
this.add([newShowBar]);
}
});
ShowBar:
Ext.define("MyApp.view.ShowBar", {
extend: 'Ext.Panel',
xtype: 'showbar',
config: {
iconCls: 'locate4',
docked: 'bottom',
modal: false,
style: 'opacity:0.8',
items: [
{
iconCls: 'home',
iconMask: true,
poiGroup: 'accomm'
},
{
iconCls: 'star',
iconMask: true,
poiGroup: 'attractions'
}/*,
{
iconCls: 'hotoffer',
iconMask: true,
poiGroup: 'membersavings'
}*/
]
}
});

I would suggest using a toolbar docked at the bottom of a container (layout: card) which contains your other views, instead of using the tabbar. If you add buttons to the toolbar and set animations for switching views, the toolbar behaves just like the tabbar. It also allows you to add an extra button which displays your overlay.