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.
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 have below requirement of a page with sencha touch:
A drop down of some options
A question posted by users (length may vary big time)
a text area to display get the answer
Two buttons for submit and ignore
I am using vbox layout. Now the problem is I want the page to be fully scrollable instead of partial scrolls on dataview etc.
How can I achieve it. I have similar requirements for different screens.
Below is the code:
Ext.define('HCMDoctor.view.PFQuestion', {
extend : 'Ext.form.Panel',
xtype : 'PFQuestion',
id : 'pfView',
config : {
layout : {
type : 'vbox',
align : 'stretch'
},
flex : 1,
scrollable : true,
items : [{
xtype : 'container',
html : 'Public Forum Question'
}, {
xtype : 'selectfield',
store : 'CommunityWiseQuestions',
name : 'pfCommId',
id : 'pfCommId',
valueField : 'communityId',
displayField : 'displayFull'
}, {
store : 'PFQuestion',
xtype : 'dataview',
flex : 1,
id : 'pfQuestionHolder',
itemTpl : ['{discussionTitle}<br>{description}',
'<br>Posted in {postedInCommunityName}']
}, {
xtype : 'hiddenfield',
id : 'pfQuestionId',
name : 'pfQuestionId'
}, {
xtype : 'textareafield',
id : 'pfAnswer',
name : 'pfAnswer'
}, {
store : 'PFQuestion',
xtype : 'button',
text : 'Ignore',
id : 'ignorePFQuestion'
}, {
store : 'PFQuestion',
xtype : 'button',
text : 'Submit',
id : 'submitPFQuestion'
}
]
}
});
Thanks
onload of store iterate over records and in every iteration create panel with tpl by passing record data to it and add the panel to its parent. something like this:
var parentPanel = Ext.getCmp("pfView");
for(var i=0; i++; i<records.size){
var mypanel = Ext.create("Ext.Panel", {
data : records[i]
});
parentPanel.add(myPanel);
}
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 ]
When I create two window objects containing single textfield object in each window. But Id of that text field is same. When I re-size, maximize or minimize window object, controls move from one window to another.
Please have a look on the following code and re-size first window titled : 'window 1'
Ext.onReady(function(){
var win = new Ext.Window({
title : 'window 1',
width:200,
height:200,
maximizable : true,
x : 50,
items: [{xtype : 'textfield', id: 'text1'}]
});
win.show(this);
var win2 = new Ext.Window({
title : 'window 2',
width:200,
height:200,
maximizable : true,
x : 350,
items: [{xtype : 'textfield', id: 'text1'}]
});
win2.show(this);
});
As for HTML, each id must be unique. Otherwise, you will have stranges behaviour.
Indeed, the Ext.get method has a cache, based on the element id.
So the real question is : why do you set the same id to the text fields ?
If you need a known id, you can use :
tId = Ext.id(); // generates an id
items: [{xtype : 'textfield', id: tId}]
Or to access the textfield element / component later, you can use ref or itemId : http://dev.sencha.com/deploy/dev/docs/?class=Ext.Component
i am tring to display lable of form in marathi language for that
am creating marathi.js
this my mararhi.js
if(Ext.app.formPanel)
{
Ext.apply(Ext.app.formPanel.prototype,
{
selectUser:'नाव'
}
);
}
and my other js file contain this
var Ext.app.formPanel = Ext.extend(Ext.form.FormPanel,{
selectUser:'Select User',
initComponent : function(config) {
Ext.apply(this, {
title : 'User Rights',
bodyStyle : 'padding: 10px; background-color: #DFE8F6',
labelWidth : 100,
width : 755,
id : 'formUserRights',
renderTo:'adminpanel',
items : [ id: 'User',
fieldLabel:this.selectUser,
width:200
] //items
});//Ext.apply
Ext.app.formPanel.superclass.initComponent.apply(this, arguments);
}//init component
}); //yuyu
......
....
but it can not work
it gives error ; missing before
var Ext.app.formPanel = Ext.extend.....
but when i checked all carefully every thing is correctly nested.
First thing, the syntax error that vava noted in his comment above.
Second, you should not var the 'Ext.app.formPanel' namespace.
Third, initComponent does not pass any arguments.
Fourth, you need to call the superclass, not apply it - also no need to pass arguments, as there are none.
Ext.ns('Ext.app');
Ext.app.formPanel = Ext.extend(Ext.form.FormPanel, {
selectUser : 'Select User',
initComponent : function() {
Ext.apply(this, {
title : 'User Rights',
bodyStyle : 'padding: 10px; background-color: #DFE8F6',
labelWidth : 100,
width : 755,
id : 'formUserRights',
renderTo : 'adminpanel',
items : [ {
id : 'User',
fieldLabel : this.selectUser,
width : 200
} ]
});
Ext.app.formPanel.superclass.initComponent.call(this);
}
});
On a side note, I prefer not to use the Ext namespace for my app code, there is a chance for collision that way. I would suggest creating your own namespace.
Enjoy this one on the house, with the hope that someday you will actually award answers.