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
Related
I'm trying to build a rating system on my help page using following rating widget
https://github.com/christophe-g/Ext.ux.widget.Rating
I've a viewport with following sections:
/********* WEST REGION *********/
var helpTree = Ext.create('Ext.tree.Panel', {
id : 'helpTree',
useArrows : true,
region : 'west',
collapsible : true,
listeners :{
itemclick : function(node, record, item, index, e){
// Get contents using AJAX and update it in center region of viewport.
getAndUpdateHelpContents(record.get('id'));
}
},
});
/******** CENTER REGION ********/
var helpTab = Ext.create ('Ext.tab.Panel', {
id : 'helpTab',
region:'center',
activeTab:0,
items:{
id : 'helpItemTab',
title: 'Contents',
html: '<h4>Welcome to Help System<h4>',
},
});
var rating = new Ext.ux.widget.Rating({
id : 'ratingField',
fieldLabel : 'Rating',
allowBlank : false,
value : 2.5,
titles: {
'0': 'poor',
'1.4': 'medium',
'3': 'excellent',
'5': 'perfect'
},
});
/******** SOUTH REGION ********/
var ratingTab = Ext.create ('Ext.form.Panel', {
id : 'ratingTab',
region:'south',
layout : 'anchor',
margins: '5 5 5 0',
items:[rating]
});
/******** VIEWPORT ********/
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'border',
items: [
helpTree,
helpTab,
ratingTab
]
});
Now in this design, rating widget is in south region. Instead, I wish to remove south region and append rating widget at the bottom of the contents of center region after calling "getAndUpdateHelpContents" function as this function clears and updates the contents in center region whenever user clicks a link on left/west region/tree. Following is this function in jquery
function getAndUpdateHelpContents(id, text) {
htmlContents = "<p>This is Test</p>";
$("#helpItemTab").html(htmlContents);
}
Pls help as in how to append this rating at the end of center region contents (after dynamic loading)!
Thanks.
Generally, you do not need any html markup in Ext to add a component to it. The required markup is generated by Ext and by the widget automatically.
When you have a container (Panel is also a container) then you can call ct.add(rating) - the widget is added to the panel as the last item.
You probably don't want to add it on each click in the listener you indicated.
I am working in extjs4. I have view with following components-
1. xtype: 'boxselect',
displayField: 'emailAddress',
valueField: 'id',
store : store
2.xtype : 'grid',
selModel:Ext.create('Ext.selection.CheckboxModel', {
headerWidth : 40,
showHeaderCheckbox : false,
ignoreRightMouseSelection : true,
checkOnly : true
}),
width :350,
border : true,
store : store,
columns : [{
dataindex : 'firstName',
header : 'firstName'
},{
dataindex : 'lastName',
header : 'lastName'
},{
dataIndex : 'emailAddress',
header : 'email'
}]
3.xtype : 'button',
text : 'Add'
On this add button click, i want to add grid selected multiple values to boxselect's selected values along with its previous selected values and want to show those values in combobox as selected.
i tried it as=
var previousvalues = [12,13,14]
var newvalues = [15,16]
Ext.getCmp('comboId').setValue(previousvalues + newvalues );
But its forming combinely one emailId and setting it as one value, not individual emailId
So how to perform this in extjs4
You can not contact two arrays with + operator in javascript.
ExtJs framework has build in function for merging two arrays Ext.Array.merge()
So you can set new values like this:
var values = Ext.Array.merge( previousvalues, newvalues );
Ext.getCmp('comboId').setValue( values );
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 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 ]
I use Grid panel. When I select the row in the grid I get the following results:
If I render the Form in 'document.body' everything is OK, and form
fields are filled.
If I, same Form start in Window panel, Form fields are empty.
When I use both, Form which is rendered in the 'document.body' is
closed, and Form fields in Window are filled.
Where I make mistake.
// Grip panel part
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, index, record) {deleteWindow.show();}
}
})
// End Grid panel part
var myForm = new Ext.form.FormPanel({
title:"Basic Form",
width:425,
frame:true,
items: [
new Ext.form.TextField({
id:"to",
fieldLabel:"To",
width:275,
allowBlank:false,
blankText:"Please enter a to address",
readOnly: true
}),
new Ext.form.TextField({
id:"subject",
fieldLabel:"Subject",
width:275,
allowBlank:false,
blankText:"Please enter a subject address",
readOnly: true
}),
],
buttons: [
{text:"Cancel"},
{text:"Save"}
]
});
var deleteWindow = new Ext.Window({
id: 'id_deleteWindow',
title: 'Delete',
closable:true,
width: 750,
height: 380,
plain:true,
layout: 'fit',
items: myForm
});
var id_test = 2; // This is only for this problem
//myForm.render(document.body); // When using this code everything is ok, and form fields are filled
myForm.getForm().load({
url:'ggg.php',
params:{
id: id_test
}
});
JSON data
{success:true,results:[{"id_test":"1","to":"a","subject":"aa"}]}
I would suggest the following changes to the code:
In place of using the id property on the TextField (say, id: 'subject'), use name property (name: 'subject')
Just curious....since you are handling the rowselect event on the grid, you might want to load the selected record in the form panel rather than loading it again. If this is the case, then you may call the loadRecord() method on the form panel and pass the record object to it and then call the show() method on the window
I figured out that when load is called on form, ExtJS tries to access form dom element to determine form method. I've found 2 solutions:
Add method to the form config
Load data to form after window is showed
Here is code for second solution:
var deleteWindow = new Ext.Window({
id: 'id_deleteWindow',
title: 'Delete',
closable:true,
width: 750,
height: 380,
plain:true,
layout: 'fit',
items: myForm,
listeners: {
show: function() {
var form = this.items.get(0);
form.getForm().load({
url:'ggg.php',
params:{
id: id_test
}
});
}
}
});
deleteWindow.show();