As title, how to make this? I have already done drag and drop using dnd.Source and dnd.Target. Have no idea if it possible to make it when drop and it creates/generates a div which it can closable.
I think it would be possible to hook up to the onDndDrop event of your dnd.Target by doing some along these lines:
dojo.connect(yourtarget, "onDndDrop", _dndHandler);
Then in the _dndHandler function you could create a new div using the dojo.create and dojo.place:
var newdiv = dojo.create("div", { innerHTML: "This is my new div" });
dojo.place(newdiv, dojo.byId("your_target_id", "first"));
Hope it helps
/Daniel
Related
My donut chart works excellent I am using the wheel nav but I can't seem to find anywhere in the docs info on onmousedown for the spreader. When the spreader is in I'd like to add a pop up on mousedown. Any ideas?
I tried to use an on clock method but that didn't seem to work. Great library but very little info on how to manipulate it without changing the entire source.
You can achieve your needs via onmouseup event:
var wheel = new wheelnav("wheelDiv");
wheel.spreaderEnable = true;
wheel.createWheel(["This", "is", "custom", "spreader"]);
var wheelspreader = document.getElementById("wheelnav-wheelDiv-spreader");
var wheelspreadertitle = document.getElementById("wheelnav-wheelDiv-spreadertitle");
wheelspreader.onmouseup = function() {alert("spread it!");}
wheelspreadertitle.onmouseup = function() {alert("spread it!");}
Here is a JS Bin sample.
Is there a way to change a tooltip text from a Tool placed in a panel? I looked at the ToolTip object and QuickTip but neither have a function like setTipText()
Thanks, Y_Y
I wasn't able to put an itemId on my tooltip, so I was able to dynamically update the tooltip of a tool this way:
var toolTip = Ext.get(tool.getEl().id + '-toolEl');
toolTip.set({
'data-qtitle': 'New Tooltip Title', //this line is optional
'data-qtip': 'Updated Tool Tip!'
});
I have two solutions for your problem!
Change HTML-attribute
toolTip=Ext.ComponentQuery.query('tooltip[itemId=myToolTip]')[0];
toolTip.html = "This is the new text!";
toolTip.setTitle("new Title");
toolTip.render();
Destroy the old one and make a new one...
tooltip.destroy();
var config = {
target: 'bottomCallout',
anchor: 'top',
anchorOffset: 85, // center the anchor on the tooltip
html: "Fancy new ToolTip with a totally different config..."
};
Ext.create('Ext.tip.ToolTip', config);
can anyone please explain, with an example if possible, how to load dynamic content inside an iscroll div and assign a new height to it?
I can get it to work but I can't control the height of the scroll for the new content.
I'm new to all this and have no clue were to start.
here's what I'm working on:
http://homepage.mac.com/jjco/test/index7.html
when the page is loaded you see the scroll bar where there's no content...
clicking on print/damm (shows the height I originally set for this content)
clicking on print/fcbarcelona (maintains the same height and position of the scroll you used before) as you see it's not working as it should.
obviously, I don't want the scroll to be there when it's not necessary.
any help would be greatly appreciated.
It's better to use the refresh() method in iScroll, which will recalculate the height.
myScroll.refresh();
I had a similar problem, and just refresh() didn't help, so didn't help destroying and recreating iScroll. In my case I was loading a lot of elements into iScroll div. What did solve the problem is setTimeout(). As MASTERING THE REFRESH() METHOD said adding even 0ms to a setTimeout() would solve a lot of problems. In my case it was 500ms. =
here is code sample:
var myScroll;
function createIScroll(){
myScroll = new iScroll('wrapper');
}
function iScrollRefresh(){
setTimeout(function(){
myScroll.refresh();
}, 500);
}
$ajax(){
//receiving data
}
function someFunction(){
//dynamic content is created
iScrollRefresh();
}
My problem was that refresh() function was executed before content was inserted into DOM, so increasing timeout helped. I hope it helps to beginners like me.
try this, when you insert your new data into iScroll do these steps
//myScroll is a global variable you initialize iScroll on
myScroll.destroy();
myScroll = null;
loaded();//this is a functions where you have have your iScroll initializer
To watch height changes:
setInterval(function () {
var newScrollerHeight = $scroller.innerHeight();
if (newScrollerHeight !== prevScrollerHeight) {
prevScrollerHeight = newScrollerHeight;
myScroll.refresh();
}
}, 500);
Take a look at iScroll4
In iscroll.js, I see experimental option: checkDOMChanges: false,// Experimental You can enable and use it.
I want to update the toolbar's content of the main view from a subview (HotelApp.views.hotelDetail)
This is my toolbar from HotelApp.views.mainView
this.topBar = new Ext.Toolbar({
dock:'top',
id:'main_page_topbar',
title:'H10 Sencha Demo',
items:[this.back,
{xtype: 'spacer'}
]
});
The toolbar already have a back button. The problem is i can see the shape of a button, but no text either ID. What i'm doing wrong??
I use this code:
var toolbar = HotelApp.views.mainView.getDockedItems()[1];
var images = new Ext.Button({
text:'Images',
id:'images',
ui:'drastic'
})
toolbar.setTitle(record.get('nombre'));
toolbar.add({items: images});
toolbar.doLayout();
Thanks!!!
I think that your problem is only that you have to add your button calling
toolbar.add(images);
instead of
toolbar.add({items: images});
I even suggest you to don't use 'id' config for your components but 'itemId'.
In this way you can always get your views components by calling
myView.getComponent('myComponentItemId');
or
myView.getDockedComponent('myComponentItemId');
for DockedComponents like toolbars.
Hope this helps.
I'm new with Appcelerator and I encountered an annoying problem regarding layout.
I have to do a menu bar that is very easy to do with plain html (ul>li>a and that's all). The problem is that it seems that all button-related functions are not... customizable. I want buttons to be displayed as plain text, not buttons.
The first thought was to use labels (instead of buttons). But... Is this a right way? I need a menu bar, not a text paragraph! Besides that, the menu is somehow flexible, not like labels.
This is one (of many!) things i tried:
var menu_color = Titanium.UI.createButton({
title:Ti.Locale.getString("menu_color") || "Color",
height:24,
top:10
});
I also added borderWidth:0 (no effect) and backgroundColor:none/transparent with no luck.
Help? :)
I usually use views when I need to create what you described above.
For example:
I use a view with a vertical layout, then add my child views. The child views then have listeners for the click or whatever event.
This allows you to have more control over the formatting. A side effect of this is you will need to create your own "press" ui cue in some cases.
var demo = {win : Ti.UI.currentWindow};
(function(){
//Create the container view
demo.vwMain = Ti.UI.createView({height:100, layout:'vertical', backgroundColor:'yellow'});
demo.win.add(demo.vwMain);
demo.fakebutton1 = Ti.UI.createView({height:40, backgroundColor:'blue',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton1);
demo.fakebutton2 = Ti.UI.createView({top:5,height:40, backgroundColor:'green',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton2);
demo.fakebutton1.addEventListener('click', function(e) {
alert('Clicked fake button 1');
});
demo.fakebutton2.addEventListener('click', function(e) {
alert('Clicked fake button 2');
});
})();
create a view with layout property is set to vertical and add label or button which you want.View is like in HTML.Hope you understand.