I have one extjs form.
Most of the contents are set to the form using the html attribute of the form.
Now I need some extjs contents to be appended in the form below the html components. But when I set, all the extjs components are set first and html components are rendering below it.
How will I solve this?
Did you try to explicitely render your Ext component in a container at the bottom of your form?
For example, you HTML would look like:
<form ...>
<!-- Pure HTML fields -->
<input type="text" ... />
<!-- ExtJS fields container -->
<div id="ext-field-ct"></div>
</form>
And, in your Javascript, use the renderTo option or the render method of the fields:
Ext.widget('textfield', {renderTo: 'ext-field-ct', name: "My Textfield", ...});
Related
Two instances of a partialview are loaded on a page.
Partialview has a textarea with id 'newNote'. Hence, when page loads we have two textarea elements with same id - 'newNote' but under two different containers.
<html>
<div id='container1' style="display:none">
--partialview
<textarea id='newNote'/>
</div>
<div id='container2'>
--partialview
<textarea id='newNote'/>
</div>
</html>
I want to convert textarea to tinymce Rich text editor based on the active container (in above case container 2).
Can someone pls tell me how to handle two instances with same id.
You should never have two elements on the same page with a non-unique id
HTML4
HTML5
Is there any way for making TextArea uneditable in GWT?If yes please help me to sort out the problem.
Thanks in advance.
setReadOnly(true)
is translated into HTML as shown below
<textarea class="gwt-TextArea gwt-TextArea-readonly" name="name" readonly=""></textarea>
This will work fine in HTML 4.01 and HTML5 but not in XHTML as defined at HTML readonly Attribute
In XHTML, attribute minimization is forbidden, and the readonly attribute must be defined as
<textarea readonly="readonly">
Try this one to disable a text area field that will work in all the cases.
textArea.getElement().setAttribute("readonly", "readonly");
Same thing applies for
setEnabled(false)
that is translated into HTML as shown below
<textarea class="gwt-TextArea" name="name" disabled=""></textarea>
This will work fine in HTML 4.01 and HTML5 but not in XHTML as defined at HTML disabled Attribute
In XHTML, attribute minimization is forbidden, and the disabled attribute must be defined as
<input disabled="disabled" />
Try this one to disable a text area field that will work in all the cases.
textArea.getElement().setAttribute("disabled", "disabled");
setEnabled(false)
?
That seems to work nicely across browsers.
I have the code below to show a button in a overlay.
<div class="overlay22" id="overlay22" style="display:none;"></div>
<div class="box22" id="box22">
<input type="submit" value="Submit" class="buttonclick" id="buttonclick" />
</div>
Can we show the cq5 form in the overlay instead of hardcoding in the overlay?
If you are just creating some sort of basic form template or component, I think you should just stick to using regular HTML elements and then control look + feel with CSS. Though if you absolutely needed to use form elements similar to what you see in CQ's dialog windows, you will need to generate them by working with CQ's extension of the Ext JS framework.
For example, if you wanted to create a button analogous to your provided example, you'd have to write something like:
CQ.Ext.onReady( function(){
var button = new CQ.Ext.Button({
text : "Submit",
id : "buttonclick",
cls : "buttonclick",
renderTo : CQ.Ext.getBody(),
listerners : {
click : function(){
// Write handler code here
}
}
});
});
Widget API for latest version of CQ (5.5):
http://dev.day.com/docs/en/cq/current/widgets-api/index.html
Materials on Sencha Ext JS 3.4 (which I believe 5.5 is built on):
http://docs.sencha.com/ext-js/3-4/
We can do in the following way as well,
Say for instance we have a page with default cq5 form component already dragged in that,
Let that page be defined in this path as /content/geometrix/loginpage.html
Now we can show the above page in an overlay, using the below code
<div class="overlay22" id="overlay22" style="display:none;"></div>
<div class="box22" id="box22">
<sling:include path="content/geometrix/loginpage/par" />
</div>
Below that par we can find the contents of the form.Here box22 is the lightbox(pop up) and the overlay22 is the background div
I need to allow add a div with a class attribute in tinyMCE in Umbraco. I can add a div, but all content in the div is just text. I need that text has a paragraph, and finally add a class attribute for the div.
It's a little hard to understand what you are asking, but I think this should help.
http://our.umbraco.org/wiki/recommendations/recommended-reading-for-content-editors/adding-styles-to-the-tinymce
You can basically associate a stylesheet with the tinyMCE and then add styles to it that will appear in the style dropdown
You may use
tinymce.activeEditor.execCommand('insertHTML', false, '<div class="section'></div>');
This will insert the specified html into the editor at the local caret position.
Be aware that your valid_elements and valid_children configuration settings won't strip out anything from the html that you insert.
If you can paste your template code then we can be more of a help to you.
What you want to do is wrap your <umbraco:Item field="aliasOfYourRTE" runat="server" />
with the div you want so in your case your code will look like this:
<div class="YOURCLASSNAMEHERE">
<umbraco:Item field="bodyText" runat="server" />
</div>
The umbraco RTE automatically spits out <p> </p> tags when content is inserted. Also, make sure you are publishing your node so that your content is viewable on the front end.
Hope this helps.
Go to Settings - Styles.
Open the stylesheet with the styles for the Format dropdown of TinyMCE in Data Type Richtexteditor.
Add a style with the Alias div.class, e.g. div.alert alert-danger.
If you then click in TinyMCE on a paragraph and then choose in the Format dropdown this style the paragraph is formatted as follows:
<div class="alert alert-danger"> ... </div>
Is this what you wished to do?
I'm using Struts2. By default, when using the struts form, the label and the choices are displayed in the same line. How can I do to make the label in a line, and every radio choice in its own line? Is there a way by CSS? I need your help guys. Here it is how my form looks like. Thank you!
<s:form action="resultAction" namespace="/">
<s:radio label="Gender" name="yourGender" list="genders" value="defaultGenderValue" />
<s:submit value="submit" name="submit" />
</s:form>
Which theme are you using as by default struts2 use xHtml theme and which generate certain set of Tables to render the view.
Struts2 use free-marker template to render the HTML for tags and you can customize theme as per your choice or can create you rown theme.
Try with simple theme which will not generate any table or div and will render plain HTML for you are you have all way to apply your custom CSS to change/customize the view.
You can set the theme per page basis on for the whole application for per page basis add the following line in the head section
<s:set name="theme" value="'simple'" scope="page" />
for whole application you can either set in struts.properties file or in struts.xml file though the second one is more preferable.
<constant name="struts.ui.theme" value="simple" />
If you want to play with theme here is the link for same
struts-2-themes