I have weird situation that extjs 4 always puts last word of custom error message in new row, and effectively hides it. I tried shortening message, but always last word goes to new line. This happens in Firefox 7.0.1 (firebug turned off), not in Chrome, Opera, Safari.
Default message text is displayed correctly. My error message has no strange letters or symbols.
I tried escaping white characters, putting nobr tags etc... but nothing works.
How to prevent this behavior?
I have no any css or any other styling applied. Here is code from view:
this.items = [{
waitMsgTarget: 'dailyReport',
xtype: 'form',
url: 'php/dailyReport.php',
items: [{
margin: 10,
xtype: 'datefield',
name: 'reportDate',
fieldLabel: 'Report for',
format: 'd.m.Y.',
altFormats: 'd.m.Y|d,m,Y|m/d/Y',
value: getCorrectDate(),
disabledDays: [0]
},
{
margin: 10,
xtype: 'checkboxgroup',
fieldLabel: 'Report by',
columns: 2,
vertical: true,
allowBlank: false,
blankText: 'Choose at least one.',
items: [{
boxLabel: 'pos',
name: 'rb',
inputValue: '1',
checked: true
},
{
boxLabel: 'seller',
name: 'rb',
inputValue: '2',
checked: true
}]
}]
}];
'Ctrl' + '+' was reason. My view in Firefox was zoomed in, but I didn't notice it until today. After I returned it to normal zoom level 'Ctrl' + '0' everything works and shows up fine. Silly me, it took me 2 weeks to realize this.
Related
I'm using Extjs 6.0 (with Framework Codeigniter 3.0.3).
I'm trying to get something like this:
+---------------------------+-------------+
| something | something | something |
+-------------+-------------+-------------+
| Label A| Label B |
+-------------+-------------+-------------+
I'm using table layout (Label A with colspan 2).
The problem is I need different aligning in Label A and Label B (right and center respectively).
Is there a way to accomplish this?
This is the code:
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyStyle: 'padding:5px 5px 0',
width: 400,
height: 200,
layout: {
type: 'table',
columns: 3
},
items: [{
xtype: 'label',
text: '----First Row----',
padding: 5
}, {
xtype: 'label',
text: '----First Row----',
padding: 5
}, {
xtype: 'label',
text: '----First Row----',
padding: 5
},{
xtype: 'label',
text: 'Label A',
padding: 5,
colspan: 2,
}, {
xtype: 'label',
text: 'Label B',
padding: 5
}],
});
For Label A, I've tried adding (without effect):
align: 'right'
textAlign: 'right'
labelAlign: 'right'
If I add:
layout: {
type: 'table',
columns: 3,
tableAttrs: {
style: {
textAlign: 'right'
}
}
}
Then both Label A and Label B align to the right, and that's not what I need.
you can use the following code to align Label A to the right:
{
xtype: 'label',
text: 'Label A',
padding: 5,
colspan: 2,
style:{
"float":"right"
}
},
Labels are somehow special, presumably because they are made for the purpose to be used by labelable. A label is intended to be used together with a field, and when you click the label, that field is focused. The labelable mixin of the field does the aligning (based on the labelAlign configuration), and label does not always respect the layout you ask for.
While the answer of #Saloo seems to work, it is a hack that may break in other themes and/or older browsers and/or different versions of the framework.
It would be better to use different means of displaying text. I have come to use a container with the html configuration. With a container, style:{textAlign:"right"} works as intended, and since "text-align" is a local CSS setting that does not require the browser to think outside the box, it should be safe enough to use across browsers, across themes, across framework versions.
In my ckeditor I would like to have a button like the bold button but then for the tags. How can I do that?
Could not found anything about it..
What I've now is: (that do works)
style.js
CKEDITOR.stylesSet.add( 'default', [
{ name: 'Legend', element: 'legend' },
}
When I press on the legend style nothing happens..
a nasty alternative that I use now is:
{
name: 'Legend',
element: 'span',
styles: {
'font-size': '17px',
'-moz-border-bottom-colors': 'none',
'-moz-border-left-colors': 'none',
'-moz-border-right-colors': 'none',
'-moz-border-top-colors': 'none',
'border-color': '-moz-use-text-color -moz-use-text-color #E5E5E5',
'border-image': 'none',
'border-style': 'none none solid',
'border-width': '0 0 1px',
'color': '#333333',
'display': 'block',
'font-size': '21px',
'line-height': '40px',
'margin-bottom': '20px',
'padding': '0',
'width': '100%',
}
},
But I still prefer the <legend></legend> Can somebody help me out?
Styles. See my previous answer and go ahead with similar code for your tag. You may also find this one helpful, if you want to extend the built-in formatting combo.
I have the following button within a Panel within a view:
items: [
{
xtype: 'button',
text: 'SEND',
ui: 'confirm',
docked: 'bottom',
handler: function(){
view.push('TouchNuts.view.Transactions',{
title: 'New views title',
html: 'Some content'
});
}
}
]
I would like to navigate to a page that consists of a list 'TouchNuts.view.Transactions' when I click it. Any ideas?
view needs to be a reference to your NavigationView. One way of getting that reference is by giving it an id and then using Ext.getCmp to fetch the component:
{
xtype: 'navigationview',
id: 'my-id',
items: [...]
}
Ext.getCmp('my-id');
I accidentally deleted this post before, so I am resubmitting :\
I'm new to Ext JS and MVC in general and am toying with creating an app with a chart nested within a panel nested within a border panel within an app. [From top to bottom it goes Viewport > bordered panel > panel in 'center region' > chart]
The reason why I'm nesting a panel within the border panel is that the nested panel will hold both the chart as well as a toolbar for the chart, both of which are dynamic depending on the user's selection.
While simply having the border panel reference the externally defined chart view works well, once I try having it reference an externally defined panel view it throws 'Uncaught TypeError: Cannot call method 'substring' of undefined', and Aptana gives me a 'name is undefined' namespace error whether or not I have the nested panel reference the chart or simply be left empty. I have double checked my name spacing so I'm a little lost in where to start looking for the problem.
My base application file is as follows:
Ext.application({
name: 'Chart',
appFolder: 'chart',
controllers:['sidebar.Navigation', 'commoditycontrol.Commoditycontrol',
'chart.oil.Spreads'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
xtype: 'commoditycontrol',
}, {
region: 'east',
xtype: 'sidebarnavigation',
}, {
region: 'center',
xtype: 'oilbase',
}]
});
},
});
The 'oilbase' view is simply a panel that imports the chart and chart toolbar view (in this case I've left the toolbar view out)
Ext.define('Chart.view.base.Oil', {
extend: 'Ext.panel.Panel',
alias: 'widget.oilbase',
name: 'oilbase',
layout: 'fit',
items: [{
xtype: 'oilspreads'
}]
});
And here's the chart view 'oilspreads'
Ext.define('Chart.view.chart.oil.Spreads', {
extend: 'Ext.chart.Chart',
alias: 'widget.oilspreads',
name: 'oilspreads',
layout: 'fit',
store: 'Chart.store.oil.Spreads',
config: {
style: {
background: '#333333'
},
},
axes: [
{
title: 'Close',
type: 'Numeric',
position: 'left',
fields: ['close'],
minimum: 0,
maximum: 100,
cls: 'axis'
},
{
title: 'Month',
type: 'Category',
position: 'bottom',
fields: ['month'],
cls: 'axis'
}
],
series: [
{
type: 'line',
xField: 'month',
yField: 'close'
}
]
});
Again, everything works fine if I reference the chart view in the application rather than the 'oilbase' empty panel. If I reference the default panel xtype, everything works as well.
Is nesting panels simply discouraged? My gut feeling is that I'm simply missing an obvious namespacing issue but I would appreciate a 2nd set of eyes, as well as comments as to my approach to the MVC pattern for ExtJs in general.
Thanks
For the view to be loaded correctly it has to be defined either in the views config of your app, or in the views config of one of the controllers.
I'm trying to create a simple login window with the very common 'Remember me' functionality. The login validation is done AJAX style, thus the browser won't remember my input.
My approach is to use the built-in state functionality, but how to use it confuses me.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));
...
{
xtype: 'textfield',
fieldLabel: 'User name',
id: 'txt-username',
stateful: true,
stateId: 'username'
}, {
xtype: 'textfield',
fieldLabel: 'Password',
id: 'txt-password',
inputType: 'password',
stateful: true,
stateId: 'password'
}, {
xtype: 'button',
text: 'Validate',
stateEvents: 'click'
}
I know I have to implement the getState method, but on what component (my guess is on the two textfields)? Another thing I fail to realize is, how is my click event on the button connected to the state properties of my textfields?
Don't use state. You are storing the user's password in plain text in the browser's cookies. Anyone who has access to the browser can read it and it is being sent back to the server in every request.
Hopefully you are using some form of server-side sessions and are not depending on the user's authentication information being present in every request to maintain logged-in state. If so, then I recommend taking advantage of the password saving feature built in to most modern browsers to handle remembering of the user for the initial authentication in any given session.
For the browser's password saving feature to work the authentication form must be present in the document when the page is first loaded. Also, the credentials must be submitted by that form in a traditional (non-AJAX) submit which will refresh the entire page.
You can fulfill these requirements while still presenting the form in the ExtJS UI by initially rendering the form hidden into the document and then using the capabilities of ExtJS to commandeer existing HTML elements.
In the document's body put:
<form id="auth-form" action="/url/of/your/login/action" method="POST">
<input id="auth-username" type="text" name="username" class="x-hidden">
<input id="auth-password" type="password" name="password" class="x-hidden">
<input id="auth-submit" type="submit" class="x-hidden">
</form>
Then, in Ext.onReady or at the time you are displaying an authentication form build a panel which makes use of the above form elements:
new Ext.Panel({
el: 'auth-form',
autoShow: true,
layout: 'form',
items: [
{
xtype: 'textfield',
el: 'auth-username',
autoShow: true,
name: 'username',
fieldLabel: 'Username',
anchor: '100%'
},
{
xtype: 'textfield',
el: 'auth-password',
autoShow: true,
name: 'password',
fieldLabel: 'Password',
anchor: '100%'
}
],
buttons: [
{
text: 'Log in',
handler: function() {
Ext.get('auth-submit').dom.click();
}
}
]
});
The exact composition of the form may vary. It may be built into an Ext.Window instance or whatever else. What is important:
The username and password fields make use of the existing input fields through the 'el' and 'autoShow' config properties.
One of the panels containing the fields does the same for the existing form element.
The submission of the form is performed by a simulated click on the existing submit button.
Use with Ajax funcionality:
{
xtype: 'form',
autoEl: {
//normal post for false submit
tag: 'form',
action: "#",
method: 'post'
},
items: [
{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
listeners: {
afterrender:function(cmp){
cmp.inputEl.set({
autocomplete:'on'
});
}
}
},
{
xtype: 'textfield',
name: 'password',
inputType: 'password',
fieldLabel: 'Password',
listeners: {
afterrender:function(cmp){
cmp.inputEl.set({
autocomplete:'on'
});
},
}
},
{
xtype: 'button',
text: 'Login',
handler: function() {
Ext.Ajax.request(); //login ajax request
Ext.get('falsesubmit').dom.click(); //false submit
},
},
{
//button with submit input for false submit
xtype: 'button',
hidden:true,
listeners: {
afterrender: function() {
this.el.createChild({tag: 'input', type: 'submit', id: 'falsesubmit'});
}
}
}
]
}
This does not work with IE 8. A runtime error is produced. I don't know if it is because I am using Google Frame, but I would like to point out that el is one of the public properties not a config option so I don't believe that Ext was design to work like this. Also in Google Chrome you can select the username but the password does not display. I think this is part of the design of Google Chrome but I have also seen it work correctly on other sites with Google Chrome. I am not using AJAX to submit the form but I like the way the Ext textfields look and I like the Tool tips as well.
I don't see how this way is safer than using a cookie because now matter how you implement it the password is stored on the client machine. Tomorrow I am going to try a html5 client storage solution.
Letting the web browser control this functionally means that different users may have different experiences based on the browser they have access to (talking mainly in how google chrome handles saving passwords).
All in all a very good post thanks.