We Keep Coding

Hbox layout panel doesn't auto fit items after resize event

I've a resizable panel which includes another panel with hbox layout inside. Whole display settings are correct expect one behaviour; when resizing main panel with mouse after render; it's not auto-fit items inside.
To be success fit those item; need to resize main panel once again or refreshing main panel from tool config's gear. How can I set this mouse event resizing as auto-fit?
Here is a screenshot and both of panel's code snippets;
Main Panel:
Ext.define('MyApp.BasePanel', {
extend: 'Ext.panel.Panel',
xtype: 'basepanel',
resizable: true,
scrollable: true,
frame: true,
plugins: 'responsive',
tools: [
{
type: 'refresh',
handler: 'refreshPanel'
},
{
type: 'gear',
handler: 'setPanel'
}
],
initComponent: function() {
var me = this;
me.items = me.setupItems();
me.callParent();
},
setupItems: function() {
var me = this;
return Ext.Array.merge(me.getChildPanel(), me.getOtherChildPanel());
},
getChildPanel: function () {
return [];
},
getOtherChildPanel: function () {
return [];
},
Here is called child panel;
Ext.define('MyApp.ChildComponent', {
//Calling this class with 'getChildPanel()' method on BasePanel.
extend: 'Ext.container.Container',
alias: 'widget.mychildcomponent',
layout: {
type: 'hbox', align: 'stretch', pack: 'center'
},
defaults: {
margin: 10,
width: 300,
height: 90,
flex: 1
},
items: [
{

How can I set this mouse event resizing as auto-fit
You need to use flex config for ExtJS child items to automatically adjust.
Flex
Flex may be applied to child items of a box layout (Ext.layout.container.VBox or Ext.layout.container.HBox). Each child item with a flex property will fill space (horizontally in hbox, vertically in vbox) according to that item's relative flex value compared to the sum of all items with a flex value specified.
Any child items that have either a flex of 0 or undefined will not be 'flexed' (the initial size will not be changed).
In this Fiddle, I have created a demo using resizable panel.
Code snippet
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('CommonGrid', {
extend: 'Ext.grid.Panel',
xtype: 'commongrid',
title: 'Data',
store: {
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
},
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}]
});
Ext.create({
xtype: 'panel',
layout: 'vbox',
title: 'Demo',
bodyPadding: 10,
width: 500,
border: true,
resizable: true,
draggable: true,
tools: [{
type: 'refresh'
}, {
type: 'settings'
}],
renderTo: Ext.getBody(),
defaults: {
layout: 'hbox',
xtype: 'container',
width: '100%',
flex: 1,
defaults: {
xtype: 'button',
margin: '0 10',
flex: 1
}
},
items: [{
maxHeight:30,
items: [{
text: 'Button 1'
}, {
text: 'Button 2'
}, {
text: 'Button 3'
}]
},{
xtype:'tbspacer',
height:10,
maxHeight:10
}, {
items: [{
xtype: 'commongrid'
}, {
xtype: 'commongrid'
}]
}]
})
}
});

This happens because the default layout for all Containers is Auto Layout
Make BasePanel layout hbox or vbox and if you want it to be scrollable do not set align

What is the proper way to filtering ViewModel stores and implement to ExtJS Panel?

Through ViewModel stores I'm getting this JSON data;
{
"success": true,
"msg": "OK",
"count": 2,
"data": [
{
"firstname": "BLA",
"lastname": "BLALA",
"isactive": true,
...
},
{
"firstname": "BLAAA",
"lastname": "BLALAAA",
"isactive": false,
...
}
I have two grids on one panel and one of them will load data only with isactive: true field, other grid will load only with false. So where and how I need to filtering store to load specified data to grids?
Here is VM;
Ext.define('MyApp.view.ListingVM', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.listing',
requires: [...],
reference: 'loyaltyvm',
stores: {
// Should I define the filter on here?
bonusTrans: {
storeId: 'bonusTrans',
// reference: 'bonusTrans',
model: 'MyApp.model.BonusTrans',
autoLoad: true,
session: true,
pageSize: MyApp.Globals.LIST_PAGE_SIZE
}
}
});
This is panel's grid sample where defined both of Grids. I've tried several way to get store and filtering but couldn't be succes;
getColumns: function () {
var me = this;
var panelItems = [
{
xtype: 'container',
layout: {type: 'hbox', align: 'stretch', pack: 'start'},
items: [
xtype: 'bonustrans',
flex: 1,
title: 'Current Bonus',
getListCols: function () {
var me = this;
debugger;
// var activeStore = Ext.getStore('bonusTrans');
// var activeStore = me.viewModel.get('bonusTrans');
// var view = me.getView();
// var vm = view.getViewModel();
// var vm.getStore('bonusTrans')
// var activeStore = me.getViewModel().getStore('bonusTrans');
var activeStore = me.getViewModel('loyaltyvm').getStores('bonusTrans');
activeStore.filter('isactive', 'true');
var listCols = [
{
xtype: 'firstnamecol',
flex: 1
},
{
xtype: 'checkoutcol'
},
{
xtype: 'bonustotalcol'
}
];
return listCols;
}
//... other Grid is just defined below of this line and it should loads data only with 'isactive' field is false.

Use chained stores, fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
new Ext.container.Viewport({
layout: {
type: 'hbox',
align: 'stretch'
},
viewModel: {
stores: {
everything: {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json'
}
},
active: {
type: 'chained',
source: '{everything}',
filters: [{
property: 'active',
value: true
}]
},
inactive: {
type: 'chained',
source: '{everything}',
filters: [{
property: 'active',
value: false
}]
}
}
},
items: [{
flex: 1,
xtype: 'gridpanel',
title: 'Active',
bind: '{active}',
columns: [{
dataIndex: 'name'
}]
}, {
flex: 1,
xtype: 'gridpanel',
title: 'Inactive',
bind: '{inactive}',
columns: [{
dataIndex: 'name'
}]
}]
});
}
});

The way of chained stores is surely the best,
here you can see a working fiddle on classic
and here is the code:
Ext.application({
name: 'Fiddle',
launch: function () {
var storeAll = Ext.create('Ext.data.Store', {
storeId: 'storeAll',
fields: [{
name: 'firstname'
}, {
name: 'lastname'
}, {
name: 'active'
}],
data: [{
firstname: 'test1',
lastname: 'test1',
active: true
}, {
firstname: 'test2',
lastname: 'test2',
active: true
}, {
firstname: 'test3',
lastname: 'test3',
active: false
}]
}),
chainedStoreActive = Ext.create('Ext.data.ChainedStore', {
source: storeAll,
filters: [{
property: 'active',
value: true
}]
}),
chainedStoreNoActive = Ext.create('Ext.data.ChainedStore', {
source: storeAll,
filters: [{
property: 'active',
value: false
}]
});
Ext.create({
xtype: 'viewport',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'gridpanel',
title: 'grid ALL',
store: storeAll,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}, {
xtype: 'gridpanel',
title: 'grid active',
store: chainedStoreActive,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}, {
xtype: 'gridpanel',
title: 'grid inactive',
store: chainedStoreNoActive,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}],
renderTo: Ext.getBody()
});
}
});
The global or the "allelements" store, need to be a global store, the chained ones can be created in a viewmodel of a view.

ExtJS 5: disable form fields in hidden card

I have a form panel with a radiogroup, and depending on the radiogroup selection, it will show some other components. If a radiofield is not selected, then its items will be hidden, as they're not part of the active card.
Now, if I have allowblank: false set on a field (and it's empty) within the hidden card, my form is still considered invalid. Being hidden means the user would not like to use it, so it should not be considered as part of the form. Here's an example.
In the example, I have 2 forms... the top form is the one that I'm curious about... is there a way to get this working without having to bind to disabled? I tried looking at hideMode, but that wasn't what I was looking for.
Ideally, I wouldn't have to create a formula for each card that I add... that seems silly. I realize I could create a generic formula, but once again, that just seems extraneous. Another option could be ditching the card layout, and binding each card to hidden and disabled, but I'm creating more formulas. Is there some sort of property I'm missing?
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('MyController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
onValidityChange: function(form, isValid, eOpts) {
this.getViewModel().set('isFormValid', isValid);
}
});
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myview',
data: {
activeItem: {
myInput: 0
}
},
formulas: {
activeCardLayout: function(getter) {
var myInput = getter('activeItem.myInput');
console.log(myInput);
return parseInt(myInput);
}
}
});
Ext.define('MyForm', {
extend: 'Ext.form.Panel',
title: 'My Form',
controller: 'myview',
viewModel: {
type: 'myview'
},
layout: {
type: 'hbox'
},
listeners: {
validitychange: 'onValidityChange'
},
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
layout: {
type: 'hbox'
},
items: [{
xtype: 'button',
text: 'Save',
reference: 'saveButton',
disabled: true,
bind: {
disabled: '{!isFormValid}'
}
}]
}],
items: [{
xtype: 'radiogroup',
vertical: true,
columns: 1,
bind: {
value: '{activeItem}'
},
defaults: {
name: 'myInput'
},
items: [{
boxLabel: 'None',
inputValue: '0'
}, {
boxLabel: 'Something',
inputValue: '1'
}]
}, {
xtype: 'container',
layout: 'card',
flex: 1,
bind: {
activeItem: '{activeCardLayout}'
},
items: [{
xtype: 'container',
layout: 'fit'
}, {
xtype: 'container',
layout: 'fit',
items: [{
xtype: 'textfield',
fieldLabel: 'hello',
allowBlank: false
}]
}]
}]
});
Ext.define('MyViewModel2', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myview2',
data: {
activeItem: {
myInput: 0
}
},
formulas: {
disableSomethingCard: function(getter) {
return getter('activeItem.myInput') !== '1';
},
activeCardLayout: function(getter) {
var myInput = getter('activeItem.myInput');
console.log(myInput, 'here');
return parseInt(myInput);
}
}
});
Ext.define('MyForm2', {
extend: 'MyForm',
title: 'My Form 2 (works)',
viewModel: {
type: 'myview2'
},
items: [{
xtype: 'radiogroup',
vertical: true,
columns: 1,
bind: {
value: '{activeItem}'
},
defaults: {
name: 'myInput'
},
items: [{
boxLabel: 'None',
inputValue: '0'
}, {
boxLabel: 'Something',
inputValue: '1'
}]
}, {
xtype: 'container',
layout: 'card',
flex: 1,
bind: {
activeItem: '{activeCardLayout}'
},
items: [{
xtype: 'container',
layout: 'fit'
}, {
xtype: 'container',
layout: 'fit',
bind: {
disabled: '{disableSomethingCard}'
},
items: [{
xtype: 'textfield',
fieldLabel: 'hello',
allowBlank: false
}]
}]
}]
});
Ext.create('MyForm', {
renderTo: Ext.getBody()
});
Ext.create('MyForm2', {
renderTo: Ext.getBody()
});
}
});

fixed search bar with an accordion layout - EXT JS4

I need to have a fixed search bar at the top of my Menu Column. This is what I have so far:
Ext.define('Cam.view.menu.LeftSidebar', {
extend: 'Ext.panel.Panel',
alias: 'widget.leftsidebar',
views: 'Cam.view.menu.Search',
defaults: {
// applied to each contained panel
bodyStyle: 'padding:0px;'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: true,
animate: true,
activeOnTop: true
},
title: _SIDEBAR_LEFT_TITLE,
items: [
{
title: 'Menu Search',
items: [{xtype: 'menusearch'
}]
},
{
title: _SIDEBAR_LEFT_PREVIOUS,
xtype: 'menuhistory',
itemId: 'menuhistory'
},
{
title: 'Menu',
items: [{xtype: 'screenmenu'}]
}]
});
So far, it collapses the way I want it but
xtype:'menusearch' is what I want fixed at the top.
and
xtype:'menuhistory' to be active one.
Any help on this?

You could do something like this:
Ext.require('*');
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
width: 400,
height: 400,
renderTo: document.body,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Search'
}, {
flex: 1,
xtype: 'container',
layout: 'accordion',
items: [{
title: 'Item 1',
html: 'I1'
}, {
title: 'Item 2',
html: 'I2'
}, {
title: 'Item 3',
html: 'I3'
}]
}]
});
});

ExtJs 4 MVC Nested Layouts

I'm trying to implement a simple framework for an app. The idea is to create a background viewport type 'layout' with a north region containing the page header and an interchangeable center region.
When my app starts, a Login form is shown. If the user/password is ok, the form is destroyed and the main layout should appear. The main layout should insert a nested layout in its center region.
This is my background layout code:
Ext.define('DEMO.view.BackgroundLayout', {
extend: 'Ext.container.Viewport',
alias: 'widget.background',
requires: [
'DEMO.view.Main'
],
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>'
},
{
xtype: 'mainview',
region: 'center',
forceFit: false,
height: 400
}
]
});
me.callParent(arguments);
}
});
The main layout is this:
Ext.define('DEMO.view.Main', {
extend: 'Ext.container.Viewport',
alias: 'widget.mainview',
requires: [
'DEMO.view.MyGridPanel'
],
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
console.log('bb');
Ext.applyIf(me, {
items: [
{
xtype: 'mygridpanel',
region: 'center',
forceFit: false
},
{
xtype: 'container',
height: 38,
forceFit: false,
region: 'north',
items: [
{
xtype: 'button',
height: 34,
id: 'btnLogout',
action: 'logout',
text: 'Logout'
}
]
}
]
});
me.callParent(arguments);
}
});
As you can see, the center region needs an xtype named "mygridpanel". This is the code for it:
Ext.define('DEMO.view.ui.MyGridPanel', {
extend: 'Ext.grid.Panel',
border: '',
height: 106,
title: 'My Grid Panel',
store: 'MyJsonStore',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Id',
text: 'Id'
},
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Sales',
text: 'Sales'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
disabled: true,
id: 'btnDelete',
allowDepress: false,
text: 'Delete'
},
{
xtype: 'button',
disabled: true,
id: 'btnEdit',
allowDepress: false,
text: 'Edit'
}
]
}
]
});
me.callParent(arguments);
}
});
My problem is that when I call Ext.create('DEMO.view.BackgroundLayout', {}); it only shows the nested layout, and the background layout is hidden, also I get this error in Chrome's console:
Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
What I'm doing wrong?.
Thanks in advance,
Leonardo.