I have this:
my.Settings = {
id: 'settings',
xtype: 'panel',
title: 'Settings',
iconCls: 'settings',
layout: 'card',
items:[
my.form1,
my.form2
]
};
When my.form1 is a config object, the form is visible and clickable (inputs allow entry, selects bring up dropdown options, etc.).
However, when I try to use Ext.define and Ext.create, the form appears visually, but nothing is selectable. If I use a tabpanel, the tabs aren't clickable, and on forms inputs won't focus or bring up the keyboard, and don't seem to respond to input at all.
Here's how I tried it:
Ext.define('my.form1', {
extend: 'Ext.form.Panel'
config:{...}
}
...
items: [
Ext.create('my.form1',{id: 'myForm1'})
]
What about the second method causes the form to break? I'm trying to move toward using require and Ext.create for dynamic loading, but I can't do this if I can't get the simplest case working.
did you set the current active item? Because you use the card layout:
var panel = Ext.create('Ext.Panel', {
layout: 'card',
items: [
{
html: "First Item"
},
{
html: "Second Item"
},
{
html: "Third Item"
},
{
html: "Fourth Item"
}
]
});
// here we set the active item to show on the screen
panel.getLayout().setActiveItem(1);
See http://docs.sencha.com/touch/2-0/#!/api/Ext.layout.Card for more information.
Related
I am trying to use Apply and Reset button with agSetColumnFilter in my application but it does not work as expected.
Scenario: When we try to add some text in the search box and click on Apply it does not filter. I have added a link feel free to modify.
{ field: 'country', filter: 'agSetColumnFilter',
filterParams: {
buttons: ['reset', 'apply']
}
}
According to AgGrid documentation, If you want the same behavior then you have to add 'excelMode': 'windows' in the filterParams.
columnDefs: [
// set filters
{
field: 'athlete',
filter: true,
filterParams: {
buttons: ['reset', 'apply'],
excelMode: 'windows',
},
},
]
Below links are given for your reference.
https://www.ag-grid.com/javascript-data-grid/filter-set-excel-mode/#example-excel-mode
Working code as expected:
https://plnkr.co/edit/iZQa3eeJu807zlj3?preview
How could we add some custom container to the Sencha Touch carousel and avoid it to became a new item that creates second page in carousel?
In other words, how to add container to carousel just before it's scrollable items?
When I'm trying to add container into carousel's dom via innerHTML I'm losing the listeners defined for container.
Any thoughts?
Thanks.
Your question isn't very clear, it would be good for you to post some code that you have tried already. If I am understanding you correctly you can add parent items easily by extending the object hierarchy, for example:
If you have this:
Ext.create("Ext.panel.Panel", {
xtype: "panel",
title: "Main Window",
items: [{
// carousel code here
}]
});
You can always add another layer in the middle if you need to:
Ext.create("Ext.panel.Panel", {
xtype: "panel",
title: "Main Window",
items: [{
xtype: "panel",
title: "My Carousel",
items: [{
// carousel code here
}]
}]
});
This possibly does not answer your question clearly as the question isn't very clear, if you can update your question with more information and some code to better explain what your trying to achieve, I will update the answer with additional information.
if you would like to add components above a carousel view for example a button you have to position it. Doing this makes the carousel treat it differently and is not used as a card in the carousel.
Altering the example here http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.carousel.Carousel to add a button that is always visible is shown in the code below.
Ext.create('Ext.Carousel', {
fullscreen: true,
defaults: {
styleHtmlContent: true
},
items: [
{
xtype: 'button',
text: 'A Button',
top: 10,
left: 10
},
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3'
}
]
});
Notice that the button has top and left configs set. This is the key to this behaviour.
I made a sencha fiddle to help explain.
Good luck.
I have did one common view, this view is required in all the pages. so wherever i need, i am calling this view of xtype . Within this common view have some components with defined by id value.
As per requirement depends on pages i need to hide some button from common view again need to show. These activities will come depending on pages. While first launching time screen will come. once i navigating to another page it will show error like Ext.AbstractManager.register(): Registering duplicate id "btnLogout" with this manager.
If i changed componets id value to name value or itemId value. then it will navigate fine but problem is not able to hide and show the buttons because showing undefined sysntax is var a = Ext.getCmp('btnBackID'); console.log(a);, it will be undefined. once the component returns as object, i can do hide show functionality.
Can any one tell how resolve this issue else give me alternate ways to achieve. great appreciate. Thank you. i have given my code below
Common View
Ext.define('abc.view.GlobalNavigationView', {
extend:'Ext.panel.Panel',
alias:'widget.globalNavigationView',
id:'globalNavigationId',
layout: {
type: 'vbox',
align:'stretch'
},
items:
[
{
xtype: 'toolbar',
layout: 'hbox',
flex: 1,
items:
[
{
xtype: 'button',
flex: .1,
text: 'Back',
id: 'btnBackID',
},
{
xtype: 'button',
flex:.1,
id: 'btnSave',
cls: 'saveCls'
},
{
xtype: 'button',
flex:.1,
id: 'btnEmail',
text: 'Email'
},
{
xtype: 'button',
flex:.1,
id: 'btnPrint',
text: 'Print'
},
{
xtype: 'button',
flex:.1,
itemId: 'btnFilter',
text: 'Filter'
},
{
xtype: 'button',
flex:.1,
id: 'btnLogout',
cls: 'logoutCls'
}
]
}
]
});
HomeView1
Ext.define('GulfMark.view.WeeklyHomeView1', {
extend:'Ext.panel.Panel',
alias:'widget.weeklyfcastView',
id:'weeklyfcastId',
layout: 'fit',
items:
[
{
xtype: 'globalNavigationView',
id: 'globalNavigationWeekly1',
flex: 1,
docked:"top",
scrollable:false
},
{
my componets of this view
.........................
}
]
});
HomeView2
Ext.define('GulfMark.view.WeeklyHomeView1', {
extend:'Ext.panel.Panel',
alias:'widget.weeklyfcastView',
id:'weeklyfcastId',
layout: 'fit',
items:
[
{
xtype: 'globalNavigationView',
id: 'globalNavigationWeekly2',
flex: 1,
docked:"top",
scrollable:false
},
{
my componets of this view
-----------------------
}
]
});
Controller Code:
init:function(){
this.control({
'globalNavigationView ':{
click:this.onbtnBackClick,
render: this.onbtnBackrender,
},
'weeklyfcastView':{
show:this.onShowweeklyfcastView,
render:this.onRenderweeklyfcastView
}
});
},
onShowweeklyfcastView: function(){
var btnFilter = Ext.getCmp('btnFilter');
console.log(btnFilter); // if i used components id to name or itemId, here will show undefined
btnFilter.setHidden(true);
//btnFilter .hide();
}
If your view is not a singleton, you cannot give IDs to its components - IDs must be unique, or you get the duplicate id error.
What you really need is some reference to the view from which you are trying to show/hide buttons. When you have that reference, you can use the down method to find your buttons. For example:
var iPanel = // Create new panel here.
iPanel.down('button[text="Email"]').hide();
This code works in EXTJS 6 for multiple buttons in the same view, having the same itemId (not id - ids will throw an error, as noted above)
View:
{
xtype : 'button',
text : 'Save and Come Back Button 1',
itemId : 'saveAndComeBackButton',
handler : 'saveAndComeBack'
},
{
xtype : 'button',
text : 'Save and Come Back Button 2',
itemId : 'saveAndComeBackButton',
handler : 'saveAndComeBack'
},
Controller:
this.__setButtons('#saveAndComeBackButton','disable');
__setButtons: function (buttonItemId,state) {
Ext.Array.forEach(
Ext.ComponentQuery.query(buttonItemId),
function (button){
if (state === 'enable'){
button.enable();
}else{
button.disable();
}
}
);
}
I'm seeing an issue with a combobox where I have a listener for the 'change' event. When the event fires it runs a function that filters a store that powers another combobox to filter the values that are available in the 2nd combobox.
The idea is that when you pick from a short list in the first combobox, it pares down the choices in the second combobox.
When the form loads, you can click the second combobox and see all the choices, that works great. When you then select something in the first combobox and then click the second combobox again, you see the appropriate shortened list but it's grayed out and the 'loading...' thing just spins and will never go away.
If you load the form and pick something in the first combobox and then click the second combobox it will filter and show fine but you run into the issue of the loading problem I described above if you try to change your selection in the first box and click the second combobox again.
Please see the code below, I have this setup working on another screen and it doesn't seem to have this issue.
I've got an ext store created like the following:
var comboBreaker = Ext.create('Ext.data.Store', {
autoLoad: false,
remoteSort: true,
remoteFilter: true,
fields: [{
name: 'id',
mapping: 'item_id',
type: 'int',
useNull: false},
'item_display_number','item_name', 'line_item_type_id', 'item_description'
],
proxy:{
type:'ajax',
url: '/invoicer/data/getlineitems',
reader: {
type: 'json',
successProperty: 'success',
root: 'results',
totalProperty: 'totalCount'
},
sorters:[{
property:'item_display_number',
direction:'ASC'
}]
}
});
This store powers a combobox, like so:
Ext.define('Writer.Form', {
extend: 'Ext.form.Panel',
alias: 'widget.writerform',
requires: ['Ext.form.field.Text'],
initComponent: function(){
this.addEvents('create');
Ext.apply(this, {
activeRecord: null,
frame: true,
title: 'Line Item',
id: 'writerform',
fieldDefaults: {
anchor: '100%',
labelAlign: 'right'
},
items: [{
xtype: 'combobox',
fieldLabel: 'Item #',
name: 'item_number',
store: comboBreaker,
displayField: 'item_display_number',
valueField: 'id',
allowBlank: false,
forceSelection: true
},{
xtype: 'combobox',
fieldLabel: 'Item Type',
name: 'item_type',
id: 'item_type',
displayField: 'line_item_type',
valueField: 'id',
store: invoicer_lineItemTypeStore,
forceSelection: true,
labelWidth: 75,
width: 200,
listeners: {
change: {
fn: function() {
itemNumberFilter(comboBreaker);
}
}
}
}]
});
The itemNumberFilter() function takes a store and does filtering on it, here is that code:
function itemNumberFilter( store ) {
var id = Ext.getCmp('item_type').getValue();
store.remoteFilter = false;
store.clearFilter();
if ( id ) {
store.filter('line_item_type_id', id);
}
store.remoteFilter = true;
store.removeAll();
store.load({
scope: this,
callback: function( records ) {
console.log('Loaded records!');
console.log(records);
}
});
}
I see the logged out records every time I change my selection in the first combobox and I can 'see' the results in the second combobox but they're always grayed out with the 'loading..' GIF showing.
Edit: Video example: http://screencast.com/t/cUSHyFE6FIV
Edit: I believe this is the solution:
lastQuery: '',
listeners: {
beforequery: {
fn: function(query) {
delete this.lastQuery;
}
}
}
Adding this to the combobox config fixes the issue.
Edit2: I ran into a second bug introduced by this, it was fixed by adding:
this.clearValue();
to the beforequery function (above delete this.lastQuery). This clears the value of the combobox each time the drop down arrow is clicked.
Let's say you select item x in combo_1 and then item a in the pared down list in combo_2. You then change the selection in combo_1 to y, which then changes the list of items again in combo_2. Is a available in the new list in combo_2 that results from selecting item y in combo_1? Maybe it is an issue of trying to keep an item selected when it no longer exists in the list available to the combo.
Have you tried clearing the selection in combo_2 before applying the filter?
You can dynamically load the store of the second combox box but be sure to set the second combox box to "local".
I'm starting to learn sproutcore(v1.7.1.beta). I am very concerned about the issues of proper implementation some things...one of them is main menu.
What the right way to do that?
I think I need to change state if menu item has been clicked, right? I tried to do it with SC.TemplateCollectionView, but can't understand, how to determine what item have been clicked?
My CollectionView:
App.MainMenuItemView = SC.TemplateCollectionView.extend({
contentBinding: 'App.mainMenuController',
mouseUp: function(){
//
}
});
You want to use
SC.SegmentedView. Something like
topNav: SC.SegmentedView.extend({
classNames: ['top-nav'],
items: [
{
title: "App.title1".loc(),
value: 1,
action: 'action1'
},
{
title: "App.title2".loc(),
value: 2,
action: 'action2'
},
....
],
itemTitleKey: 'title',
itemValueKey: 'value',
itemWidthKey: '85',
itemActionKey: 'action',
valueBinding: 'Binding to current tab value'
})
You can specify an icon via itemIconKey....
Or just roll your own custom SC.View.