See this fiddle: https://fiddle.sencha.com/#view/editor&fiddle/36vh.
Even though the defaultFocus is set properly by referencing the component via #fldxyz, the component doesn't get the focus.
Ext.application({
name : 'myapp',
// autoCreateViewport is deprecated
mainView: 'myapp.MyPanel',
launch : function() {
}
});
Ext.define('myapp.MyPanel', {
extend: 'Ext.panel.Panel', // does not work
// extend: 'MyPanel', // works
layout: 'fit',
//defaultFocus: '[reference=fld]',
//defaultFocus: 'textfield:first',
defaultFocus: '#fldxyz',
items: [{
xtype: 'form',
layout: 'anchor',
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
value: 'Indigo',
id: 'fldxyz',
//reference: 'fld',
selectOnFocus: true
}, {
xtype: 'textfield',
fieldLabel: 'Last',
value: 'Montoya'
}]
}]
});
I tested it with 6.6.0 and 7.2.0.
What's wrong?
Thanks
In the doc of defaultFocus is following: Specifies a child Component to receive focus when this Container's method-focus method is called.
You are not calling the focus() method and it is not focused. I have added it in the 'afterrender' listener event.
Ext.application({
name : 'myapp',
mainView: 'myapp.MyPanel'
});
Ext.define('myapp.MyPanel', {
extend: 'Ext.panel.Panel',
title: "My Form Panel",
layout: 'fit',
defaultFocus: '#fldxyz',
items: [{
xtype: 'form',
layout: 'anchor',
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
value: 'Indigo',
id: 'fldxyz',
selectOnFocus: true
}, {
xtype: 'textfield',
fieldLabel: 'Last',
value: 'Montoya'
}]
}],
listeners: {
afterrender: function(formPanel) {
formPanel.focus();
}
}
});
Related
Not sure why I'm getting an empty viewport. I am defining subclasses as components and trying to get the viewport to display the 2 components created. Seems simple enough yet coming up empty?
Ext.define('MyApp.view.MyHeader', {
extend: 'Ext.Container',
items: [{
xtype: 'titlebar',
title: 'Logo',
titleAlign: 'left',
cls: 'im-titlebar',
dock: 'top',
id: 'titlebar',
items: [
{
xtype: 'button',
text: 'Log In',
align: 'right',
ui: 'action',
margin: '',
ariaRole: 'button',
cls: 'btn-im-login action noprint',
id: 'button_LogIn'
}
]
}]
});
Ext.define('MyApp.view.MyFooter', {
extend: 'Ext.Container',
items: [{
xtype: 'container',
items: [{
xtype: 'button',
text: 'Button',
align: 'right',
ui: 'action',
ariaRole: 'button',
cls: 'btn-im-login action noprint',
id: 'button_Button'
}]
}]
});
Ext.define('MyApp.view.MyView', {
extend: 'Ext.Container',
requires: ['MyApp.view.MyHeader', 'MyApp.view.MyFooter']
});
Ext.Loader.setConfig({
enabled: false
});
Ext.application({
name: 'MyApp',
launch: function () {
Ext.Viewport.add(Ext.create('MyApp.view.MyView'));
}
});
See fiddle
You're trying to require views, but you should add it to parent view by items array.
Ext.define('MyApp.view.MyHeader', {
extend: 'Ext.Container',
xtype: 'myheader',
items: [{
xtype: 'titlebar',
title: 'Logo'
}]
});
Ext.define('MyApp.view.MyFooter', {
extend: 'Ext.Container',
xtype: 'myfooter',
items: [{
xtype: 'container',
items: [{
xtype: 'button',
text: 'Button'
}]
}]
});
Ext.define('MyApp.view.MyView', {
extend: 'Ext.Container',
xtype: 'myView',
height: 100,
items: [{
xtype: 'myheader'
}, {
xtype: 'myfooter'
}]
});
Ext.application({
name: 'MyApp',
launch: function () {
Ext.Viewport.add({
xtype: 'myView'
});
}
});
Remember - classic toolkit does not have Ext.Viewport class.
Ext.application({
name : 'MyApp',
launch : function() {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
bodyPadding: 20,
tbar: {
items: [{
xtype: 'label',
text: 'Header'
}]
},
bbar: {
items: [{
xtype: 'label',
text: 'footer'
}]
},
items: [{
xtype: 'form',
title: 'My Form',
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'someField'
}]
}]
});
}
});
Your code does what you have defined.
You need to add the Header and Footer components as items.
I would suggest that you may try to to use a panel and / or use tbar, bbar or header configs available there.
docs:
https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html
https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg-dockedItems
https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg-header
https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg-bbar
Ext.application({
name: 'MyApp',
launch: function () {
var f = Ext.create('MyApp.view.MyHeader', {
flex: 1
});
var h = Ext.create('MyApp.view.MyFooter', {
flex: 1
});
Ext.Viewport.add(Ext.create('MyApp.view.MyView', {
layout: {
type: 'vbox',
align: 'stretch'
},
items: [h, f]
}));
}
});
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 have a form within a form. I need to bind the hidden property of a field in the outer form to the checked state of a field in the inner form. I assume I can do this with binding by setting up a custom getter/setter but not exactly sure... here's the idea:
Sencha fiddle
You can do something like this:
Ext.define('Test.InnerForm', {
extend: 'Ext.form.Panel',
xtype: 'innerform',
defaultListenerScope: true,
config: {
isFoo: false
},
twoWayBindable: {
isFoo: true
},
publishes: ['isFoo'],
items:[{
xtype: 'checkbox',
fieldLabel:'cb',
listeners: {
change: 'onCheckChange'
}
}],
onCheckChange: function(box, checked) {
this.setIsFoo(checked);
}
});
Ext.define('Test.OuterForm', {
extend: 'Ext.form.Panel',
xtype: 'outerform',
viewModel: true,
items:[{
xtype:'innerform',
reference: 'innerform'
},{
xtype: 'textfield',
fieldLabel: 'want to hide this when cb is checked',
bind: {
hidden: '{innerform.isFoo}'
}
}]
});
Ext.create('Test.OuterForm', {
title: 'Outer form',
width: 500,
height: 500,
bodyPadding: 10,
renderTo: Ext.getBody()
});
I try to understand the basics of the extjs MVC.
I created the example app with the Sencha CMD. This comes with some basic things. What i try to make is a panel with a toolbar where i have a menu. When i click on a item in the menu i want to load a grid into the panel.
What function do i need to do this?
This is my mainmodel
Ext.define('JustRent.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'JustRent.view.main.MainController',
'JustRent.view.main.MainModel',
'JustRent.view.main.ProductenType'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
region: 'center',
id: 'contentBlock',
xtype: 'panel',
layout: 'fit',
title: 'JustRental',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Menu',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'verhuur',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Offertes',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Overzicht'
},{
xtype: 'menuitem',
text: 'Nieuwe offerte'
},{
xtype: 'menuitem',
text: 'Openstaande offertes'
},{
xtype: 'menuitem',
text: 'Geannuleerde offertes'
}]
}
}, {
xtype: 'menuitem',
text: 'Projecten',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Overzicht'
}]
}
}, {
xtype: 'menuitem',
text: 'Producten',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Overzicht'
},{
xtype: 'menuitem',
text: 'Artikelen'
},{
xtype: 'menuitem',
text: 'Groepen'
},{
xtype: 'menuitem',
text: 'Type',
handler: 'onClickButton',
},{
xtype: 'menuitem',
text: 'Soort'
},{
xtype: 'menuitem',
text: 'Merk'
}]
}
}, {
xtype: 'menuitem',
text: 'Klanten'
}]
}
},
{
xtype: 'menuitem',
text: 'verkoop'
}
]
}
}]
}]
}
]
});
when i click on an item i use a basic handler. This is located in my mainController file:
Ext.define('JustRent.view.main.MainController', {
extend: 'Ext.app.ViewController',
requires: [
],
alias: 'controller.main',
onClickButton: function () {
console.log('click works');
}
});
this is my ProductenType
Ext.define('JustRent.view.main.ProductenType', {
extend: 'Ext.grid.Panel',
alias: 'widget.ProductenType',
requires: [
// alerts
],
xtype: 'gridpanel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
]
});
but now is my question how can i load the JustRent.view.main.ProductenType into the panel with the id 'contenBlock'.
I would use a Viewport as my main container
http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport
with a border layout http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.layout.container.Border
and then use add http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport-method-add
and remove methods http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport-method-remove
for component manipulation within the Viewport
pro tip: avoid unnecessary over nesting of components, use the lighter Component possible in each case. e.g containers are lighter in the DOM compared to panels so if you only need a container don't use a panel (not saying this is the case) .
Also I recommend Extjs in Action, awesome book that will help you really understand the framework.
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.