I create a class of Button and I want that button will appear on number of selection in checkbox. Right now button is appearing only one even though I selected multiple checkbox.
So far I done
I creating button class.
Added into an array
Placing this array in items of panel.
Button class
Record = Ext.extend(Ext.Container,{
initComponent: function(){
var p=this;
p.bodyPadding = 5;
p.margin = '5 5 0 3';
p.layout = 'anchor';
p.items = [{
xtype: 'button',
text : 'Hello
}];
Record.superclass.initComponent.apply(this, arguments); }});
Adding into array in function :
getRecords: function () {
var RecItems[];
recLength = Ext.getCmpBy('Rec').length
var clsName;
clsName = new Record (),
for(var i=0;i<recLength; i++){
var item = Ext.create(clsName,{
});
RecItems.push(item);
}
return RecItems;
}
Calling this in panel
{xtype:'panel',
title : "Records",
bodyStyle: 'background: #dfe8f6;border:#dfe8f6;',
autoScroll: true,
region: 'center',
layout:{
type: 'anchor',
pack: 'start',
align: 'stretch'
},
items: p.getRecords()
}
Related
Is it possible to add one container in two different panels? I tried doing something like this
var container = Ext.create('Ext.container.Container', {
//container content
});
var panel1 = Ext.create('Ext.form.Panel', {
//panel1 content
items : [container]
});
var panel2 = Ext.create('Ext.form.Panel', {
//panel2 content
items : [container]
});
But it adds the container only in the second Panel
Here is a Fiddle
It depends a little bit on your use case.
If you feel fine rendering the container two times you can just pass the config of the container to your panels:
var container = {
//container content
items: {
xtype: 'displayfield',
value: 'container content'
}
};
var panel1 = Ext.create('Ext.form.Panel', {
//panel1 content
renderTo: Ext.getBody(),
title: 'panel1',
items: container
});
var panel2 = Ext.create('Ext.form.Panel', {
//panel2 content
renderTo: Ext.getBody(),
title: 'panel2',
items: container
});
For reusing the instance and placing the same instance two times on different positions in the dom i see no way of achieving that. I even think its not doable at all, but maybe someone else can teach me how to do it in a clean and cozy way ;)
var container = {
items: [{
xtype: 'button',
text : 'select',
handler: function() {
alert(this.up('form').getTitle()+ " clicked");
}
}]
};
var panel1 = Ext.create('Ext.form.Panel', {
//panel1 content
renderTo: Ext.getBody(),
title: 'panel1',
items: container
});
var panel2 = Ext.create('Ext.form.Panel', {
//panel2 content
renderTo: Ext.getBody(),
title: 'panel2',
items: container
});
container is rendered on both panels.
I have added a tab panel in Extjs. When i click on second tab i would like to see a component in header area of tab panel,
at red mark, below in the image.
For a tabpanel component follows another suggestion:
Ext.application({
name : 'TabPanelHeaderButton',
launch : function() {
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Foo'
},{
title: 'Foo 1'
}],
tabBar: {
items: [{
xtype: 'tbfill'
},{
xtype: 'button',
text: 'Button',
padding: '3px',
margin: '2px 5px 2px 2px',
handler: function(){
alert ('Button click')
}
}]
}
});
}
});
I am not sure whether you can insert button inside tab panel or not.
I have an alternative. Create a floating panel with required button inside it and show this floating panel at required position .
showButtonNextToLastTab : function(){
var me = this;
var lastTab = me.getLastTabInTabPanel();
var tabWidth = lastTab.getWidth();
var tabHeight = lastTab.getHeight();
var btnContainer = Ext.getCmp('btnContainer');
if(btnContainer == null) {
btnContainer = Ext.create('Ext.panel.Panel',{
id: 'btnContainer',
cls: 'btnContainerCls',
floating: true,
shadow : false,
height : 50,
items : [
{
xtype : 'button',
id : 'myRequiredButton',
text:'Button',
cls:'requiredBtnCls',
minWidth : tabWidth,
height : tabHeight
}
]
});
}
btnContainer.showBy(lastTab,'tl-tr',[-2,0]);
},
getLastTabInTabPanel : function(){
var me = this;
var tabPanel = Ext.getCmp('myTabPanel');
if(tabPanel){
var tabBar = tabPanel.getTabBar();
var noOfTabs = tabBar.items.items.length;
return tabBar.items.get(noOfTabs-1);
}
return null;
}
destroyButtonContainerPanel : function(){
var btnContainer = Ext.getCmp('btnContainer');
if(btnContainer != null)
btnContainer.destroy();
}
Call showButtonNextToLastTab method when you want to show this button to show up and call destroyButtonContainerPanel method when you want to hide this button.
Note : 'myTabPanel' is id of tabPanel in which you want to insert this button.
See if this helps..
I am reading data from store and populating main girdView. When any of the row is clicked, a windows appear and I want to fill the fieldset in that window with the same record which is clicked.
Can anyone tell me how to do it?
My popup window is like:
{
extend: 'Ext.window.Window',
height: 500,
width: 1500,
minWidth :1500,
maxWidth :1500,
layout: 'fit',
controller: 'PopUpWindowController',
initComponent: function () {
var me = this;
//console.log(me.myExtraParams);
var Store = Ext.getStore('mainStore');
Ext.applyIf(me, {
/* items: [{
xtype: 'form',
bodyPadding: 10,
region: 'center'
}]*/
});
me.callParent(arguments);
},
items: [
{
xtype: 'panel',
title : 'Projektierung',
bodyStyle : 'padding:5px',
width : 1880,
autoHeight : true,
items:
[
{
xtype : 'kopfdatenView', // Have to populate this view
}
]
}]}
and in Main view I am calling it as:
{
region: 'center',
xtype: 'gridpanel',
listeners : {
itemdblclick: function(dv, record, item, index, e) {
var extra = record.data;
win = Ext.create('App.view.PopUpWindow');
console.log(win.myExtraParams);
win.on('show', function(win) {
win.setTitle(record.get('ID'));
});
win.show();
}
},
columns: [
****
],
store: 'mainStore',
height: 100,
width: 400,
}
I want to populate fieldset in kopfdatenView. Kindly help
You directly pass your record to your window on creation :
win = Ext.create('App.view.PopUpWindow', {
myRecord: record
});
And then inside the window's initComponent function (before the callParent) :
this.title = this.myRecord.get('ID');
You can do something like this:
win = Ext.create('App.view.PopUpWindow', {
params: record
});
Then, in your PopUpWindowController you can retrieve 'params' in the render event (for example).
I have two menus (myMenu1 and myMenu2) and one window (myWin). How can I dynamically change the menu that is displayed in the window.
I need a code that will dynamically change the value of items in myWin.
var myMenu1 = new Ext.Toolbar({
width: 700,
items: [{
xtype: 'tbbutton',
text: 'Add',
icon: 'add_icon.gif',
handler: displayFormWindow
}]
});
var myMenu2 = new Ext.Toolbar({
width: 700,
items: [{
xtype: 'tbbutton',
text: 'Delete',
icon: 'del_icon.gif',
handler: displayFormWindow
}]
});
var myWin = new Ext.Window({
id: 'myWin',
height: 450,
width: 710,
// items: myMenu1
// items: myMenu2
});
Simply add the menus: myWin.add(myMenu1, myMenu2);
API is here: http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Window-method-add
try with extend your windows and then add custom method
here is sample code
myWindow = new Ext.extend(Ext.Window,{
constructor:function(config){
// add your code here
myWindow.superclass.constructor.call(this);
},
addMethod: function(){
// add your code here
myWindow.superclass.show.call(this);
},
deleteMethod: function(){
// add our code here
myWindow.superclass.show.call(this);
}
});
I have a page where there are multiple records. Each record has a button to open a dialog box to create a name. The name then creates a related record in the database and updates the source record.
There is a single dialog box instantiated and I want to show the dialog box, get the result and return it to the correct record.
The code below works once but doesn't work the second time. I can see the the Create button gets clicked but the event doesn't got caught.
Many thanks for your help.
TrailNamePresenter.prototype.onCreateTrailClick = function (trailSegment, combo, personalRouteId) {
if (!this.createTrailWindow) {
this.createTrailWindowPanel = new CreateTrailFormPanel();
this.createTrailWindow = new Ext.Window({
title: 'Create Trail',
closable: true,
closeAction: 'hide',
plain: true,
items: [this.createTrailWindowPanel],
id: 'createtrailwindow'
});
}
this.createTrailWindowPanel.on('createTrail', this.getCreateTrailHandler(personalRouteId, trailSegment, combo), null, {single:true});
this.createTrailWindow.show();
};
TrailNamePresenter.prototype.getCreateTrailHandler = function(personalRouteId, trailSegment, currentTrailCombo) {
var thisPersonalRouteId = personalRouteId;
var thisPresenter = this;
var thisCurrentTrailCombo = currentTrailCombo;
var thisTrailSegment = trailSegment;
return function(newTrailName) {
thisPresenter.mapEditorService.createPersonalTrail(newTrailName, thisPersonalRouteId, thisPresenter.getCreateTrailServiceHandler(thisCurrentTrailCombo, thisTrailSegment));
};
};
CreateTrailFormPanel = Ext.extend(Ext.form.FormPanel, {
initComponent: function() {
Ext.apply(this, {
id: 'createtrailpanel',
width: 500,
frame: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 50,
defaults: {
anchor: '95%',
msgTarget: 'side'
},
items: [
{
id: 'crt_trailnamefield',
xtype: 'textfield',
fieldLabel: 'Trail Name'
}
],
buttons: [{
text: 'Create',
handler: this.getCreateClickHandler()
},{
text: 'Cancel',
handler: function(b, e){
Ext.getCmp('createtrailwindow').hide();
}
}]
});
this.addEvents('createTrail');
CreateTrailFormPanel.superclass.initComponent.apply(this, new Array());
}
});
CreateTrailFormPanel.prototype.getCreateClickHandler = function() {
var thisPanel = this;
return function() {
var trailNameField = Ext.getCmp('crt_trailnamefield');
alert('click');
thisPanel.fireEvent('createTrail', trailNameField.getValue());
};
};
In ExtJS, when you have components that will belong to a parent. I would suggest using itemID, otherwise the ability of reuse of the component across your web application is reduced because id acts similarly to a singleton. Also on the action, you have {single:true} which will remove the listener after the first trigger. IF you remove that, it may solve your issue