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/
Related
How to set a particular row in grid as the first row in the grid I have tried selecting the row as shown below
var grid = interface.down('directorReviewGrid');
store.removeAll();
store.load({
params: {
workflow_stage: workflow_stage
},
callback: function(records, operation, success) {
var rowIndex = this.find('id', id);
/*where 'id': the id field of your model,
record.getId() is the method automatically created by Extjs.
You can replace 'id' with your unique field.. And 'this' is your store.*/
grid.getView().scrollRowIntoView(rowIndex);
grid.getView().select(rowIndex);
}
});
You can implement using store.insert( 0, records ) and for go to particular that, you can use grid.getView().focusRow(rowIdx).
You can check in this working FIDDLE. Hope this will help/guide you to achieve your requirement.
CODE SNIPPET
var char = 'ABCDEFGHJKLIMNOPQRSTUVWXYZ';
function getRandomNumber() {
return Math.floor(Math.random() * 26);
}
function getRandomName() {
let name = '';
for (let i = 0; i < 6; i++) {
name += char.charAt(getRandomNumber());
}
return name;
}
function getData() {
let data = [];
for (let key = 0; key < 100; key++) {
data.push({
id: key,
name: getRandomName()
})
}
return data
}
Ext.create('Ext.data.Store', {
storeId: 'gridstore',
fields: ['id', 'name'],
data: getData()
});
Ext.create('Ext.grid.Panel', {
title: 'Focus to Row',
store: 'gridstore',
columns: [{
text: 'ID',
dataIndex: 'id'
}, {
text: 'Name',
dataIndex: 'name',
flex: 1
}],
height: window.innerHeight,
renderTo: Ext.getBody(),
tbar: ['->', {
text: 'Move Selected Row to First',
handler: function () {
var grid = this.up('grid'),
store = grid.getStore(),
selctionM = grid.getSelectionModel(),
rec = selctionM.getSelection()[0];
//If selected record is available
if (rec) {
store.remove(rec) //First the remove the store
store.insert(0, rec); //Insert into 1st postion
selctionM.select(rec); //Select same record
grid.getView().focusRow(rec); //Focuses a particular row and brings it into view. Will fire the rowfocus event.
} else {
Ext.Msg.alert('Info', 'Please select any row');
}
}
}]
});
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();
}
I'm a new programmer and I'm trying to create some interactive elements with extJS and Easel...
I have a button and when you click it it overlay's an image... but I want to be able to toggle the image on and off... I tried using toggleHandler and enable toggle but stuff isn't working.
here's my code:
Ext.define('EaselWindow', {
width: 1000,
height: 750,
extend: 'Ext.Window',
html: '<canvas id="demoCanvas" width="1000" height="750">'
+ 'alternate content'
+ '</canvas>'
,afterRender: function() {
this.callParent(arguments);
stage = new createjs.Stage("demoCanvas");
//var myImage = new createjs.Bitmap("dbz.jpg");
//stage.addChild(myImage);
//stage.update();
var myImage = new Image();
myImage.src = "dbz.jpg";
myImage.onload = setBG;
function setBG(){
var bgrd = new createjs.Bitmap(myImage);
stage.addChild(bgrd);
stage.update();
bgrd.addEventListener("click", function(){
var seed = new createjs.Bitmap("seed.jpg");
seed.alpha = 0.5;
seed.x = stage.mouseX-10 ;
seed.y = stage.mouseY-10 ;
stage.addChild(seed);
stage.update();
}); //end addeventlistener
}
}, // end after render func
items:[{
itemId: 'button1',
xtype: 'button',
text: 'click the button',
visible: true,
enableToggle: true,
listeners: {'click':
function(){
var overlay = new createjs.Bitmap("stuff.jpg");
overlay.alpha = 0.5;
stage.addChild(overlay);
stage.update();
}// end func
}
},{
itemId: 'button2',
xtype: 'button',
text: 'button2'
}]
}); // end define
Ext.create('EaselWindow', {
title: "Ext+Easel",
autoShow: true
}); //end easelwindow
});
I was thinking I could somehow make an if statement with removeChild... but I couldn't get it to work, I tried something like
function(button1, state){
if(this.state=true){
var overlay = new createjs.Bitmap("stuff.jpg");
overlay.alpha = 0.5;
stage.addChild(overlay);
stage.update();
}
else
{stage.removeChild(overlay);
stage.update();
}
}// end func
awww I figured it out by using
toggleHandler:
function(button, pressed){
if(button.pressed==true){
overlay = new createjs.Bitmap("stuff.jpg");
overlay.alpha = 0.5;
stage.addChild(overlay);
stage.update();
}
else
{stage.removeChild(overlay);
stage.update();
}
}// end func
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);
// ...
There are quite few solutions on Ext forums, but I wasn’t able to get any of them work. It seems I am missing something minor.
I need to resize combobox to fit its content when it’s first created. I do not need to worry about resizing it when content is changing.
Is there any working examples using Extjs 3.2?
Current Code:
var store = new Ext.data.ArrayStore({
fields: ['view', 'value', 'defaultselect'],
data: Ext.configdata.dataCP
});
comboCPU = new Ext.form.ComboBox({
tpl: '<tpl for="."><div class="x-combo-list-item"><b>{view}</b><br /></div></tpl>',
store: store,
displayField: 'view',
width: 600,
typeAhead: true,
forceSelection: true,
mode: 'local',
triggerAction: 'all',
editable: false,
emptyText: 'empty text',
selectOnFocus: true,
listeners: { select: AdjustPrice, change: AdjustPrice, beforeselect: function (combo, record, index) { return ('false' == record.data.disabled); } },
applyTo: 'confelement'
});
I've also tried removing width: 600 and replacing it with minListWidth: 600 but that result following and didnt fix the issue.
alt text http://img28.imageshack.us/img28/7665/4272010105134am.png
Try the following:
Determine the list-box option with the most chars
Create a div and set the option with the most chars
Append this div to the body
Get the div's clientWidth
Below codes works in ExtJs 3.2!
myStore = new Ext.data.Store({
...
listeners : {
load: function() {
var maxValue = "";
var charLen = 0, maxCharLen = 0;
var maxListWidth = 300;
/**
* This is a work-around since the 'listWidth' property
* does not accept any values that would simulate auto-resize
* in reference to the category with the most characters.
*/
this.data.each(function(item, index, totalItems ) {
var nameValue = item.data['name']; // 'name' is the field name
if(nameValue == null || nameValue == ''){
// do nothing
}else {
charLen = nameValue.length;
if(charLen > maxCharLen){
maxCharLen = charLen;
maxValue = nameValue;
}
}
});
if(maxValue != ""){
var divEl = document.createElement('div');
divEl.id = 'tempEl';
divEl.style.display = "inline";
divEl.className = "x-combo-list";
divEl.innerHTML = maxValue;
document.body.appendChild(divEl);
// check if appended
divEl = document.getElementById('tempEl');
if(divEl) {
var divWidth = divEl.clientWidth;
if(divWidth == 0 ) {
divEl.style.display = "inline-block";
divWidth = divEl.clientWidth;
}
// the allocated width for the scrollbar at side of the list box
var scrollbarWidth = 30;
// make sure that column width is not greater than
if((divWidth + scrollbarWidth) > maxListWidth) {
maxListWidth = divWidth + scrollbarWidth;
myCombo.listWidth = maxListWidth;
}
document.body.removeChild(divEl);
}
}
}
});
var myCombo = new fm.ComboBox({
...
});
try
autoWidth: true
and remove the width parameter
width: 600 is correct, so you must have some other issue going on that's not obvious from what you posted. You might try removing the applyTo config and instead put renderTo: Ext.getBody() just to see if it has something to do with how it's applied to your element. Are you sure there is not some other code that could be affecting the width?
Found here:
// throw this stuff in a closure to prevent
// polluting the global namespace
(function(){
var originalOnLoad = Ext.form.ComboBox.prototype.onLoad;
Ext.form.ComboBox.prototype.onLoad = function(){
var padding = 8;
var ret = originalOnLoad.apply(this,arguments);
var max = Math.max(this.minListWidth || 0, this.el.getWidth());
var fw = false;
Ext.each(this.view.getNodes(), function(node){
if(!fw){ fw = Ext.fly(node).getFrameWidth('lr'); }
if(node.scrollWidth){ max = Math.max(max,node.scrollWidth+padding); }
});
if( max > 0 && max-fw != this.list.getWidth(true) ){
this.list.setWidth(max);
this.innerList.setWidth(max - this.list.getFrameWidth('lr'));
}
return ret;
};
})();