I created 2 panels like that with the framework ExtJS (i know it's not the best way):
var panel = Ext.create("Ext.panel.Panel", {
title: "first panel",
width: 400,
height: 250,
renderTo: Ext.getBody(),
html: "test 1"
});
panel = Ext.create("Ext.panel.Panel", {
title: "second panel",
width: 400,
height: 250,
renderTo: Ext.getBody(),
html: "test 2"
});
Now I have 2 panels in my browser. And now if I do this:
panel.destroy();
It destroys only the last one.
So my question is : How can I destroy the first panel? Is there a method which contains all the panels in the browser? Do I store the IDs' panels each time in order to destroy them later?...
Try this:
var objArray = Ext.ComponentQuery.query("Ext.panel.Panel");
objArray contains all the panel objects.
Now run a for loop and destroy all the objects .
If you make them different variables (or an array that you manage), you can destroy them individually:
var panel1 = Ext.create("Ext.panel.Panel", {
...
});
var panel2 = Ext.create("Ext.panel.Panel", {
...
});
panel1.destroy();
panel2.destroy();
Or this:
var panels = [];
var panels[0] = Ext.create("Ext.panel.Panel", {
...
});
var panels[1] = Ext.create("Ext.panel.Panel", {
...
});
for (var i=0; i<panels.length; i++)
{
panels[i].destroy();
}
Related
I'm trying to load an image on canvas using Backbone + KineticJS. However the image doesn't seem to appear.
First I load the images using a model. (I'm loading the image locally so its already available)
var KineticModel = Backbone.Model.extend({
myImg: null,
createImg : function() {
var imageObj = new Image();
var kinImg = new Kinetic.Image()
imageObj.onload = function() {
kinImg.setAttrs({
x: 10,
y: 10,
image: imageObj,
width: 578,
height: 400
})
}
imageObj.src = 'test/img/vader.png';
return kinImg;
}
});
Then create the View
var KineticView = Backbone.View.extend({
id: 'container',
stage: null,
layer: null,
initialize: function (options) {
model: options.model;
el: options.el;
this.layer = new Kinetic.Layer();
this.stage = new Kinetic.Stage({ container: this.el, width: 600, height: 600 });
this.stage.add(this.layer);
},
render: function () {
var myImg = this.model.createImg();
this.layer.add(myImg);
this.stage.add(this.layer);
this.stage.draw();
}
});
Finally to tie it all up
var KModel= new KineticModel({});
var imgcontainer = $('#container').get();
view = new KineticView({model:KModel, el:imgcontainer});
view.render();
The page loads without any errors, but no image.
Console logs show that the Image Models have been passed to the layers.
Any help will be greatly appreciated!
Redraw layer after setting attrs:
kinImg.setAttrs({
x: 10,
y: 10,
image: imageObj,
width: 578,
height: 400
});
yourLayer.draw();
Note: you are working with view (Kinetic object) inside Backbone.Model - this is bad approach. Model should works only with data. Move createImg function to View.
Also look at this plugin: https://github.com/slash-system/backbone.kineticview
Am complete stranger to Extjs. I have a requirement to allow multi select in the Extjs tree. Below piece of code is doing single select. i need to change the code to make it multi select with semi-colon between selected ids. Can anyone please change the code as per the requirement. Also if you could tell me to which field or variable the selected value of the tree is written into. Thanks in advance
Ext.onReady(function() {
Ext.QuickTips.init();
var str='';
var switch_flag = '';
var approvals = '';
var active_mode = '';
var json = null;
Ext.Ajax.request({
url: 'Dmscategorytree/ajax/Message',
method: 'POST',
params:{
lifecycle_id: str,
switch_flag: switch_flag,
approvals: approvals,
active_mode: active_mode
},
success: function(response, options) {
var path='';
var id='';
var text='';
json=response.responseText;
alert(json);
json = json.replace(/"/g,'\"');
json=Ext.util.JSON.decode(json);
var flag=true;
var myloader = new Ext.tree.TreeLoader();
myloader.load = function(node, cb,scope) {
if(this.clearOnLoad){
while(node.firstChild){
node.removeChild(node.firstChild);
}
}
if(this.doPreload(node)){
this.runCallback(cb, scope || node, [node]);
}
cb();
}
var tree = new Ext.tree.TreePanel({
animate:true,
autoScroll:true,
//loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
containerScroll: true,
border: false,
loader:myloader,
rootVisible: false,
listeners:{
checkchange:function(node){
if(flag){
toggleCheck(tree.root,false,node.id);
path=node.attributes.value;
id=node.attributes.ID;
text=node.attributes.text;
path=path.replace(/\^/g,'/');
}
}
}
});
function SelectToParent()
{
try
{
parent.window.opener.callParent(path,id);
parent.window.opener.focus();
parent.window.close();
}
catch(e){
alert('got exception');
window.close();
}
}
function toggleCheck(node,isCheck,nodeId)
{
flag=false;
if(node)
{
var args=[isCheck];
node.cascade(function(){
c=args[0];
if(nodeId!=this.id){
this.ui.toggleCheck(c);
this.attributes.checked=c;
}
},null,args);
}
flag=true;
return true;
}
var root = new Ext.tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false, // disable root node dragging
id:'src',
children: json
});
tree.setRootNode(root);
var topbar = new Ext.Toolbar({
region : 'north',
height:30,
margins: '0 0 0 5',
items:[
{
xtype: 'box',
id: 'title',
autoEl: {
html: '#label.chooseCat#'
}
,width:525
},
{
text: '#label.Done#',
id: 'doneBtn',
tooltip: 'Done',
handler: SelectToParent
}
]
});
topbar.render('tree');
tree.render('tree');
tree.getRootNode().expand();
}
});
});
Please refer the following links,
pass two id s in extjs 4 tree multiSelect and pass one id in single click
Multiselect Tree & Drag and Drop
Drag and Drop between Grid and “multiselect” control in EXTJS
Demo
The following should be trivial, but I cannot get it to work:
I have the following Ext.form.Panel:
Ext.define('EvaluateIt.view.SiteEvaluationForm', {
extend: 'Ext.form.Panel',
alias : 'widget.siteEvaluationForm',
id: 'evaluationId',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Url',
'Ext.field.Select',
'Ext.field.Hidden'
],
config: {
// We give it a left and top property to make it floating by default
left: 0,
top: 0,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Set the width and height of the panel
//width: 400,
//height: 330,
width: Ext.os.deviceType == 'Phone' ? screen.width : 300,
height: Ext.os.deviceType == 'Phone' ? screen.height : 500,
scrollable: true,
layout: {
type: 'vbox'
},
defaults: {
margin: '0 0 5 0',
labelWidth: '40%',
labelWrap: true
},
items: [
{
xtype: 'textfield',
name: 'address',
label: 'Address',
itemId: 'address'
},
{
xtype: 'hiddenfield',
itemId: 'imageUriId',
name: 'imageUri'
},
{
xtype: 'button',
itemId: 'siteImage',
text: 'Take Photo'
},
{
xtype: 'button',
itemId: 'save',
text: 'Save'
}
]
}
});
Which gets opened from an onItemDisclosure in a list view, and thus has a record bound to it.
When the 'siteImage' button is tapped, the user selects an image from the photo gallery and the uri is written to a temporary store for processing. This part works just fine.
What I need to do: When 'save' in the above form is tapped I need to take the uri from the temporary store and write it to the same store that all of the values from the above form get saved to.
To do this, I have the following method:
onSaveSiteEvaluation: function(button) {
console.log('Button Click for Save');
//var form = button.up('panel');
var form = Ext.getCmp('evaluationId');
//get the record
var record = form.getRecord();
//get the form values
//var values = form.getValues();
// return a clone for updating of values
var values = Ext.clone(form.getValues());
//if a new siteEvaluation
if(!record){
var newRecord = new EvaluateIt.model.SiteEvaluation(values);
Ext.getStore('SiteEvaluations').add(newRecord);
}
//existing siteEvaluation
else {
// get image uri from temp store
var images = Ext.create('EvaluateIt.store.ImageQueue');
images.queryBy(function(record,id){
images = Ext.getStore(images);
if (images.getCount() > 0) {
var uri = record.get('src');
// image = Ext.getCmp('imageUri');
//image = form.setValue(uri);
//form.getCmp('imageId').setValue(uri);
console.log('URI: ' + uri);
// THIS DOES NOT WORK!!
form.setValues({
imageUri: uri
})
//record.set('imageUri',uri)
console.log('imageUri: '+ record.get('imageUri'));
}
});
// do stuff
record.set(values);
}
form.hide();
//save the data to the Web local Storage
Ext.getStore('SiteEvaluations').sync();
},
Everything in this method works EXCEPT where I write the value of the uri to the form
form.setValues({
imageUri: uri
})
I've tried making 'uriImage' as an xType of hiddenfield and textfield, I've tried cloning the values from the form, etc. all with absolutely no luck in updating the actual attribute imageUri in the store (NOTE: All other form values are updated just fine). What am I missing? Thanks!
UPDATE
This works:
images.queryBy(function(iRecord,id){
images = Ext.getStore(images);
if (images.getCount() > 0) {
var uri = iRecord.get('src');
// update store with URI
form.setValues({
imageUri: uri
})
values = form.getValues();
record = form.getRecord();
}
});
// do stuff
record.set(values);
All's well that ends well!
Because Ext.form.Panel doesn't have setValue method. You first need to get basic form out of it:
form.getForm().setValue();
UPDATE: My bad, I was looking at the ExtJs docs and not Sencha Touch. your form does have setValue method.
After you call setValues(), can you go getRecord() again? Also looks like your record internal variable is defined twice. That should not be an issue, but...
How to execute loop in XTemplate particular number of times
Following does not work
<tpl for="5">
...
</tpl>
Regards,
kkris1983
The only way I think this works is where you fill a variable with 5 items, like this:
Ext.onReady(function () {
var panel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'test',
height: 300,
width: 300
});
var total = 5;
var data = {
count: []
};
for (var i = 1; i <= 5; i++) {
data.count.push(i);
}
var tpl = [
'<tpl for="count">',
'{.}<br>',
'</tpl>'];
var t = new Ext.XTemplate(tpl);
panel.update(t.apply(data));
});
fiddle: http://jsfiddle.net/johanhaest/2WEVE/3/
I'm having real difficulty getting access to a variable that is an attribute of an extended FromPanel from within a button handler on the form. If anyone could offer assistance I'd greatly appreciate it.
Example form where I try to access myAttribute from within the handler of updateUnitsButton:
TrainOverviewPanel = Ext.extend(Ext.FormPanel, {
myAttribute: undefined
,initComponent:function() {
var unitIdField1 = new Ext.form.TextField({
itemId: 'unitIdField1',
flex: 1
});
var unitIdField2 = new Ext.form.TextField({
itemId: 'unitIdField2',
flex: 1
});
var unitIdField3 = new Ext.form.TextField({
itemId: 'unitIdField3',
flex: 1
});
var unitIdFields = new Ext.form.CompositeField({
itemId: 'unitIdFields',
items: [unitIdField1, unitIdField2, unitIdField3],
width: 200
});
var updateUnits = function() {
alert("How can I access attribute: " + this.myAttribute);
}
var updateUnitsButton = new Ext.Button({
tdoId: undefined,
text: 'Update',
handler: updateUnits,
width: 50
});
var updatableUnitIdFields = new Ext.form.CompositeField({
readOnly: false,
fieldLabel: 'Unit ID',
itemId: 'updatableUnitIdFields',
items: [unitIdFields, updateUnitsButton],
width: 300
});
Ext.apply(this, {
width: 450,
height: 130,
margins:'10 0 0 0',
items: [ updatableUnitIdFields ]
});
TrainOverviewPanel.superclass.initComponent.apply(this, arguments);
}
,onRender:function() {
TrainOverviewPanel.superclass.onRender.apply(this, arguments);
}
,refresh: function(data) {
this.myAttribute = data.myAttribute;
var unitIdFields = this.getComponent('updatableUnitIdFields').items.get(0);
unitIdFields.items.get(0).setValue(data.stockId1);
unitIdFields.items.get(1).setValue(data.stockId2);
unitIdFields.items.get(2).setValue(data.stockId3);
}
});
You can do it using two ways.
The first one
using closure:
// ...
var me = this;
var updateUnits = function() {
alert("How can I access attribute: " + me.myAttribute);
};
var updateUnitsButton = new Ext.Button({
tdoId: undefined,
text: 'Update',
handler: updateUnits,
width: 50
});
// ...
The second one
by sending scope variable to handler:
// ...
var updateUnits = function() {
alert("How can I access attribute: " + this.myAttribute);
};
var updateUnitsButton = new Ext.Button({
tdoId: undefined,
text: 'Update',
//handler: updateUnits,
width: 50
});
updateUnitsButton.on('click', updateUnits, this);
// ...