Related
I have a combo box that I need to get access to the store in code so that I can apply a filter to it. Here is the definition of the combo.
//ItemGeneralPanel.js
Ext.define('myCompany.view.item.ItemGeneralPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.myApp.ItemGeneralPanel',
layout: 'vbox',
bodyPadding: 4,
defaults: { width: 800 },
items: [
{
xtype: 'combobox',
fieldLabel: 'Replenishment Source',
displayField: 'name',
valueField: 'id',
queryMode: 'local',
forceSelection: true,
bind: { value: '{item.sourceId}', store: '{replenishmentSourceList}' }
},
]
});
My ItemController has this in it:
//ItemController.js
stores: [
'item.ItemList',
'item.ReplenishmentSourceList'
],
And my store looks like this:
//ReplenishmentSourceList.js
Ext.define('myCompany.store.item.ReplenishmentSourceList', {
extend: 'Ext.data.Store',
model: 'myCompany.model.Source',
sorters: 'name'
});
And the model just has a list of fields(Source.js):
How do I reference this combo box in my controller so that I can get a reference to its store and then apply a filter to the results coming back. Something like this:
//ItemEditViewController.js
myFunction: function (facilId) {
this.lookup('replenishmentSourceList').getStore().load({
scope: this,
callback: function (records, operation, success) {
if (!success) {
Ext.log({ level: 'error', msg: 'Error loading facility list', dump: operation });
var text = (operation.getError() ? operation.getError().response.responseText : operation.getResponse().responseText);
var msg = Ext.decode(text).message;
Ext.Msg.show({ title: 'Error', msg: 'Error loading Source data.<br>' + msg, buttons: Ext.Msg.OK, icon: Ext.Msg.ERROR });
}
else {
this.lookup('replenishmentSourceList').getStore().setFilters({
property: 'facilityId',
operator: '==',
value: 'facilId'
});
This isn't working, so I figured if I could get the combobox, I could do something like:
myRefToComboBox.getStore()....
Any ideas?
If you want to get the store directly then you can simply use storeId and perform a lookup on created stores Ext.data.StoreManager.lookup('myStore') which will return the store instance. Refer docs for Ext.data.StoreManager.
Below is a sample which you can try out in fiddle (Check console as it prints the store instance using store manager):
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('myCompany.store.item.ReplenishmentSourceList', {
alias: 'store.replenishmentSourceList',
extend: 'Ext.data.Store',
sorters: 'name'
});
Ext.define('myCompany.view.item.ItemGeneralPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.myApp.ItemGeneralPanel',
layout: 'vbox',
bodyPadding: 4,
defaults: {
width: 800
},
items: [{
xtype: 'combobox',
fieldLabel: 'Replenishment Source',
displayField: 'name',
valueField: 'id',
queryMode: 'local',
forceSelection: true,
store: {
type: 'replenishmentSourceList',
storeId: 'myStore'
}
}, ]
});
Ext.create({
xtype: 'myApp.ItemGeneralPanel',
renderTo: Ext.getBody()
});
console.log(Ext.data.StoreManager.lookup('myStore'));
}
});
Edit
The above is one way to get the store, another way is to get the combobox or the panel view from controller using getView() and then get the store.
Below is the code with controller (check the console):
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('MyApp.UserController', {
alias: 'controller.user',
extend: 'Ext.app.ViewController',
myFunction: function (facilId) {
console.log(this.getView())
console.log(this.getView().down('#replenishmentCombo').getStore());
}
});
Ext.define('myCompany.store.item.ReplenishmentSourceList', {
alias: 'store.replenishmentSourceList',
extend: 'Ext.data.Store',
sorters: 'name'
});
Ext.define('myCompany.view.item.ItemGeneralPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.myApp.ItemGeneralPanel',
controller: 'user',
layout: 'vbox',
bodyPadding: 4,
defaults: {
width: 800
},
listeners: {
boxready: 'myFunction'
},
items: [{
xtype: 'combobox',
itemId: 'replenishmentCombo',
fieldLabel: 'Replenishment Source',
displayField: 'name',
valueField: 'id',
queryMode: 'local',
forceSelection: true,
store: {
type: 'replenishmentSourceList',
storeId: 'myStore'
}
}, ]
});
Ext.create({
xtype: 'myApp.ItemGeneralPanel',
renderTo: Ext.getBody()
});
// console.log(Ext.data.StoreManager.lookup('myStore'));
}
});
I would like to have a "welcome text" before the directory tree in my Ext.tree.Panel, so something like that:
I wrote this code, but it doesn't work:
Ext.define('MyProject.view.permissions.Example', {
extend: 'Ext.tree.Panel',
requires: [
'MyProject.view.permissions.ExampleController'
],
controller: 'example',
xtype: 'exampleWindow',
store: 'examplePermissionTree',
rootVisible: false,
rowLines: false,
//headerPosition: 'left',
lines: false,
autoLoad: false,
autoExpand: false,
items :[{
xtype: 'displayfield',
fieldLabel: 'welcome text',
name: 'welcome',
}],
columns: {
items: [ {
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1
}, {
xtype: 'booleancolumn',
flex: 0.3,
dataIndex: 'granted',
trueText: Strings.permissionGranted,
falseText: Strings.permissionNotGranted
}, {
xtype: 'widgetcolumn',
flex: 0.2,
widget: {
xtype: 'button',
handler: 'onGroupClick',
text: Strings.permissionGrant
}
}
]
}
});
My problem is that the text doesn't appear. It appears only the directory tree.
How Could I fix it? Should I use another approach?
1. Use Tools instead of items
Using tools instead of items can solve the problem. An array of Ext.panel.Tool configs/instances to be added to the header tool area. The code should be like
tools :[{
xtype: 'displayfield',
fieldLabel: 'welcome text',
name: 'welcome',
}],
2. Use label in lieu of displayfield
tools :[{
xtype: 'label',
fieldLabel: 'welcome text',
name: 'welcome',
}],
In the record editing window, I need to use the tree selector, for this, the file Ext.ux.TreePicker is included in the app.js file, which is located in the app folder on the same level as the app.js file.
Ext.Loader.setConfig({enabled:true});
Ext.Loader.setPath('Ext.ux', 'app');
Ext.application({
extend: 'Ext.app.Application',
name: 'App',
appFolder: 'app',
requires: ['Ext.ux.TreePicker'],
...
In the record editing window, set the xtype: 'treepicker' field:
Ext.define('App.view.OperationEdit', {
extend: 'Ext.window.Window',
xtype: 'operation-edit',
alias: 'widget.operationedit',
controller: 'operation_controller',
viewModel: {
type: 'operation_model'
},
defaults: {
xtype: 'textfield',
margin: 10,
labelAlign: 'top'
},
closable: true,
items: [{
xtype: 'form',
items: [
{
xtype: 'treepicker',
store: Ext.data.StoreManager.get('StorageStore'),
fieldLabel: "Mesto_hraneniya",
valueField: 'id',
displayField: 'text',
selectChildren: true,
canSelectFolders: true,
name: 'mesto_hraneniya'
},
......
When I open the edit window, I get an error:
TypeError: p is undefined
Example link Fiddle
Why does an error appear? How to display the treepicker field correctly?
thank
The problem in your code, at least in your fiddle is that you defined the "edit form" as fully json, which will be parsed and executed on load time. Since, there is no StorageStore at load time, store parameter of treepicker will be null and that is the reason you get an error. Proper way would be to set form items on object instantiaton as follows, and the working fiddle is here.
Ext.define('App.view.TestEdit', {
extend: 'Ext.window.Window',
xtype: 'test-edit',
alias: 'widget.testedit',
requires: ['App.store.StorageStore'],
controller: 'app_view_testgrid',
defaults: {
xtype: 'textfield',
margin: 10,
labelAlign: 'top'
},
closable: true,
items: [],
initConfig: function(config){
config = config || {};
config.items = [
{
xtype: 'form',
items: [{
xtype: 'combobox',
store: {
type: 'type-store'
},
fieldLabel: 'Type',
displayField: 'name',
valueField: 'id',
name: 'id_type',
reference: 'mycombo',
}, {
xtype: 'textfield',
fieldLabel: 'My field',
name: 'mytextfield'
}, {
xtype: 'treepicker',
store: Ext.data.StoreManager.get("StorageStore"),
fieldLabel: "Mesto_hraneniya",
valueField: 'id',
displayField: 'text',
selectChildren: true,
canSelectFolders: true,
name: 'mesto_hraneniya'
}, {
xtype: 'button',
minWidth: 70,
text: 'Save',
listeners: {
click: 'saveRecord'
}
}]
}
];
this.callParent(arguments);
}
});
I have an app that uses a Tab layout with the same grid panel shared as an xtype widget between each form panel bound to each tab.
My Main tab layout is as follows:
Ext.define('cardioCatalogQT.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main-view',
controller: 'main-view',
requires: [
'cardioCatalogQT.view.main.MainController',
'cardioCatalogQT.view.main.MainModel',
'Ext.ux.form.ItemSelector',
'Ext.tip.QuickTipManager',
'Ext.layout.container.Card'
],
style: 'background-color:#dfe8f5;',
width: '100%',
height: 400,
layout: 'vbox',
defaults: {
bodyPadding: 5
},
items: [{
title:'Main',
region: 'south',
xtype: 'form',
itemId: 'Ajax',
flex: 1,
styleHtmlContent: true,
items:[{
xtype: 'image',
src: 'resources/images/R3D3.png',
height: 50,
width: 280
},{
title: 'Ad Hoc Sandbox for Cohort Discovery'
}] ,
lbar:[{
text: 'Initiate advanced request',
xtype: 'button',
handler: function(button){
var url = 'https://url_here';
//cardioCatalogQT.service.UtilityService.http_auth(button);
window.open(url);
}
}]
},
/*{
xtype: 'resultsGrid'
//disabled: true
},*/
/*{
xtype: 'searchGrid'
//disabled: true
},*/
{
xtype: 'demographicGrid'
//disabled: true
},
{
xtype: 'vitalGrid'
//disabled: true
},
{
xtype: 'labGrid'
//disabled: true
},
{
xtype: 'diagnosisGrid'
//disabled: true
},
{
xtype: 'medicationGrid'
//disabled: true
},
{
xtype: 'procedureGrid'
//disabled: true
},
{
xtype: 'queryGrid'
//disabled: true
}
]
});
The individual tabs that share the same grid widget (specifically, demographicGrid, vitalGrid, labGrid, diagnosisGrid, procedureGrid and medicationGrid, each referenced by xtype in the main view) look like:
/**
* Widget with template to render to Main view
*/
Ext.define('cardioCatalogQT.view.grid.DemographicGrid', {
extend: 'Ext.form.Panel',
alias: 'widget.demographicGrid',
itemId: 'demographicGrid',
store: 'Payload',
requires: [
'cardioCatalogQT.view.main.MainController'
],
config: {
variableHeights: false,
title: 'Demographics',
xtype: 'form',
width: 200,
bodyPadding: 10,
defaults: {
anchor: '100%',
labelWidth: 100
},
// inline buttons
dockedItems: [ {
xtype: 'toolbar',
height: 100,
items: [{
xtype: 'button',
text: 'Constrain sex',
itemId: 'showSex',
hidden: false,
listeners: {
click: function (button) {
button.up('grid').down('#sexValue').show();
button.up('grid').down('#hideSex').show();
button.up('grid').down('#showSex').hide();
}
}
}, {
xtype: 'button',
text: 'Hide sex constraint',
itemId: 'hideSex',
hidden: true,
listeners: {
click: function (button) {
button.up('grid').down('#sexValue').hide();
button.up('grid').down('#sexValue').setValue('');
button.up('grid').down('#hideSex').hide();
button.up('grid').down('#showSex').show();
}
}
},{ // Sex
xtype: 'combo',
itemId: 'sexValue',
queryMode: 'local',
editable: false,
value: 'eq',
triggerAction: 'all',
forceSelection: true,
fieldLabel: 'Select sex',
displayField: 'name',
valueField: 'value',
hidden: true,
store: {
fields: ['name', 'value'],
data: [
{name: 'female', value: 'f'},
{name: 'male', value: 'm'}
]
}
}, {
xtype: 'button',
text: 'Constrain age',
itemId: 'showAge',
hidden: false,
listeners: {
click: function (button) {
button.up('grid').down('#ageComparator').show();
button.up('grid').down('#ageValue').show();
button.up('grid').down('#hideAge').show();
button.up('grid').down('#showAge').hide();
}
}
}, {
xtype: 'button',
text: 'Hide age',
itemId: 'hideAge',
hidden: true,
listeners: {
click: function (button) {
button.up('grid').down('#ageComparator').hide();
button.up('grid').down('#ageValue').hide();
button.up('grid').down('#upperAgeValue').hide();
button.up('grid').down('#ageComparator').setValue('');
button.up('grid').down('#ageValue').setValue('');
button.up('grid').down('#upperAgeValue').setValue('');
button.up('grid').down('#hideAge').hide();
button.up('grid').down('#showAge').show();
}
}
}, { // Age
xtype: 'combo',
itemId: 'ageComparator',
queryMode: 'local',
editable: false,
value: '',
triggerAction: 'all',
forceSelection: true,
fieldLabel: 'Select age that is',
displayField: 'name',
valueField: 'value',
hidden: true,
store: {
fields: ['name', 'value'],
data: [
{name: '=', value: 'eq'},
{name: '<', value: 'lt'},
{name: '<=', value: 'le'},
{name: '>', value: 'gt'},
{name: '>=', value: 'ge'},
{name: 'between', value: 'bt'}
]
},
listeners: {
change: function(combo, value) {
// use component query to toggle the hidden state of upper value
if (value === 'bt') {
combo.up('grid').down('#upperAgeValue').show();
} else {
combo.up('grid').down('#upperAgeValue').hide();
}
}
}
},{
xtype: 'numberfield',
itemId: 'ageValue',
fieldLabel: 'value of',
value: '',
hidden: true
},{
xtype: 'numberfield',
itemId: 'upperAgeValue',
fieldLabel: 'and',
hidden: true
},{
xtype: 'button',
text: 'Constrain race/ethnicity',
itemId: 'showRace',
hidden: false,
listeners: {
click: function (button) {
button.up('grid').down('#raceValue').show();
button.up('grid').down('#hideRace').show();
button.up('grid').down('#showRace').hide();
}
}
}, {
xtype: 'button',
text: 'Hide race/ethnicity constraint',
itemId: 'hideRace',
hidden: true,
listeners: {
click: function (button) {
button.up('grid').down('#raceValue').hide();
button.up('grid').down('#raceValue').setValue('');
button.up('grid').down('#hideRace').hide();
button.up('grid').down('#showRace').show();
}
}
},{ // Race
xtype: 'combo',
itemId: 'raceValue',
queryMode: 'local',
editable: false,
value: 'eq',
triggerAction: 'all',
forceSelection: true,
fieldLabel: 'Select race',
displayField: 'name',
valueField: 'value',
hidden: true,
store: {
fields: ['name', 'value'],
data: [
{name: 'female', value: 'f'},
{name: 'male', value: 'm'}
]
}
},{
//minWidth: 80,
text: 'Add to search',
xtype: 'button',
itemId: 'searchClick',
handler: 'onSubmitDemographics'
}]
},
{
xtype:'searchGrid'
}
]
}
});
The only difference between each of the form panels in the tabs are the item components. Each of these form panels references an xtype of 'searchGrid' and renders it like in the attached image:
The problem is that I have 6-instances of this same grid. This works for the most part, but it is causing some issues related to getting control of the checkboxes in my grid along with some bizarre grid store load behaviors, and honestly, keeping track of components using this anti-pattern is a PITA.
I would like to somehow have a single instance of my searchGrid in a lower vertical panel, while an upper vertical panel has the item components I need to change according to the requirements for each tab. An example of how the item controls vary is
My desired behavior is that when I click on a tab, the upper item components would take me to a different form panel, while the lower panel stay fixed on the search grid.
However, I currently have the searchGrid bound to each tab's form panel, since that is the only way I could get this to work.
The searchGrid grid panel looks like:
Ext.define('cardioCatalogQT.view.grid.Search', {
extend: 'Ext.grid.Panel',
xtype: 'framing-buttons',
store: 'Payload',
itemId: 'searchGrid',
requires: [
'cardioCatalogQT.view.main.MainController'
],
columns: [
{text: "ID", width: 50, sortable: true, dataIndex: 'id'},
{text: "Type", width: 120, sortable: true, dataIndex: 'type'},
{text: "Key", flex: 1, sortable: true, dataIndex: 'key'},
{text: "Criteria", flex: 1, sortable: true, dataIndex: 'criteria'},
{text: "DateOperator", flex: 1, sortable: true, dataIndex: 'dateComparatorSymbol'},
{text: "When", flex: 1, sortable: true, dataIndex: 'dateValue'},
{text: "Count", flex: 1, sortable: true, dataIndex: 'n'}
],
columnLines: true,
selModel: {
type: 'checkboxmodel',
listeners: {
selectionchange: 'onSelectionChange'
}
},
// When true, this view acts as the default listener scope for listeners declared within it.
// For example the selectionModel's selectionchange listener resolves to this.
defaultListenerScope: false,
// This view acts as a reference holder for all components below it which have a reference config
// For example the onSelectionChange listener accesses a button using its reference
//referenceHolder: true,
// inline buttons
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
layout: {
pack: 'center'
}
}, {
xtype: 'toolbar',
items: [{
//reference: 'andButton',
text: 'AND',
itemId: 'andButton',
tooltip: 'Add the selected criteria as AND',
iconCls: 'and',
disabled: true,
handler: 'onCriterionAnd'
},'-',{
//reference: 'orButton',
text: 'OR',
itemId: 'orButton',
tooltip: 'Add the selected criteria as OR',
iconCls: 'or',
disabled: true,
handler: 'onCriterionOr'
},'-',{
//reference: 'notButton',
text: 'NOT',
itemId: 'notButton',
tooltip: 'Add the selected criteria as NOT',
iconCls: 'not',
disabled: true,
handler: 'onCriterionNot'
},'-',{
//reference: 'removeButton', // The referenceHolder can access this button by this name
text: 'Remove',
itemId: 'removeButton',
tooltip: 'Remove the selected item',
iconCls: 'remove',
disabled: true,
handler: 'onCriterionRemove'
},'-', { // SaveQuery
//reference: 'SaveQuery',
text: 'Save',
itemId: 'saveQuery',
tooltip: 'save the current filter',
iconCls: 'save',
disabled: true,
handler: 'onFilterSave'
}]
}],
height: 1000,
frame: true,
iconCls: 'icon-grid',
alias: 'widget.searchGrid',
title: 'Search',
initComponent: function() {
this.width = 750;
this.callParent();
}
});
I messed around with using a Vbox layout to get my desired behavior, but was rather unsuccessful. This does not seem like that uncommon of a use case to have an upper Vbox panel change to different form panels based on a Tab click, while the lower Vbox panel remains fixed. Any insight would be most welcome.
If I understand correctly, this small test of mine should do exactly what you want, using a border layout with regions north and center.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="ext-theme-gray.css">
<title>Test app</title>
<script type="text/javascript" src="ext-all-dev.js"></script>
<script>
Ext.onReady(function() {
var Viewport = Ext.create('Ext.container.Viewport',{
layout:'border',
items:[{
xtype:'tabpanel',
region:'north',
items:[{
xtype:'panel',
title:'A',
items:[{xtype:'button',text:'Clickme'}]
},{
xtype:'panel',
title:'B',
items:[{xtype:'textfield'}]
}]
},{
xtype:'gridpanel',
title:'center',
region:'center',
columns:[{
dataIndex:'A',
text:'A'
},{
dataIndex:'B',
text:'B'
}]
}]
})
Ext.create('Ext.app.Application',{
name:'TestApp',
autoCreateViewport: true,
views:[
Viewport
]
});
});
</script>
</head>
<body>
</body>
</html>
PS: I used ExtJS 4.2.2, but it should work in other Ext versions as well.
I'm trying to make a view with multiple formpanels (5) each with a fieldset inside however from what I've read, a view can only contain 1 formpanel, when i set 5 only the first one is shown.
Initially I was using a view with multiple fieldsets and got the look I wanted, however, this solution doesn't allow me to set store records to these fieldsets so i could manage multiple records in the same view so I had to try making these fieldsets have a parent formpanel and thus my problem started.
MyConfigView.js:
Ext.define('MyApp.view.MyConfigView',{
extend: 'Ext.Panel',
alias: 'widget.configview',
config:{
layout: {
type: 'card',
animation:{
type: 'slide',
direction: 'left',
duration: 8000
}
},
items:[
{
docked: 'top',
xtype: 'toolbar',
ui: 'light',
title: 'Yadayada',
itemId: 'toolbarMyConfigView',
items: [{
xtype: 'button',
ui: 'back',
text: 'Voltar',
action: 'voltarConfigView',
itemId: 'toolbarMyConfigViewVoltarBt'
}
]
},
{
xtype: 'formpanel',
items:[
{
xtype: 'fieldset',
title: 'Yada',
id: 'fieldSetAssalto',
model: 'Socorro.model.MyModel',
cls: 'x-floating',
items:[
{
xtype: 'textfield',
name: 'numeroTelefone',
label: 'Yada'
},
{
xtype: 'textfield',
name: 'mensagem',
label: 'Yada'
}
]
}
]
},
{
xtype: 'formpanel',
items:[
{
xtype: 'fieldset',
title: 'YADA',
itemId: 'fieldSetIncendio',
model: 'Socorro.model.MyModel',
cls: 'x-floating',
items:[
{
xtype: 'textfield',
name: 'numeroTelefone',
label: 'yadada'
},
{
xtype: 'textfield',
name: 'mensagem',
label: 'yaaada'
}
]
}
]
},
{
xtype: 'formpanel',
items:[
{
xtype: 'fieldset',
title: 'YADADA',
itemId: 'fieldSetSequestro',
model: 'Socorro.model.MyModel',
cls: 'x-floating',
items:[
{
xtype: 'textfield',
name: 'numeroTelefone',
label: 'Yadaaa'
},
{
xtype: 'textfield',
name: 'mensagem',
label: 'yadada'
}
]
}
]
},
{
xtype: 'formpanel',
items:[
{
xtype: 'fieldset',
title: 'YADA',
itemId: 'fieldSetEmedico',
model: 'Socorro.model.MyModel',
cls: 'x-floating',
items:[
{
xtype: 'textfield',
name: 'numeroTelefone',
label: 'YADAA'
},
{
xtype: 'textfield',
name: 'mensagem',
label: 'Yada'
}
]
}
]
},
{
xtype: 'formpanel',
items:[
{
xtype: 'fieldset',
title: 'Yada',
itemId: 'fieldSetAcidente',
model: 'Socorro.model.MyModel',
cls: 'x-floating',
items:[
{
xtype: 'textfield',
name: 'numeroTelefone',
label: 'Yada'
},
{
xtype: 'textfield',
name: 'mensagem',
label: 'Yada'
}
]
}
]
}
]
}
});
Any ideas on how can i get a view with multiple formpanels to work using Sencha Touch 2?
That is because your MyApp.view.MyConfigView view has a "card" layout applied, and this kind of layout allow you to display only a single sub view as active.
To display them all in the same view, I suggest you to set your view configuration as follows:
Ext.define('MyApp.view.MyConfigView',{
extend: 'Ext.Container',
alias: 'widget.configview',
config:{
layout: {
type: 'vbox',
align: 'stretch'
}
defaults: {
flex: 1
},
items: [
...
]
}
});
In this way you will dispose the formpanels vertically in your view, giving them the same height.
PS: Remove the 'x-floating' class from them.
However, if you want to use a Card layout (which seems to be the best solution), I suggest you to give all your formpanels a different "itemId" config param.
xtype: 'formpanel',
itemId: 'assalto',
items: [
...
]
and then, using the ST MVC architecture, get these forms one by one, and calling the function.
.setRecord(<YOUR_RECORD>);
Read more on ST Controllers on Sencha's docs.
http://docs.sencha.com/touch/2-1/#!/guide/controllers