I have a combobox inside of a ext.panel, inside of an ext.window. When I click the down arrow to show the possible SELECT options, the options pop up at the top-left of the browser window, instead of below the SELECT box. The funny thing is if I attach the drugDetailsPanel (see code below) to a div on the page (instead of inside an ext.window), the combobox works correctly. This also happens when I change ext.panel to ext.form.formpanel, by the way.
Any ideas?
My code:
drugDetailsPanel = new Ext.Panel({
layout:'form',
id:'drug-details-panel',
region:'center',
title:'Drug Details',
height:200,
collapsed:false,
collapsible:false,
items:[
new Ext.form.ComboBox({
fieldLabel:'What is the status of this drug?',
typeAhead:false,
store:drugStatusStore,
displayField:'lookup',
mode:'remote',
triggerAction:'all',
editable:false,
allowBlank:false,
emptyText:'Select a status..',
name:'/drug/drug-status',
id:'drug-status'
})
]
});
newDrugWindow = new Ext.Window({
title: 'Add Drug',
closable:true,
width:650,
height:650,
//border:false,
plain:true,
layout: 'border',
items: [drugDetailsPanel],
closeAction:'hide',
modal:true,
buttons: [
{
text:'Close',
disabled:false,
handler: function(){
newDrugWindow.hide();
}
},
{
text:'Save Drug',
handler: function(){
newDrugDialog.hide();
}
}]
});
Try to add shim: true to combo-box control.
Older versions of Ext had issues like this in certain browsers (FF 2.x) in certain situations dealing with nested positioning, the specifics of which escape me now. If that's the case, search the Ext forums for more info. If not, then I'm not sure...
This forum thread helped me: http://www.sencha.com/forum/showthread.php?177677-IE-displays-combobox-dropdown-in-the-top-left-corner-of-browser-window
Just give the combobox a (unique) name. Giving the combobox an inputId should also help
Seems like IE does not respect the position of the element if it does not have an explicit name/inputId. This thread goes more deeply into it: http://www.sencha.com/forum/showthread.php?154412-Combo-Box-options-appears-in-Top-Left-Corner-in-IE-9
Related
Whenever I add a form to a card layout, all the form items seem to disappear. I tested my layout here:
http://tof2k.com/ext/formbuilder/
with this code and got the same result, (use show/edit JSON to try it or build one yourself)
How can I make the for fields visible?
{
xtype:"panel",
title:"Panel",
items:[{
layout:"card",
title:"CardLayout Container",
activeItem:"0",
items:[{
xtype:"form",
title:"Form",
items:[{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
},{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
}]
}]
}]
}
I figured out the answer, ensure you set the height property of the form or else it will be hidden.
I need to customize the yes no combo within a specific panel, local to the panel without affecting the parent yesnocombo box configuration. Is there a way to do this?
I am referring to the form I posted earlier in another thread in the Sencha forums, but no one has answered. The url is:
http://www.sencha.com/forum/showthre...ng-Sencha-form
I tried this:
var myNewStore =[
"", "Yes", "Revoke"];
Ext.define('YesNoCombo',{
extend:'Ext.form.ComboBox',
store:myNewStore,
value:'',
emptyText:'Select...',
labelalign:'left',
labelWidth:550,
inputWidth:80,
allowBlank:true,
listeners:{
select:function(comp,record,index){
if(comp.getVelue() == "" || comp.getVale() ===" ")
comp.setValue(null);
}
}
});
but this broke the format of the form.
Is there a way to create a local combo with custom variables like this:
var UserForm_BlahBlahBlah=Ext.create('YesNoCombo', {
name:"UserForm_BlahBlahBlah",
fieldLabel:"BlahBlahBlah",
values:" Yes" "Revoke",
});
I tried this but it will not work. But you get the idea- It is just creating a local extension within a specific panel with new values.
Is this possible? Or is there a better way that sencha implements customizing the combo box with out affecting the parent class?
Regards,
umbre gachoong
You can easily extend Ext.form.ComboBox class and create your own combo box class. Then you can use your combobox in forms.
In the exmaple I create custom combobox by using its xtype which I defined by alias: 'widget.yesNoCombo'. You can also create instance of custom combobox by var combo = Ext.create('YesNoCombo');
Ext.define('YesNoCombo',{
alias: 'widget.yesNoCombo',
extend:'Ext.form.ComboBox',
store: ["No", "Yes", "Revoke"],
emptyText:'Select...',
allowBlank:true
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
items:[
{
xtype: 'yesNoCombo',
fieldLabel:'Yes No Label',
name: 'combo',
},
{
xtype: 'textfield',
fieldLabel: 'Another field',
name: 'anotherField',
},
]
});
See this fiddle https://fiddle.sencha.com/#fiddle/210
I needed checkbox selection mode in my gridpanel, so i use Ext.selection.CheckboxModel component, but my problem is about the column (checkbox column) which this component will append to my grid. I want to set a fixed width for it, because this column's width may vary when i resize the browser window. I use the code below, but it doesn't work:
constructor: function() {
var me = this;
me.selModel = Ext.create('Ext.selection.CheckboxModel', {width: 16});
me.callParent(arguments);
}
This is code snippet and snapshot of my users table:
Ext.define('VDOA.view.users.Table', {
extend: 'Ext.grid.GridPanel',
alias: 'widget.usersgrid',
forceFit: true,
selType: 'checkboxmodel',
//selType: 'rowmodel',
//selModel: Ext.create('Ext.selection.CheckboxModel'),
title: '',
initComponent: function() {
...
}
});
It's a bug in Ext 4.0.7:
It's the forceFit: true that screws up. They suggest to set flex:1 on the remaining columns. That worked for me but I would still like to see it smaller. I'll probably go for a css solution.
thread on the sencha forum
You should use combination of:
Set flex property to each column as VDP proposed
Define selModel with headerWidth as Rich Waters proposed
Having this combination you will be able to control exact width of cell with checkbox
There's an undocumented property that controls the column width, give this a shot:
selModel: {
selType: 'checkboxmodel',
headerWidth: 16
}
I think you're over-complicating things. Just add this line into your grid panel definition:
selType: 'checkboxmodel'
And you will get nice, fixed width, non resizable checkbox column in the front.
You try to put every thing inside the "initComponent function" .
initComponent: function () {
this.items = [{
//define grid view
selModel: Ext.create('Ext.selection.CheckboxModel'),
}
];
this.callParent(arguments);
}
What I am trying to accomplish is to add information to a datagrid, then what I have its a button 'add', when I click it, it will show a panel where I can add all the information needed to fill the datagrid.
The panel to add the info should be shown like this:
http://img94.imageshack.us/img94/2662/emailhelp.jpg
The one above I have done it with a messagebox like this:
Ext.MessageBox.show({
title : 'Email Information',
msg : 'your email:',
width : 300,
buttons : Ext.MessageBox.OKCANCEL,
multiline : true,
fn : addEmailInfo,
animateTarget : 'btn_add'
});
Then what I want is something similar but with a panel, in which I could add more components.
I've been searching but I havent found anything, thank you in advance.
I've looked, but there is not a predefined ExtJS method to open a grid row in a form panel (should be).
There is an in-line row editing extension for ExtJS grids which works really well. Just double click a grid row and the record opens editable fields for any data you set as editable. Some more details on implementing it are here.
If that won't work-out for you, you would have to create a new Ext.window and add your own form panel / fields into it. Create an onclick listener in the grid which
populates the form / fields with the selected record data and
shows the window (myWindow.show()).
You would also have to write a method to save your edited or newly created record into the datastore (using myDataStore.set([field],[value])) also a line to commit it to the database (if that is where you are getting data).
To answer your question more exactly, a new window that you can add other fields to could be done like this:
myWindow = Ext.create('Ext.window.Window', {
id: 'recordWindow',
title: 'New Particle',
resizable: false,
closable: false,
width: 605,
minWidth: 300,
minHeight: 200,
y: 150,
layout: 'fit',
plain:true,
items: myFormPanel, //your form or fields would go here
buttons: [{
text: 'Save',
handler: saveRecord()
},{
text: 'Cancel',
handler: resetRecordWindow()
}]
});
How about this example? It shows a grid with an edit form to the right of it.
If you don't like that than you can wrap the form into the window component like Geronimo suggested.
http://docs.sencha.com/ext-js/4-0/#!/example/form/form-grid.html
I made the sufficient investigation of this problem. But unfortunately didn't find any solution, even in stackoverflow questions, that look like this one.
I need to redraw(refresh, re-render) a panel, that contains a tabPanel with different tabs, that are rebuilding each time when I open the panel. Here is the code below to build tabs
//the first tab
categoryTpl: function(){
var categoriesTab = new Ext.Panel({
id: '_Categories',
title: 'X-Axis',
layout: 'form',
padding: 10,
labelWidth: 101,
items: [...]
})
}
Here is code to build the TabPanel
setAxesInfo: function(){
var categoryTab = this.categoryTpl();
//initialize the controls in the first tab
FC.Var.CM.initAxis(categoryTab, undefined);
delete this.axesTabPan;
this.axesTabPan = new Ext.TabPanel({
activeTab: 0,
plain: true,
enableTabScroll: true,
autoScroll: false,
defaults: { autoScroll: true },
items: [categoryTab]
});
}
This is the code to build Panel
create: function(){
this.setAxesInfo();
this.axes = new Ext.Panel({
layout: 'fit',
border: false,
items: this.axesTabPan
});
return {
id: 'axesStep',
title: 'Series Customization',
items: this.axes
}
}
So, I make changes in tab controls and then I want to rebuild(refresh, re-render) my panel I click the button, which have the next handler
refreshAxes: function() {
this.axes.removeAll();
this.setAxesInfo();
this.axes.add(this.axesTabPan);
this.axes.doLayout();
}
So, in debugger I can see, that all my controls in the tab have default initial values (they were rebuilt as I see). But in the browser I see only the previous changed values. It's notable, that if I change the focus of my panel (for example switch to another panel) and then return to this panel all data have the default values. Why I don't see the default values without loosing focus?
I am using the Ext Js 3.4 (this version is the requirement). I'll appreciate any help. Thank you.
Try doing a doLayout() on the Panel.