I have a text box and there is some text written on it. Now, when somebody clicks inside the text box, I open a html editor (http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.HtmlEditor) and now i want to place the text written inside the text box to come in the html editor so that user can edit it easily and save it. Similarly, when i open the html editor i want to update the value inside the color box and font-size and font-value in the html editor. Assume that i can fetch these values from the textbox. I tried googling it but could not found how to do this.
Ext.QuickTips.init(); // enable tooltips
new Ext.Panel({
renderTo: 'text-editor',
id: 'html-editor',
width: 440,
height: 100,
frame: true,
layout: 'fit',
items: [
{
xtype: 'htmleditor',
enableColors: true,
enableAlignments: true
}
]
});
$('#selected-text-box').click(function() {
showEditor(this.id);
//TODO: Write code here to set the properties of editor with the properties set in textbox
});
Now, i just want to ask. how to access the fields of html editor and set their value.
Try this, I will work but about font-size I don't know
var Content = $('#' + textBoxId).html();
editor.setValue(Content);
I have tried this. It works :)
Related
Let's say I have a window which are several combobox's and texfield's. What I want to do, getting all selected and filled values from this window to be able to post server side.
I used to ComponentQuery but only getting specified type of field. Is there any solution to get any kind of xtype values, like combobox, checkbox, textfield etc?
The solution is to use an Ext.form.Panel, it contains functionality to manage groups of fields:
var win = new Ext.window.Window({
layout: 'fit',
items: {
border: false,
xtype: 'form',
items: [] // your fields here
}
});
// Later
console.log(win.down('form').getForm().getValues());
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'm trying my hands on extjs 4 by trying to recreate some component I have in an old extjs 2 project.
One of the component was creating a floating toolbox (like you get with photoshop) with a thin border and no title or min/max/close buttons. Like so..
In ext4 , I can't seem to be able to reproduce that same result. Here's what the same code looks like in ext 4:
This is the code I had:
app.Toolbox = Ext.extend(Ext.Window, {
,initComponent : function()
{
Ext.apply(this,{
closable:false,
border:false,
width:345,
height:60,
onEsc:Ext.emptyFn,
resizable:false,
x:20,
y:20,
items:[
/* icons (a html items) */
]
});
app.Toolbox.superclass.initComponent.call(this, arguments);
}
/* handlers, methods, etc */
});
Is there any way to get a similar result in ext 4?
I tried using some css to hide some elements like the title bar, but ext 4 always calculates the height of the window as if the element was visible, which looks even weirder.
Any idea?
Ext.panel.Header is just an extended Ext.container.Container so you can do as you wish to it.
I think the closest you're going to get is by applying frame: true which kind of forces the content to fill the window frame.
However, it doesn't seem to work if you have a Close button in the top right.
Ext.create('Ext.window.Window', {
height: 60,
width: 345,
closable: false,
layout: 'fit',
frame: true,
items: {
html: '<p>hello</p>'
}
}).show();
You're still going to have to style it a little, but its far closer to what you need.
I want to add a readonly text on the top of a GridPanel. Is it possible in extjs 2?
Something like "Note" in following example
Grid Header
Note: this is information abot grd
srno | name | xxx| yyyyy|zzzzzzz
Thanks,
User
The Gridpanel has a 'header' property which reads:
header : Boolean
true to create the Panel's header element explicitly, false to skip creating it. If a title is set the header will b...
true to create the Panel's header element explicitly, false to skip creating it. If a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Will this do the job?
EDIT as per comment:
Sure, there are examples on the ext.js api site, but it would be something along these lines:
var grid = new Ext.grid.GridPanel({
//your existing stuff
width: 600,
height: 300,
frame: true,
title: 'This title will appear accross the header bar'
});
To specify more options for the header than the default classes and using the text from the 'title' property you can configure it like this:
var grid = new Ext.grid.GridPanel({
//your existing stuff
width: 600,
height: 300,
frame: true,
headerCfg: {
tag: 'h2',
cls: 'x-panel-header', // or whatever css class you want to apply
html: 'Some custom text, I assume you can use tags in here'
},
headerCssClass = 'anotherClass' //this is additional styling
});
Have a look on the API for gridpanel, then look at the 'bodyCfg' config section, this shows the examples for header and footer. Hope it helps.
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