I'm just wondering... is I'll define one 'ref' in a controller and will have few objects matching criteria for this 'ref', will I be able to retrieve both with the 'getter' method?
as an example the code below (Controller):
Ext.define('aBMin.controller.EmailRead', {
extend : 'Ext.app.Controller',
config : {
control : {
emailViewSubmit : {
tap : 'funEmailViewSubmit'
},
emailViewSubmitCreateTicket : {
tap : 'funEmailViewSubmitCreateTicket'
}
},
refs : {
emailViewPanel : 'emailread-panel'
,ticketViewPanel : {
selector : 'ticketview-panel',
xtype : 'ticketview-panel',
autoCreate : true
}
,dashboardPanel : 'dashboard-panel'
,emailViewSubmit : 'button[action="emailViewSubmit"]'
,emailViewSubmitCreateTicket : 'button[action="emailViewSubmitCreateTicket"]'
,ticktViewStaff : 'selectfield[alias=ticketview-supportstaffid]'
,ticketViewSubmit : 'button[action="ticketViewSubmit"]'
,emailBody : 'displayfield[name="emailbody"]'
}
View (take a note - 2 buttons with the same action = emailViewSubmitCreateTicket):
items : [{
xtype : 'button',
text : 'Create Ticket',
action : 'emailViewSubmitCreateTicket',
ui : 'confirm',
width : '100%',
hidden : true,
margin : '0 0 2px'
}, {
xtype : 'button',
text : 'Save',
action : 'emailViewSubmit',
ui : 'confirm',
width : '100%',
margin : '0 0 2px'
}, {
xtype : 'button',
text : 'Create Ticket',
action : 'emailViewSubmitCreateTicket',
ui : 'confirm',
width : '100%',
hidden : true,
margin : '0 0 2px'
}
and by the 'getter' function I mean for ex.
glob.getEmailViewSubmitCreateTicket().setHidden(false);
will this affect both of them or just one? As I've tested - this will affect only one. Any ideas how to do the same but, what I want is to affect 2 buttons at once.
refs can only return one instance which is the first that is found. If you need to get all instances use the Ext.ComponentQuery which is internally used anyway.
Sort of this should do it
Ext.Array.each(
Ext.ComponentQuery.query('button[action=emailViewSubmitCreateTicket]'),
function(item){
item.setHidden(false);
});
Related
I have a panel in ExtJS6 modern (mobile) application that can scroll vertically only. Sub panels are added dynamically to it. I need to scroll the panel to its end after adding a new sub-panel in order to make it visible. This is done using this line:
Ext.getCmp('tabmainMessagesPanel').getScrollable().scrollTo(Infinity, Infinity, true);
I execute this line in a button click, and it works (but need to click the button manually). I tried to find the right event where I can add this line to do the scroll automatically, without success. I nearly tried all the possible relevant events of the sub-panel: show, add, added, activate, ... I also tried the events of the parent panel without success.
Apparently, these events happen before the scroller of the parent panel takes into account the added sub-panel, so it scrolls to the before-last one. I smell asynchronous behavior here. The proof is that I call the scrollTo method in a delayed task of 0.5 second and it works. But this solution is not reliable.
The question is: where (in which event of which component) this line of code should go in order to scroll the parent to its end correctly?
[EDIT]
Here is the part of the code concerning the question. First, the Message class:
Ext.define('MyApp.view.message.Message', {
extend : 'Ext.Panel',
xtype : 'message',
layout : 'hbox',
config : {
mBody : ''
},
listeners: {
added: function (element) {
MyApp.view.main.Global.scroller.delay(500); //start a delayed task to scroll parent panel
}
},
items: [
{
flex : 1
},
{
maxWidth: '80%',
width: 'auto',
html : '<div class="myClass">' + this.getMBody() + '</div>'
}
]
});
Here is the delayed task that scrolls the parent panel tabmainMessagesPanel to its end in order to show the newly-added message:
Ext.define('MyApp.view.main.Global', {
statics: {
scroller: Ext.create('Ext.util.DelayedTask', function() {
Ext.getCmp('tabmainMessagesPanel').getScrollable().scrollTo(Infinity, Infinity, true);
})
}
}
Now, the tab panel that contains the panel tabmainMessagesPanel that will contain the messages:
Ext.define('MyApp.view.main.TabMain', {
extend : 'Ext.tab.Panel',
mixins : [ 'Ext.mixin.Responsive' ],
xtype : 'tabmain',
responsiveConfig : {
portrait : {
items :
[
{
title : 'Messages',
layout : 'vbox',
items : [ {
xtype: 'panel',
layout : 'vbox',
height: '100%',
id: 'tabmainMessagesPanel',
scrollable : 'vertical',
style : 'background-color:#F0F0F0'
},
{
xtype : 'inputfield',
docked : 'bottom'
}]
},
{
title : 'Connect',
layout: 'vbox',
items : [
//some UI elements
]
}
]
},
//--------------------------------------------------
landscape : {
// same as portrait
}
},
//--------------------------------------------------
controller : 'tabmain',
viewModel : 'tabmain',
defaults : {
tab : {
iconAlign : 'top'
},
styleHtmlContent : true
}
});
Finally, this is an event in a controller that creates and adds a message to tabmainMessagesPanel whenever a new message arrives:
handle_message: function (mess) {
var p = Ext.create('MyApp.view.message.Message', {
mBody : mess.body
});
Ext.getCmp('tabmainMessagesPanel').add(p);
}
Here is the answer for this. I found it 6 months later. I post it here for the benefit of those who may have the same issue.
The solution is to define the event refresh of the scroller of the panel tabmainMessagesPanel, and scroll to the end in it. So, the definition of the panel tabmainMessagesPanel becomes:
{
xtype: 'panel',
layout : 'vbox',
height: '100%',
id: 'tabmainMessagesPanel',
scrollable : 'vertical',
listeners: {
initialize: function (me) {
me.getScrollable().on('refresh', function () {
me.getScrollable().scrollTo(Infinity, Infinity, true);
});
}
},
style : 'background-color:#F0F0F0'
}
I'm working with ExtJS 5 and I need to bind the pressed config of a toggle button to the same config of an arbitrary array of another toggle buttons. In other words it should be something like this:
Ext.define('MyApp.view.MyPanel', { extend : 'Ext.panel.Panel',
alias : 'widget.myPanel',
requires : ['path to viewmodel'],
viewModel : {
type : 'myPanel'
},
items : [
{
xtype : 'button',
reference : 'btn1',
enableToggle : true
},
{
xtype : 'button',
reference : 'btn2',
enableToggle : true
},
// ... bunch of other buttons
{
xtype : 'button',
enableToggle : true,
bind : {
pressed : '{btn1.pressed && btn2.pressed}'
}
}
],
});
Furthermore I should be able to dinamically add or remove components to the dependend toggle button. How can I achieve this?
I have below requirement of a page with sencha touch:
A drop down of some options
A question posted by users (length may vary big time)
a text area to display get the answer
Two buttons for submit and ignore
I am using vbox layout. Now the problem is I want the page to be fully scrollable instead of partial scrolls on dataview etc.
How can I achieve it. I have similar requirements for different screens.
Below is the code:
Ext.define('HCMDoctor.view.PFQuestion', {
extend : 'Ext.form.Panel',
xtype : 'PFQuestion',
id : 'pfView',
config : {
layout : {
type : 'vbox',
align : 'stretch'
},
flex : 1,
scrollable : true,
items : [{
xtype : 'container',
html : 'Public Forum Question'
}, {
xtype : 'selectfield',
store : 'CommunityWiseQuestions',
name : 'pfCommId',
id : 'pfCommId',
valueField : 'communityId',
displayField : 'displayFull'
}, {
store : 'PFQuestion',
xtype : 'dataview',
flex : 1,
id : 'pfQuestionHolder',
itemTpl : ['{discussionTitle}<br>{description}',
'<br>Posted in {postedInCommunityName}']
}, {
xtype : 'hiddenfield',
id : 'pfQuestionId',
name : 'pfQuestionId'
}, {
xtype : 'textareafield',
id : 'pfAnswer',
name : 'pfAnswer'
}, {
store : 'PFQuestion',
xtype : 'button',
text : 'Ignore',
id : 'ignorePFQuestion'
}, {
store : 'PFQuestion',
xtype : 'button',
text : 'Submit',
id : 'submitPFQuestion'
}
]
}
});
Thanks
onload of store iterate over records and in every iteration create panel with tpl by passing record data to it and add the panel to its parent. something like this:
var parentPanel = Ext.getCmp("pfView");
for(var i=0; i++; i<records.size){
var mypanel = Ext.create("Ext.Panel", {
data : records[i]
});
parentPanel.add(myPanel);
}
I created register panel and added toolbar with button during view initialization, In controller i am creating form panel and adding it to the register panel dynamically.
The toolbar in register panel is adjusting based on device screen but, The form panel width is not changing.
If i set width for the form panel, The form panel is floating and width remains the same.
This is what i done so for.
Ext.define('Form.view.RegisterForm',{
extend : 'Ext.Panel',
xtype : 'register',
id : 'register',
initialize : function() {
console.log("register init");
var submit = {
xtype : 'button',
width : '100px',
ui : 'action',
text : 'Submit',
handler : this.onSubmitTap,
scope : this
};
var topToolbar = {
xtype : 'toolbar',
docked : 'top',
id : 'registerToolbar',
title : 'Form',
items : [{
xtype : 'spacer'
}, submit]
};
this.add(topToolbar);
},
config : {
fullscreen : true,
layout : {
type : 'vbox'
},
title : 'Register'
},
onSubmitTap : function() {
console.log("onSubmit");
this.fireEvent('submitCommand', this);
}
});
In Register controller i adding fields dynamically
// RegisterFormController.js
oncreateForm : function() {
var form = {
xtype: 'formpanel',
flex : 1,
id: formId,
name: formId
};
Ext.getCmp('register').add(form);
}
// calling onCreateComponent method with xtype, label, value and fromId
onCreateComponent : function(fxtype,flabel,fname,fvalue,id) {
Ext.getCmp(id).add({
xtype: fxtype,
label: flabel,
name: fname,
value: fvalue,
labelWrap:true
});
}
In case any of you came up with same problem.
The mistake i did was "I added the 4 radio buttons in a hbox panel so width of that panel increased that's why the whole form panel not displaying properly in different devices".
After i changed the panel layout as vbox, The problem solved.
i am tring to display lable of form in marathi language for that
am creating marathi.js
this my mararhi.js
if(Ext.app.formPanel)
{
Ext.apply(Ext.app.formPanel.prototype,
{
selectUser:'नाव'
}
);
}
and my other js file contain this
var Ext.app.formPanel = Ext.extend(Ext.form.FormPanel,{
selectUser:'Select User',
initComponent : function(config) {
Ext.apply(this, {
title : 'User Rights',
bodyStyle : 'padding: 10px; background-color: #DFE8F6',
labelWidth : 100,
width : 755,
id : 'formUserRights',
renderTo:'adminpanel',
items : [ id: 'User',
fieldLabel:this.selectUser,
width:200
] //items
});//Ext.apply
Ext.app.formPanel.superclass.initComponent.apply(this, arguments);
}//init component
}); //yuyu
......
....
but it can not work
it gives error ; missing before
var Ext.app.formPanel = Ext.extend.....
but when i checked all carefully every thing is correctly nested.
First thing, the syntax error that vava noted in his comment above.
Second, you should not var the 'Ext.app.formPanel' namespace.
Third, initComponent does not pass any arguments.
Fourth, you need to call the superclass, not apply it - also no need to pass arguments, as there are none.
Ext.ns('Ext.app');
Ext.app.formPanel = Ext.extend(Ext.form.FormPanel, {
selectUser : 'Select User',
initComponent : function() {
Ext.apply(this, {
title : 'User Rights',
bodyStyle : 'padding: 10px; background-color: #DFE8F6',
labelWidth : 100,
width : 755,
id : 'formUserRights',
renderTo : 'adminpanel',
items : [ {
id : 'User',
fieldLabel : this.selectUser,
width : 200
} ]
});
Ext.app.formPanel.superclass.initComponent.call(this);
}
});
On a side note, I prefer not to use the Ext namespace for my app code, there is a chance for collision that way. I would suggest creating your own namespace.
Enjoy this one on the house, with the hope that someday you will actually award answers.