I ask many Question, but Anybody no answer me...
please answer this question..
Hi, i'm novice at Extjs4
I use extjs4,
I make one component, like this
var child1 = Ext.create('Ext.form.Panel', {
xtype : 'panel',
title : 'child1',
html : 'child1'
});
and, I use this to Window 1, like this
var win1 = Ext.create('Ext.window.Window', {
title : 'window1',
height : 200,
width : 400,
layout : 'fit',
items : child1
}).show();
and I wanna use 'child1', another window, like this
var win2 = Ext.create('Ext.window.Window', { // setting
height : 200,
width : 200,
layout : 'fit',
title : 'window2',
items : child1
}).show();
but this is wrong Code.
it is just see in Window2.
but I wanna use 'child1' both win1 and win2...
How can i do that?, Thanks!
If you are going to use re-use a component, create a view and assign an alias using widget.*
Ext.define('MyApp.view.Child1', {
extend: 'Ext.panel.Panel',
alias: 'widget.child1',
html: 'child1'
});
Then, when you create your window you can reference by xtype.
var win1 = Ext.create('Ext.window.Window', {
title : 'window1',
height : 200,
width : 400,
layout : 'fit',
items : [{ xtype: 'child1'}]
}).show();
You can use both them just fine. But items is array - so you need to change it to items: [ child1 ]
Related
i'm new of Extjs; i have a panel with the item "collapsible: true" and it works fine but...
when my specific condition is true, i want to collapse the panel, and i want to disable the button used to expand it (therefore the panel doe not show anymore, even if the click is made).
It's possible do it?
I want a type of override method that doing other things, for example to show a div with few specific information in the page.
I use only javascript and Extjs.
thanks in advance and happy holidays
I added a bindable version
Fiddle
Using databinding to collapsible, you might also add the binding to the collapsed param
Please see my snippet. Can it resolve your issue ? Tell me if you have any question.
https://fiddle.sencha.com/fiddle/1fk9
Ext.application({
name : 'Fiddle',
launch : function() {
var parent = Ext.create('Ext.container.Container', {
title : 'Demo',
renderTo : Ext.getBody(),
layout : 'vbox',
items : [{
xtype : 'checkbox',
fieldLabel : 'Enable collapsible',
handler : function(self, v){
var panel = parent.down('panel');
panel.collapseTool.setVisible(v);
panel.getHeader().down('tool[type=up]').setVisible(!v);
},
checked : true
}, {
xtype : 'panel',
width : 500,
height : 400,
title : 'Collapsible demo',
collapsible : true,
tools : [{
type : 'up',
hidden : true
}]
}]
});
}
});
I'm creating a set of ExtJs Panels & TabPanel in a jsp page as:
//left panel
var leftpanel = new Ext.Panel({
id :'leftpane',
region:'west',
width: leftPaneDefaultWidth,
layout : 'fit',
header : false,
split:true
});
//right tabpanel
var rightpaneltab = new Ext.TabPanel({
id:'rightpanetabs',
border:false,
enableTabScroll: true,
region:'center'
});
//parent panel
var toppanel = new Ext.Panel({
id : 'main',
layout:'border',
renderTo : 'parentDiv',
items: [ leftpanel , rightpaneltab ]
});
Owing to a business requirement, I need to refresh/reload the contents within the rightpaneltab defined above.
Could someone pls suggest an optimal away of achieving this?
You can listen to events like painted, show, initialize and some others.
Check the documentation here: https://docs.sencha.com/extjs/6.7.0/modern/Ext.tab.Panel.html#event-initialize
initialize - Fires when the component has been initialized
painted - Fires whenever this Element actually becomes visible (painted) on the screen. This is useful when you need to perform 'read' operations on the DOM element, i.e: calculating natural sizes and positioning.
show - Fires whenever the Component is shown
Usage:
//left panel
var leftpanel = new Ext.Panel({
id :'leftpane',
region:'west',
width: leftPaneDefaultWidth,
layout : 'fit',
header : false,
split:true
});
//right tabpanel
var rightpaneltab = new Ext.TabPanel({
id:'rightpanetabs',
border:false,
enableTabScroll: true,
region:'center',
listeners: {
painted: function () {
// reload the content here
}
}
});
//parent panel
var toppanel = new Ext.Panel({
id : 'main',
layout:'border',
renderTo : 'parentDiv',
items: [ leftpanel , rightpaneltab ]
});
I created register panel and added toolbar with button during view initialization, In controller i am creating form panel and adding it to the register panel dynamically.
The toolbar in register panel is adjusting based on device screen but, The form panel width is not changing.
If i set width for the form panel, The form panel is floating and width remains the same.
This is what i done so for.
Ext.define('Form.view.RegisterForm',{
extend : 'Ext.Panel',
xtype : 'register',
id : 'register',
initialize : function() {
console.log("register init");
var submit = {
xtype : 'button',
width : '100px',
ui : 'action',
text : 'Submit',
handler : this.onSubmitTap,
scope : this
};
var topToolbar = {
xtype : 'toolbar',
docked : 'top',
id : 'registerToolbar',
title : 'Form',
items : [{
xtype : 'spacer'
}, submit]
};
this.add(topToolbar);
},
config : {
fullscreen : true,
layout : {
type : 'vbox'
},
title : 'Register'
},
onSubmitTap : function() {
console.log("onSubmit");
this.fireEvent('submitCommand', this);
}
});
In Register controller i adding fields dynamically
// RegisterFormController.js
oncreateForm : function() {
var form = {
xtype: 'formpanel',
flex : 1,
id: formId,
name: formId
};
Ext.getCmp('register').add(form);
}
// calling onCreateComponent method with xtype, label, value and fromId
onCreateComponent : function(fxtype,flabel,fname,fvalue,id) {
Ext.getCmp(id).add({
xtype: fxtype,
label: flabel,
name: fname,
value: fvalue,
labelWrap:true
});
}
In case any of you came up with same problem.
The mistake i did was "I added the 4 radio buttons in a hbox panel so width of that panel increased that's why the whole form panel not displaying properly in different devices".
After i changed the panel layout as vbox, The problem solved.
I am very new to Sencha and I am trying to get a button under a DataView in a Panel. I have tried different scenario's.
The View
Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',
requires : ['MyApp.store.UserStore', 'Ext.List', 'Ext.DataView', 'Ext.data.Store'],
initialize : function() {
var me = this;
var record = 1;
//Create the instance of the store and load it
var userStore = Ext.create('MyApp.store.UserStore');
userStore.load();
//Create the dataview
var view = Ext.create('Ext.DataView', {
store : userStore,
itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join()
});
//Add the dataview to the panel
me.add(view);
/**
var button = Ext.create('Ext.Button', {
text : 'Edit',
handler : function() {
Ext.Msg.alert('You clicked the button');
}
});
*/
//me.add(button);
},
config : {
title : 'Profiel',
iconCls : 'user3',
scrollable : true,
styleHtmlContent : true,
items : [{
xtype : 'button',
text : 'Edit',
handler : function() {
Ext.Msg.alert('You clicked the button');
}
}]
}
});
The above view shows only the button but NOT the Dataview. I needed to add
layout : 'fit'
to the config to make it show DataView. But in combination with the button it makes the button fullscreen and the dataview is not shown anymore (???).
I tried both scenario's where I add a Button as config item and by using the handler.
How can I get the button below the dataview ??
Thanks for your help.
Don't use layout fit, it's made to fit one component in your canvas. I'd use a vbox layout. Which automatically puts items vetically under each other.
Try this:
layout: {
type: 'vbox',
align: 'stretch' //this tells to take the full width
}
Flex your dataview
var view = Ext.create('Ext.DataView', {
flex: 1, //Use the remaining space.
store : userStore,
itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join()
});
I make Panel(layout:Absolute).
After, I add Items to Panel.
But I can't see that Item.
This is need Re-Render, but I don't know how to Re-Render...
Sorry to my English, but, I'm novice at English..
Thanks!
This is Absolute and Item Code
var centerItem = {
xtype : 'image',
src : "lib/Image/Paddle.png",
x : 100,
y : 100
};
var arrayItem = new Array();
var centerRegion = Ext.create('Ext.form.Panel', {
title : 'Center Region',
region : 'center',
xtype : 'panel',
layout : 'absolute',
margins : '5 5 0 5',
id : 'designSpace',
items : this.arrayItem
});
Ext.onReady(function Startup() {
arrayItem.push(centerItem);
var Main = Ext.create('Ext.panel.Panel', {
width : '100%',
height : 960,
layout : 'border',
items : [{......
Why do you push it afterwards and not include into definition?
But really, level of all your questions suggests that you need to read ExtJs Getting Started Guide - http://docs.sencha.com/ext-js/4-0/#!/guide/getting_started
Try to create samples they do there and believe me you will fell yourself much more comfortable.