How can I set icon used in my Panel's "Title Bar"? Maybe I need to add an image myself, but if so I suppose I need to define or configure that somewhere?
{
xtype: 'treepanel',
title: 'Projects',
width: 200,
store: Ext.data.StoreManager.lookup('projects'),
tools: [
{
type: 'add', // this doesn't appear to work, probably I need to use a valid class
tooltip: 'Add project',
handler: function() {
console.log('TODO: Add project');
}
},
...
]
},
There are a set of 25 icons that can be specified by using the type config.
check http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Tool-cfg-type
To get add symbol use
tools:[{
type:'plus',
tooltip: 'Add project',
// hidden:true,
handler: function(event, toolEl, panel){
// Add logic
}
}]
the specified type:'add' is not in the list
If you want to add your own tool type and be able to assign it an image of your own, you can do the following:
Add a css class in your css file:
.x-tool-mytool { background-image: url(path_to_your_image_file) !important; }
Then in your tools, simply use 'mytool' as the type:
{
type:'mytool',
tooltip: 'This is my tool',
handler: function(event, toolEl, panel){
// my tool logic
}
}
Make sure that you use the same name in tool's type as you used for the css class suffix.
according to the ExtJS documentation, these predefined types are available:
collapse, expand, maximize, minimize, resize, restore, move, close
minus, plus, prev, next, pin, unpin, search, toggle, refresh
save, print, gear, help
right, left, up, down
one can enter whatever type one wants:
{type: 'YOURTYPE'}
while providing a 15px icon - or preferably icon sprites
(the background-position certainly not applies for single icons, but icon sprites):
.x-tool-img.x-tool-YOURTYPE{
background: url('../images/custom_tool_sprites.png') no-repeat 0 0;
}
sources: Ext.panel.Tool-cfg-type, codefx.biz.
I think you mean "set buttons used in my Panel's Title Bar", not "set icon". You can use buttons config of Panel, not tools:
buttons: [{
text: 'Add',
tooltip: 'Add project',
handler: function() {
console.log('TODO: Add project');
}
}]
You can use other configurations like bbar (bottom bar), fbar (footer), tbar (top), lbar (left), rbar (right) for position the toolbar. One small notice is the config objects in buttons have the default xtype as button, so you don't need to explicitly specify them.
Related
Ext.field.Select by default comes with the buttons: "Done" and "Cancel", but I need to add a third button in the middle, an "Add" button, that allows the user to insert a new option if what he needs is not in the options.
Is there a way to do this in Sencha Touch?
Thanks
Yes, it is possible. First of all, see these two documentation pages toolbar, defaultPhonePickerConfig to learn how to add custom buttons to picker toolbar.
As an example:
{
"xtype": "selectfield",
// also there is defaultTablePickerConfig
"defaultPhonePickerConfig": {
"toolbar": [
{
xtype: 'button',
text: 'Add',
align: 'left',
handler: function(){}
}
]
}
}
How can i add a floating window to the viewport while its getting created.
When i'm trying to add whith
viewport.on('add',function(){
//my functionality here
});
How can i add???
Any help??
You can't really add components to a viewport while it's being created, unless you override its internal methods. And what you're doing is adding an event listener for the "add" event, which fires when items are added to a container.
I don't see why you're trying to add a window to a viewport, but you would add it just like any other item.
Ext.create("Ext.container.Viewport", {
items: [{
xtype: "window",
width: 400,
height: 400,
title: "My Window"
}]
});
Or just create the window by itself, since it is constrained to the document body anyway.
Remember, you have to call the show method on a window before it will render to the document (unless you set autoShow: true on the window config).
How to add interactive, dynamic components on a fixed location outside of all views in a Sencha Touch application.
With the menu at the top, I would like to add controls to the bottom of the app that control audio, display other random information and rotate imagery. This pane should not hide/move/refresh/etc. when changing views via the menu, in essence it should be separated from the rest of the application. It is highly preferred to be able to use the sencha 'audio' xtypes.
Should I implement this:
Straight into index.html
Somehow add it in the view which holds the menu as well
Some other magical way
The magical way is... Docking ( outside the rest of the app, probably means you want to doc on the viewport ).
http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-docked
var button = Ext.create('Ext.Button', {
text: 'Button',
id: 'rightButton'
});
Ext.create('Ext.Container', {
fullscreen: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
items: [
button
]
}
]
});
Ext.create('Ext.Panel', {
html: 'Floating Panel',
left: 0,
padding: 10
}).showBy(button);
For your top view, I would use something along the lines of a Ext.TabPanel though.
http://docs.sencha.com/touch/2-0/#!/api/Ext.tab.Panel
I'm using extjs4 and I'm trying to create a tab panel, that each tab has a different grid that loads data from a store. (each grid different store)
I would like to load the particular store only when the user clicks on the respective tab.
I don't see how I can catch the user click on the panel.
How I can do that?
I had a similar performance loading issue and failed to solve it with deferredRender. You have to add the event activate for the tab you want to load when the tab is activated :
{
title: 'tab2',
bodyPadding: 10,
html : 'A simple tab',
listeners: {
'activate' : function(){
store2.load();
},
}
}
Worked fine for me even if it's a temporary solution. Extjs 4.1 should improve loading/rendering performances. We'll see.
You can activate the panel by placing setActiveItem() in tab handler.
Ok, I figured out, I just needed to have deferredRender=true and to add the respective store.load() on the beforerender event on every tab:
var lowerTabPanel = Ext.create('Ext.tab.Panel', {
deferredRender: true,
items: [
{
title: 'tab1',
bodyPadding: 10,
html : 'A simple tab',
listeners: {
'beforerender' : function(){
store1.load();
},
}
},
{
title: 'tab2',
bodyPadding: 10,
html : 'A simple tab',
listeners: {
'beforerender' : function(){
store2.load();
},
}
},
]
});
Ext.TabPanel has config option deferredRender. May be it helps you.
Documentation:
true by default to defer the rendering of child items to the browsers DOM until a tab is activated. false will render all contained items as soon as the layout is rendered. If there is a significant amount of content or a lot of heavy controls being rendered into panels that are not displayed by default, setting this to true might improve performance.
Update: Also look at autoLoad config option in Ext.data.JsonStore, it should be false.
I’m newbuy on Sencha framework. I read the partial guidebook which I have found on the website to try to create some panels with tabs and buttons.
I would like to be able to understand how to create a my “events.js file” where putting the touch gesture event and calling them back into a mean myJS.js file. Particularly, in “dockeditems” which I have created for my mean panel, I have declared a tabPanel, some buttons and a panel where I have specified, as ‘html’, a .svg design file containing a planimetry. I wish I could apply ONLY on this last panel, containing this planimetry (for scaling by fingers), the TOUCH gesture events as PINCH, TAP, etc… How can I do this ?
Could you let me see a very simple example of the way to use a touchEvent.js file (which I have to implement) and how to connect it to the mean file containing the EXT.SETUP( …. onReady…..) ?
Something like that:
(myEventTouch.js)
myHandler = function() {“Pinching”};
(myPrincipalFile.js)
Ext.setup ({ onReady: function(){
new Ext.panel({ dockeditems: myitems })
}
var dockedItems = [{
xtype: 'toolbar',
title: 'Planimetry',
ui: 'dark',
dock: 'top',
items: “ some buttons “,
},
{
id:'html',
dock:'left',
width: '75%',
// HERE THERE IS THE CRITICAL POINT
html: '<object data="planimetry.svg" style="width: 100%; height: 100%" type="image/svg+xml" id="plan"/>',
handler: myHandler // HERE I WISH CALL BACK MY HANDLER
},
{
dock:'right',
width:'25%',
xtype:'tabpanel',
items: [“something”]
})
Thanks in advance :)
p.s.
sorry for my english (i'm italian :P)