I m really new in ExtJS and try to reuse some existing content produced with jQuery. Is there a simple way to add existing components as items in a container?
My code looks something like this
var rect = $('<div>', {
'id' : 'rectangle'
}).text("this is a rectangle.");
var cont = new Ext.Container({
layout : 'absolute',
width : 400,
height : 300,
renderTo : Ext.getBody(),
border : 1,
style : {
borderColor : '#000000',
borderStyle : 'solid',
borderWidth : '1px'
},
items : [{
html : rect
}]
});
Simply grab the html of that item with .html()
items : [{
html : rect.html()
}]
The best way is to use contentEl. Note that this moves the element inside the component, so when the component is destroyed, so is the element.
items: {
contentEl: rect.get(0) // Grab a reference to the DOM element
}
If you want to make a copy, of the element before moving it, you could call:
rect.clone.get(0);
Related
How can I hide the bottom toolbar of agentTypeGridPanel ?
I tried .getDockedComponent('bottomtoolbar').hide() but its not working.
eci.admin.agentType.agentTypePanel = function(attributes){
var agentTypeGridPanel = eci.admin.agentType.agentTypeGrid(attributes);
var fieldsGridPanel = eci.admin.agentType.getFieldsGridPanel(attributes);
var dataPanel = new Ext.Panel({
itemId: 'eciAgentTypeDetails'+eci.admin.agentType.dataTypeId+'-panel',
title : 'Agent Type',
border : false,
//height : 300,
hideHeaders: true,
items : [agentTypeGridPanel, fieldsGridPanel]
});
//eci.admin.agentType.GridPanel.getDockedComponent('bottomtoolbar').hide();
//agentTypeGridPanel.getTopToolbar().hide();
return dataPanel;
};
I think this is what you are looking for.
GridPanel.getDockedItems('toolbar[dock="top/bottom"]').hidden = true;
You need to provide the grid code for further analysis.
I am trying to change the chart theme dynamically using this code:
changeTheme(e) {
this.previewService.chartConfig.theme = this.themes[e.target.attributes.value.value];
}
This is the way I am changing the theme dynamically, it got reflected in json source of chart but it is not updating the actual theme.
Could you show me a working example for same?
Please check this fiddle.
https://jsfiddle.net/pshiral/30955m70/7/
Full disclosure, I'm a member of the ZingChart team.
Themes work at the highest level in our library. We build pieces of the chart based on attributes in the theme working our way in a top to bottom fashion. Because of this, you can only set and update a theme at the render level. This means you will have to destroy your chart and re-render it to changes themes. Check out the following:
var myConfig = {
type: "bar",
series : [
{
values : [35,42,67,89,25,34,67,85]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
function changeTheme(e) {
zingchart.exec('myChart','destroy');
zingchart.render({
id : 'myChart',
data : myConfig,
height : 400,
width : 600,
theme: this.id
});
}
document.getElementById('light').addEventListener('click',changeTheme);
document.getElementById('dark').addEventListener('click',changeTheme);
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";</script>
</head>
<body>
<div id='myChart'></div>
<button id='light'>Light Theme</button>
<button id='dark'>Dark Theme</button>
</body>
</html>
Full disclosure, I'm a member of the ZingChart team.
I have updated our Angular Directive to watch for changes on the zcRender object. It will take care of chart cleanup and re-rendering the chart for you. The latest version 1.2.1 can be downloaded from github or npm. I put together a small demo in a plnkr demonstrating the changes.
// If defaults or theme has changed.
// Destroy and re-render chart
$scope.$watch('zcRender', function(newValue, oldValue, scope) {
if(initializing.render){
initializing.render = !initializing.render;
return;
}
// console.log('---newValue',newValue)
// console.log('---oldValue',oldValue)
// console.log('---scope',scope)
zingchart.exec(scope.id, 'destroy');
scope.zcRender = newValue;
scope.renderChart();
},true);
// Break render function out of link so we can consistently
// call the same rendering algorithm
$scope.renderChart = function (){
var id = $element.attr('id');
//Defaults
var _json = {
data : {
type : 'line',
series : []
},
width : 600,
height: 400
};
//Add render object.
if($scope.zcRender){
mergeObject($scope.zcRender, _json);
}
//Add JSON object
if($scope.zcJson){
mergeObject($scope.zcJson, _json.data);
}
//Add Values
if($scope.zcValues){
injectValues($scope.zcValues, _json.data);
}
//Add other properties
_json.data.type = ($attrs.zcType) ? $attrs.zcType : _json.data.type;
_json.height = ($attrs.zcHeight) ? $attrs.zcHeight : _json.height;
_json.width = ($attrs.zcWidth) ? $attrs.zcWidth : _json.width;
_json.id = id;
//Set the box-model of the container element if the height or width are defined as 100%.
if(_json.width === "100%" && !$element.css('width')){
$element.css('width', '100%');
}
if(_json.height === "100%" && !$element.css('height')){
$element.css('height', '100%');
}
zingchart.render(_json);
}
you need to use defaults instead of theme : please check attached fiddle ,
let me know is it the same thing you are looking?
zingchart.render({
id : 'myChart',
data : $scope.data,
height : 300,
width : 500,
defaults: $scope.myTheme
});
https://jsfiddle.net/omix3379/4k0v06cL/
Thanks.
I define a drawing panel and some components which are connected each other with SVG paths. I need to redraw connection paths on surface when moving components.
there is my drawing panel
{
xtype : 'panel',
flex : 5,
split : true,
region : 'center',
plain : true,
itemId : 'idCenterRegion',
id : 'centerRegion',
border : 1,
layout : {
type : 'fit',
},
defaults : {
autoScroll : true
},
listeners : {
afterrender : 'setDDTarget'
},
items: [{
xtype : 'draw',
itemId : 'idDrawPanel',
renderTo:Ext.getCmp('centerRegion'),
}]
}
The floating windows are adding to centerregion with draw/drop. there is another controller to draw sprites on surface,
printPath : function(drawItem) {
var source=drawItem.source;
var target=drawItem.target;
var surface = Ext.getCmp('centerRegion').down('draw')
.getSurface('main');
var color = "#000";
var line1,line2;
var posSource=[];
var posTarget=[];
if(source.left<target.left){
posSource[0]=source.left+source.width;
posTarget[0]=target.left;
line1=15;
line2=-15;
}else{
posSource[0]=source.left;
posTarget[0]=target.left+target.width;
line1=-15;
line2=15;
}
posSource[1]=source.top+source.height/2;
posTarget[1]=target.top+target.height/2;
var path = [ "M", posSource[0],
posSource[1], "H",
posSource[0] + line1, "L",
posTarget[0] + line2, posTarget[1], "H",
posTarget[0] ].join(",");
surface.add({
type : 'path',
path : path,
stroke : color,
fill : 'none',
'stroke-width' : 2,
surface : surface,
}).show(true);
},
When connecting any items on this panel it draws sprites but not showing on browser. but if I re-size drawing panel or browser window, sprites are shown,
I couldn't find any reason why its happening.
should I refresh view by using a different way?
That is the result before re-sizing screen, but add sprite method completed successfully.
This screenshot is after re-size height of center region, as you see, sprite is visible now. But any event didn't fire manually on re-size action.
I solved the problem,
It looks like a trick but draw container is working well now.
I called manually draw container's resizeHandler on draw container's 'add' listener.
It fires only one time when adding child windows on centerRegion (at first adding).
There is my solution below, firstly give an 'add listener reference to draw container:
{
xtype : 'draw',
itemId : 'idDrawPanel',
renderTo:Ext.getCmp('centerRegion'),
listeners : {
add: 'addToDrawPanel'
},
}
function:
addToDrawPanel:function( d, component, index, eOpts ){
var s=d.getSize();
var rh= d.getResizeHandler();
rh.call(d,s);
}
I want to get the password. A simple text input dialog box. Any simple way to do this?
In iPhone it creates like this.
style : Ti.UI.iphone.AlertDialogStyle.SECURE_TEXT_INPUT
But in android how can I do thi??
Use the androidView property in a UI.AlertDialog and add a TextField.
Currently Appcelerator does not provide such facility. But you can do it in a simple way by using a view, textField and button as follows
var vwAlert = Ti.UI.createView({
backgroundColor : '#311919',
width : '90%',
height : '40%',
layout : 'vertical',
borderRadius: 5
});
var lblMessage = Ti.UI.createLabel({
text : 'Alert',
top : 10,
color : 'white',
font : {fontWeight : 'bold', fontSize : '16'}
});
var textField = Ti.UI.createTextField({
width : '90%',
top : '20',
passwordMask: true,
hintText : 'Enter your text here',
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType : Ti.UI.RETURNKEY_RETURN,
maxLength : 70
});
var btnOK = Ti.UI.createButton({
title : 'OK',
width : '43%',
top : '25',
font : {fontWeight : 'bold', fontSize : '16'}
});
vwAlert.add(lblMessage);
vwAlert.add(textField);
vwAlert.add(btnOK);
The above view will look like an alert dialog box since it's customized one. This will do the trick :)
you need an EditText with android:inputType="textPassword"
EditText tf = new EditText(context);
tf.setTransformationMethod(PasswordTransformationMethod.getInstance());
or in xml
android:inputType="textPassword"
I have created a Ext.Panel object, it rendered properly to specified div element on my page.
I want to replace the panel object underlying element(previously rendered div element) to another div which will be identified dynamically.
Here I don't want to create the Panel object once again by specifying identified div element, I need to make use of existing panel object and need to show the panel in the place where the identified div exists.
Can any one helps me regarding this.
Thanks
Venkat
If you create your panel as a custom extension, with it's own namespace:
Ext.namespace('My.Panel');
My.Panel.SomePanel = Ext.extends(Ext.Panel,{
// Your custom panel configuration here
itemId:'myPanel'
});
Ext.reg('mypanel',My.Panel.SomePanel);
Then you can create your panel whenever it might be needed, even referencing it by the xtype you've registered:
var myWin = new Ext.Window({
title:'Some Title',
height: 300,
width: 300,
items:[{
xtype: 'mypanel',
data: someData
}]
});
var myTabs = new Ext.TabPanel({
title: 'Some Tab Panel',
activeTab: 0,
items:[{
xtype: 'mypanel',
title: 'SomePanel number 1'
}]
});