I have created a view like this
Ext.define('Project.view.Test', {
extend: 'Ext.form.Panel',
controller: 'testController',
requires: [
'Ext.button.Button',
],
trackResetOnLoad: true,
items: [{
xype: 'button',
text: 'testbutton',
reference: 'testbutton',
itemId: 'testbutton'
}]
});
this.lookupReference('testbutton') in init() of ViewController is returning null.
But this.getView().getComponent('testbutton') is returning the button.
What am I doing wrong here ?
Related
I'm trying to add a combobox to a floating (popup) form panel in ExtJS. But I'm getting a "Cannot set property 'component' of null" error and the window will not load.
I use the following code in a controller to create the window:
onTreeAddDocClick: function () {
var f = new Ext.form.Panel({
frame: false,
header: false,
floating: true,
closable: true,
items: [{
xtype: 'addDoc'
}]
});
f.show();
}
The code for the window itself is as follows:
Ext.define('OPENhrm.view.dossier.widget.popup.AddDoc', {
extend: 'Ext.form.Panel',
xtype: 'addDoc',
requires: [
'Ext.layout.container.VBox'
],
controller: "dossier-addDoc",
viewModel: {
type: "dossier-addDoc"
},
id: 'addDocForm',
frame: true,
title: 'Add document',
width: 400,
bodyPadding: '10 10 0',
layout: 'form',
closable: true,
defaults: {
anchor: '100%',
allowBlank: false,
msgTarget: 'side',
labelWidth: 50
},
items: [{
// item selector
xtype: 'filefield',
emptyText: 'Select Document',
fieldLabel: 'Document',
name: 'filePath',
id: 'filePath',
buttonText: 'upload document',
buttonConfig: {
icon : '/resources/images/icons/add.jpg'
}
}, {
xtype: 'combo',
fieldLabel: 'Test',
hiddenName: 'test',
store: new Ext.data.SimpleStore({
data: [
['Test1'],
['Test2']
],
id: 0,
fields: ['text']
}),
valueField: 'text',
displayField: 'text',
triggerAction: 'all',
editable: false
}],
// buttons
buttons: [{
text: 'Add',
handler: 'onAddDockClick'
}, {
text: 'Reset',
handler: function () {
this.up('form').getForm().reset();
}
}]
});
If I remove the combobox, the window works just fine. If I place the combobox in a form somewhere else in my application (e.g. on a page with 2 panels; a searchfilter/form and a grid with search results), it works just fine. That other page however, is not a floating/popup window.
I got it to work by defining the whole page in the controller, but as I'm using a MVC structure, that doesn't seem like the way to go. Does anyone know how to get the combobox to work in a floating window, without putting the whole code for that window in the controller?
I'm trying to bind store to combobox editor in grid. My view is subclass of grid with cellediting plugin. I'm trying to bind at least static store with yes/no option. I tried many options and nothing worked.
Grid class:
Ext.define('App.view.school.room.RoomGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.school-room-grid',
controller: 'school-room-grid',
requires: [
'App.view.school.room.RoomGridController',
'App.view.school.room.RoomGridViewModel',
'Ext.button.Button',
'Ext.grid.plugin.CellEditing',
'Ext.grid.Panel',
'Ext.picker.Color',
'Ext.toolbar.Paging',
'Ext.toolbar.Toolbar'
],
reference: 'roomGrid',
viewModel: {
type: 'room'
},
bind: {
store: '{rooms}',
title: '{currentRoom.name}'
},
border: false,
itemId: 'testGrid',
glyph: 0xf0ce,
forceFit: true,
plugins: [
{
ptype: 'cellediting',
pluginId: 'editing'
}
],
header: {
title: 'Title',
padding: '4 9 4 9'
},
columns: [
//...
{
xtype: 'gridcolumn',
dataIndex: 'general',
text: 'SomeColumnYesNo',
editor:{
xtype: 'combobox',
bind: {
value:'{currentRoom.general}',
store:'{yesnoCombo}' //not working
},
displayField : 'name',
valueField : 'id',
selectOnFocus: true
}
}
],
buttons: [
{
itemId: 'addButton',
xtype: 'button',
width: 70,
scale: 'small',
text: 'Dodaj',
glyph: 0xf067
},
{
itemId: 'printButton',
xtype: 'button',
width: 70,
scale: 'small',
text: 'Drukuj',
glyph: 0xf02f
},
{
xtype: 'tbfill'
},
{
itemId: 'rejectButton',
xtype: 'button',
width: 22,
scale: 'small',
text: 'Anuluj',
glyph: 0xf021,
bind: {
disabled: '{!storeDirty}'
}
},
{
itemId: 'saveButton',
xtype: 'button',
width: 22,
scale: 'small',
text: 'Zapisz',
glyph: 0xf00c,
bind: {
disabled: '{!storeDirty}'
}
}
],
initComponent: function () {
me.callParent(arguments);
},
});
ViewModel class:
Ext.define('App.view.school.room.RoomGridViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.room',
requires: [
'App.store.RoomStore',
'App.store.BuildingStore',
'App.store.TeacherStore',
'App.store.local.YesNoStore'
],
stores: {
//...
yesnoCombo:{
type:'local.yesnostore'
}
},
data: {
currentRoom: null
}
});
ViewController class:
Ext.define('App.view.school.room.RoomGridController', {
extend: 'Deft.mvc.ViewController',
alias: 'controller.school-room-grid',
requires: [
'App.view.school.room.RoomGridViewModel'
],
inject: [
'viewContext'
],
bind: {
currentRoom: '{currentRoom}',
store: '{rooms}'
},
config: {
currentRoom: null,
/** #type App.store.RoomStore */
roomStore: null,
/** #type App.context.ViewContext */
viewContext: null
},
control: {
'#': {
boxready: 'onBoxReady',
select: 'onSelect'
},
'#addButton': {
click: 'onAddButtonClick'
},
'#rejectButton': {
click: 'onRejectButtonClick'
},
'#saveButton': {
click: 'onSaveButtonClick'
}
},
onStoreLoading: function () {
Deft.Logger.info(this.$className + '.onStoreLoading');
var me = this;
me.getView().setLoading(true);
},
onStoreLoaded: function () {
Deft.Logger.info(this.$className + '.onStoreLoaded');
var me = this;
me.getView().setLoading(false);
},
//...
}
static store:
Ext.define('Perykles.store.local.YesNoStore', {
extend:'Ext.data.Store',
fields: ['id', 'name'],
autoLoad:false,
alias: 'store.local.yesnostore',
data : [
{"id":"true", "name":"Tak"},
{"id":"false", "name":"Nie"}
]
});
When I click on column binded to store to edit value instead of showing yes/no option in combobox i receive following error:
[E] Cannot modify ext-empty-store
Object
console.trace()
Uncaught Error: Cannot modify ext-empty-store
Any help would be appreciated.
I am trying reset a form, on click of button.
The button's functionality is defined in file seperate controller file.
But on clicking button reset i get error
"Uncaught TypeError: Object form1orig has no method 'reset' "
Controller
Ext.define('myapp.controller.form1', {
extend: 'Ext.app.Controller',
requires: [
'myapp.view.form1'
],
config: {
refs: {
form1orig: '#pressc',
form1Submit: 'button[action=sub]',
form1Reset: 'button[action=res]'
},
control: {
'form1Reset' : {
tap: 'onForm1Reset'
},
'form1Submit' : {
tap: 'onForm1Submit'
}
}
},
onForm1Reset: function(button){
'form1orig'.reset();
console.log('Tapped reset');
},
onForm1Submit: function(button){
console.log('Tapped submit');
}
});
View
Ext.define('myapp.view.form1', {
extend: 'Ext.form.Panel',
requires: [
'Ext.form.FieldSet',
],
xtype: 'form1Me',
id: 'form1Me',
config: {
items: [
{
xtype: 'fieldset',
id: 'pressc',
instructions: 'Please enter the information above.',
defaults: {
labelWidth: '35%'
},
items: [
{
xtype:'textfield',
name: 'name',
label: 'Name',
id: 'eman',
placeHolder: 'Name'
},
{
xtype: 'textareafield',
name : 'Prescription',
id: 'pres',
label: 'Prescription',
placeHolder: 'Enter your prescription here...'
}
]
},
{
xtype: 'container',
defaults: {
xtype: 'button',
style: 'margin: .5em',
flex : 1
},
layout: {
type: 'hbox'
},
items: [
{
text: 'Submit',
id: 'subMe',
action: 'sub',
scope: this,
hasDisabled: false
//handler: function(btn){
/*var presscForm = Ext.getCmp('presscForm');
presscForm.submit({
url: '../../result.php',
method: 'POST',
success: function() {
alert('Thamk you for using our service');
}
});*/
//}
},
{
text: 'Reset',
id: 'resMe',
action: 'res'
/*handler: function(){
Ext.getCmp('form1Me').reset();
}*/
}
]
}
]
}
});
Help
You should do something like:
var form = Ext.ComponentQuery.query('form1Me');
form.reset();
I need to develop a view in Sencha Touch where some form fields, textarea & button have to be put just after a list; following is the source code:
Ext.define('myapp.view.MyNotes',{
extend: 'Ext.Panel',
xtype: 'admissionnotes',
requires: [
'myapp.view.MyAppTitle',
'myapp.view.MyList',
'myapp.view.MyForm',
'myapp.view.MyAppTabBar'
],
config: {
layout: 'fit',
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'myapptitle'
},
{
xtype: 'myapplist'
},
{
xtype: 'myform'
},
{
xtype: 'myapptabbar'
}
]
}
});
The problem is that these form fields are overlapping my list. Can somebody assist to resolve this isssue?
Thanks
Maybe vbox layout would be more appropriated than fit?
layout: {type: 'vbox', align: 'stretch'}
How else could i access this class, i need my dynamic ID for something else... Normally if this was // var something = Ext.create(... i would do something.getForm().load...)???
Ext.define('app.winKontakt',{
extend:'Ext.form.Panel',
closable:true,
id:"myId", <------------------------------------------ID
waitMsgTarget: true,
border:false,
defaults: {
anchor: '30%',
padding:10
},
reader : Ext.create('Ext.data.reader.Json', {
model: 'app.contact',
record : 'contact',
successProperty: '#success'
}),
...
buttons: [{
text: 'Load',
handler: function(){
winId = Ext.getCmp("myId"); <--------------GET
winId.getForm().load({ <---------------EXECUTE
url: 'app/new.json',
waitMsg: 'Loading...',
method:"GET"
});
}
...
I just started with ExtJS, so there may be a better practices.
You can assign an itemId to the component and use ComponentQuery to get it.
Ext.define('app.view.contact.Form', {
extend: 'Ext.form.Panel',
itemId: 'myId',
buttons: [{
text: 'Load',
handler: function(){
Ext.ComponentQuery.query('#myId').getForm().load({...});
}
}]
})
Another options is to use the up() function from AbstractComponent to get the enclosing form.
Ext.define('app.view.contact.Form', {
extend: 'Ext.form.Panel',
buttons: [{
text: 'Load',
handler: function(){
this.up('form').load({...});
}
}]
})
I normally don't put any code in the view definition, instead I use the control() function within a Ext.app.Controller to have proper MVC separation:
Ext.define('app.controller.Contacts', {
extend: 'Ext.app.Controller',
views: ['app.view.contact.Form'],
init: function() {
this.control({
'button[action=load]': {
click: this.loadForm
}
})
}
loadFrom: function() {...}
})
Ext.define('app.view.contact.Form', {
extend: 'Ext.form.Panel',
buttons: [{
text: 'Load',
action: 'load'
}]
})
In this small example it looks quite like some overhead, but with a larger codebase the control function is quite handy to understand the events sent from a complex view to the controller.