I have a repeater In which I am displaying different values.On click of each row I want to display few values.But in the enyo example the content of the popup is popup.....
This content I want to change.I have tried as below
I have the popup-
{name: "basicPopup", kind: "enyo.Popup", floating: true, centered: true,
style: "background-color: yellow; padding: 10px", onHide: "popupHidden", components: [
{content: "Popup..."}
]
},
the mathod i used on tap of each row is
tapped: function(inSender, inEvent) {
alert(inSender.getContent())
this.$.basicPopup.setValue(inSender.getContent());
this.$.basicPopup.show();
},
But by this the vale of the popup is not changing.I want to change the value.Please help.
What you need to do is setContent() on the component inside the Popup OR destroyClientControls() on the Popup and then createComponents() to add what you want in there.
To do it the first way, you want to provide a name for that component, something like:
{name: "popupContent", content: "Popup..."}
and then use this.$.popupContent.setContent("foo");
Related
Hi i need little help with the scenario i am facing hard to get. i have a horizontal list view of images i want to show only three images on the screen and with center image highlighted.
I tried carousel but only the image highlighted will be scrollable, i want the horizontal kind of smooth scrolling.
Is something like using hbox panel on top of horizontal list view works?
var superpanel = new Ext.Panel({
fullscreen: true,
layout: 'hbox',
items: [
{
xtype: 'panel',
id: 'panel_1',
width: '100%',
layout: 'fit',
items: [
{
xtype: 'list',
flex:1,
id: 'list1',
store: 'samplestore1'
}
]
}
]
});
can someone help with the scenario how to achieve this.
Any help is much appreciated
You don't need carousel for this. Dataview will serve the purpose. Check out this dude:
Ext.define('Example.view.HorizontalList', {
extend: 'Ext.dataview.DataView',
xtype: 'horizontallist',
config: {
inline: {
wrap: false
},
scrollable: {
direction: 'horizontal'
},
//set the itemtpl to show the fields for the store
itemTpl: '{name} {image}',
//bind the store to this list
store: 'xyz'
}
});
You can also check this.
i am have 2 forms, and in first form i am have button1:
Buttons[{
width: 350,
text: 'Book',
name:'button1'}]
on second form i am have button2, and when button click in second form, then button in first form disabled, before i am use id of button (id:'button1') and make this:
Ext.getCmp('button1').setDisabled(true);
but now i am remove ID and use name in components. But i am didn"t know how disable button1 by name!
Buttons don't have a name property - you should consult the documentation to see what configuration variables you have available to you. I'd instead assign it an itemId so you can make use of the up() and down() functions in order to easily find an item in the component hierarchy from an event handler.
Or if you want to find it directly you can use the following to lookup up the item:
{
text : 'Button',
itemId : 'buttonSelector'
}
var button = Ext.ComponentQuery.query('#buttonSelector');
if(button.length) button[0].disable();
Keep in mind that the ComponentQuery utility returns an array of items (even if you make your itemId unique). Here's a simple fiddle / demonstration.
In response to your comment, there may be confusion in regards to what the buttons config actually does - according to the docs it is shorthand for the following:
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: {minWidth: minButtonWidth},
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: 'Button 1' }
]
}]
... this creates an extra "step" in the hierarchy which you must account for in a query. For example, if your form had an itemId of formId you could try something like:
Ext.ComponentQuery.query('#formId toolbar #myButtonId')[0].disable();
I've updated your fiddle to demonstrate this.
I am trying to find a way to get a close (X button) in the top right hand corner of the Ext.MessageBox in Sencha Touch 2.0 so that when you click on the button it closes the MessageBox.
You might want to have a look at this nice tutorial:
Add action buttons to floating sencha touch panels
the explanation is for ST1, but it might help you understanding how you could achieve this in ST2.
Hope this helps.
There's no built-in config which meets your need, so you have to do it manually.
Note that Ext.MessageBox is just a float and modal Ext.Container, so you can customize it like a normal container.
Let's try something like this (you can edit this code live through Sencha Touch 2 documentation here:
http://docs.sencha.com/touch/2-0/#!/api/Ext.MessageBox
var box = Ext.create('Ext.MessageBox',
{
id: 'message-box',
title: 'title',
message: 'message',
items: [
{
xtype: 'toolbar',
height: '40px',
docked: 'top',
items: [
{xtype: 'spacer'},
{xtype: 'button',
text: 'X',
ui: 'plain',
style: {padding: '5px'},
handler: function(){Ext.getCmp('message-box').hide();}
},
],
}
]
});
box.show();
Hope it helps.
I have few docked items :
dockedItems: [{
xtype: 'toolbar',
items: [{
xtype:'button',
icon: g_settings.iconUrl + 'add-icon.png',
text: 'Abc',
handler: this._add
},{
icon: g_settings.iconUrl + 'remove-cancel-icon.png',
text: 'Del',
disabled: true,
itemId: 'delete',
scope: this,
handler: this.onDeleteClick
}]
},{
xtype:'toolbar',
dock: 'bottom',
items: [{
xtype: 'button',
height: 30,
// padding: '0 0 0 50',
icon: g_settings.iconUrl + 'add-file-to-doc.png',
text: 'Select',
itemId: 'conndoc',
scope: this,
disabled: true,
handler: this._connToDocument
}]
}, {
xtype: 'pagingtoolbar',
id: 'id-docs-paging',
store: 'Documents',
dock: 'bottom',
displayInfo: true
}],
The xtype:pagingtoolbar and the toolbar with text: Select are both with position bottom and the second contains just one button which by default is on the left side of the toolbar but I want to stay at the right side. I tried "->" and other options from ExtJS documentation but since I have only one item in the toolbar I think I can't use the standard options.So how I could position a single item in a toolbar to be at the right side?
Thanks
Leron
P.S
I forgot - the paginationg toolbar always appears above the toolbar with the icon even though it's last in the list with docked items, but I want the pagination to be the latest at the bottom, so if anyone could help me with this issue too...
Ok, so the both issued are resolved, maybe not so difficult, but may come in handy to someone else. So, as i wrote in my comment above - to move the button to the right side of the toolbar i just used this items: ['->',{. As for the second part, it appears that the first element who has dock: 'bottom' property will be positioned at the very bottom and every element that comes next in the code and has the same position will be put at the bottom, but above the previous element. So the important thing here was to write my elements in the right order having in mind the information above.
you could also use the buttons:[] config in panel - then its automatically placed in the bottom right. How did you find that out with '->'... I can't seem to find it in the documentation. Thanks
'->' is a shortcut for tbfill
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Toolbar.Fill
I am using a jqGrid that has allot of columns to it.
I added the view option (when clicking on a row and then on the 'view' button, in the bottom left corner of the grid, it opens a model with all the info for that row.
I see that the model has some css style:
overflow-hidden
Therefor if i have allot of columns to show after a certain height that i gave it when creating the grid, they get hidden.
How can i make that dialog box be:
overflow-auto
If possible i want only the inside div to scroll and leave the header of the dialog and the buttons on bottom there all the time.
How can i do this?
myGrid.jqGrid('navGrid', '#pager',
{ edit: false, add: false, del: false, search: false, view: true }, //option
{}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{},
{ height: 250, jqModal: false, closeOnEscape: true} // view options
);
I tried this:
$('#viewmod'+myGridId).css({overflow: 'auto'});
But it didnt work...
You tried the way described here and here.
Found the answer for this.
When declaring the view options add the dataheight option...
{ dataheight: 250, jqModal: false, closeOnEscape: true} // view options