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);
}
});
Related
I am using an EXTJS xtype: container to create a row and when I want to insert a row into the store the row gets added to the top of the existing row instead of the bottom, is there any way to add the newly created row to the bottom?
Below is the code:
somefunc: function (token, filter, op) {
var filter = Ext.create({
xtype: 'container',
height: 30,
cls: 'purge-filter-item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [
this.typeCombo = new Ext.form.ComboBox({
emptyText: $L('Select a filter...'),
store: this.menuStore = new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: this.getFilterValues()
})
})
]
});
this.insert(0, filter);
this.doLayout();
return filter;
}
Any idea why this could be happening and how to fix this?
Any idea why this could be happening and how to fix this?
Because you are using insert() method instead of this you can use add() method it will by default add in last index.
In this FIDDLE, I have created a demo using add() method to adding new component. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
title: 'Add new row',
renderTo: Ext.getBody(),
tbar: [{
text: 'Add new',
handler: function (btn) {
var panel = btn.up('panel');
panel.add({
xtype: 'container',
height: 30,
cls: 'purge-filter-item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [{
xtype: 'textfield',
emptyText:'enter value here',
fieldLabel:'this is field '+( panel.items.items.length+1)
}]
});
}
}]
})
}
});
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 these two windows defined as shown below. The functionality that I desire is that initially the grid window should be hidden and the login window should be shown. After the user logs in, the login window should be hidden and the grid window should be shown.
var store = new Ext.data.Store({
url: 'sheldon.xml',
reader: new Ext.data.XmlReader({
record: 'Item',
fields: [
{name: 'Title'},
{name: 'Author'},
{name: 'Manufacturer'},
{name: 'ProductGroup'}
]
})
});
LoginWindow = {};
gridWindow = {};
gridWindow.grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Title", width: 120, dataIndex: 'Title', sortable:true},
{header: "Author", width: 180, dataIndex: 'Author', sortable: true},
],
height:200,
viewConfig: {
forceFit:true
}
});
gridWindow = {
xtype: 'window',
id: 'grid',
title: 'Grid',
anchor: '30% 25%',
items:[gridWindow.grid],
frame:true,
layout:'card',
};
LoginWindow.loginForm = {
xtype:'form',
// url:'check.php',
frame: true,
labelAlign:'right',
labelWidth: 70,
items:[
{
xtype:'textfield',
fieldLabel:'Username',
anchor: '100%'
},
{
xtype:'textfield',
fieldLabel:'Password',
inputType:'password',
anchor: '100%',
}
],
buttons:[
{
text:'Login',
handler:
// Dummy function
function(btn, objc) {
Ext.getCmp('loginwindow').hide();
Ext.getCmp('grid').show();
store.load();
},
},
{
text:'Cancel',
handler:function(btn, objc) {
btn.findParentByType('form').getForm().reset();
}
}
]
};
LoginWindow = {
xtype: 'window',
id: 'loginwindow',
title: 'Please Log In',
anchor: '30% 25%',
activeItem: 0,
items:[LoginWindow.loginForm],
frame:true,
layout:'card',
bodyStyle:{}
};
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'anchor',
items:[
LoginWindow
]
});
Ext.getCmp('loginwindow').show();
Ext.getCmp('grid').hide();
});
When I load the page, I get the error Ext.getcmp('grid') is undefined in firefox.
Could someone please help me out here...
Your gridWindow only exists as an object literal (aka xtype config object) and is never 'instantiated' (created). Therefore Ext.getCmp cannot find it, because it doesn't 'exist' yet and hasn't been registered with Ext.ComponentManager.
You could add it to the Viewport and add hidden:true to its config definition so it doesn't show up.
gridWindow = {
xtype: 'window',
id: 'grid',
title: 'Grid',
anchor: '30% 25%',
items:[gridWindow.grid],
frame:true,
layout:'card',
};
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'anchor',
items:[
LoginWindow, gridWindow
]
});
// no need
//Ext.getCmp('loginwindow').show();
//Ext.getCmp('grid').hide();
});
Note: you might also need to call doLayout() on your viewport in your login handler after showing/hiding the components.
Looks like you first define LoginWindow.loginForm, but then redefine LoginWindow with a new object.
LoginWindow.loginForm = {
xtype:'form',
// url:'check.php',
LoginWindow is now set to an object literal with one property loginForm.
{
loginForm: [object]
}
Followed by
LoginWindow = {
xtype: 'window',
id: 'loginwindow',
This will create a completely new object and assign it to LoginWindow. The loginForm property is nowhere to be seen anymore ;)
I am try to research Extjs- grid. I created a button to display grid when click it. My code like below:
function onDisplay() {
Ext.onReady(function () {
var proxy = new Ext.data.HttpProxy({
url: 'server.jsp'
});
var reader = new Ext.data.JsonReader({}, [{
name: 'bookId',
mapping: 'bookId'
}, {
name: 'bookName'
}])
var gridStore = new Ext.data.Store({
proxy: proxy,
reader: reader
});
gridStore.load();
cols = [{
header: "bookId",
width: 60,
dataIndex: 'bookId',
sortable: true
}, {
header: "bookName",
width: 60,
dataIndex: 'bookName',
sortable: true
}];
var firstGrid = new Ext.grid.GridPanel({
store: gridStore,
columns: cols,
renderTo: 'example-grid',
width: 540,
height: 200
});
});
}
But when i click button N times -> it is displayed N grids. I only want display one grid and after click button it will get data from server again.
Please help me.
Thank you
You might want to look at some of the ExtJS Grid examples. They have lots of information about rendering grids from a store, and creating toolbars (which may include refresh buttons, for example). After cleaning up your example code a bit, I've come up with this:
Ext.onReady(function(){
var proxy=new Ext.data.HttpProxy( {url:'server.jsp'});
var reader=new Ext.data.JsonReader({},[
{name: 'bookId', mapping: 'bookId'},
{name: 'bookName'}
])
var gridStore=new Ext.data.Store({
proxy:proxy,
reader:reader
autoLoad:true
});
cols= [
{header: "bookId", width: 60, dataIndex: 'bookId', sortable: true},
{header: "bookName", width: 60, dataIndex: 'bookName', sortable: true}
];
var firstGrid = new Ext.grid.GridPanel({
store : gridStore,
columns : cols,
renderTo :'example-grid',
width :540,
height :200
});
//this code should ensure that only the grid updates,
//rather than rendering a whole new grid each time
var button = Ext.Button({
renderTo: "ButtonContainerId",
listeners: {
'click': function() {
gridStore.load()
}
}
})
});
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