I have a an Grid with a column that must be a checkcolumn, i use this code
there are two rows in the grid but the checkcolumn looks empty. When i click on the checkcolumn the console.log returns correctly the changed boolean. But i see nothing in that column.
xtype: 'checkcolumn',
header: 'REDACTEUR',
dataIndex: 'REDACTEUR',
width: 75,
editor: {
xtype: 'checkbox'
},
renderer : function(value) {
console.log(value);
you have to manually include the css for the checkcolumn xtype like this:<link rel="stylesheet" type="text/css" href="/extjs4/examples/ux/css/CheckHeader.css">
if your app is generated by Sencha CMD, you need to execute the following command on your project directory
sencha app build
after this command has finished, reload your app on your browser and you can now see your checkcolumn.
extra js file is needed, try to seek Ext file named 'CheckColumn.js' and included it in your script. Or set the Ext's ux path at the beginning of the script also works.
I solved my disappearing checkbox/radio CSS problem in ExtJs 6.01 by running 2 commands:
1) sencha app build development
2) sencha app refresh
Refresh was important
Related
I am with a problem. I am using jQuery.SelectBox for the select box and dropdowns.
It is working fine when the elements are loaded with the page load. But its not working when they are loaded by the ajax i.e on dynamicaly generated elements it is not working.
You can check the file here :- http://rvtechnologies.info/brad/jquery.selectBox.js
This line:
jQuery('<link rel="stylesheet" href="<?php echo DIVATEMPLATEPATH . "/css/jquery.selectBox.css"; ?>">').appendTo("head");
Is completely invalid. You cannot combine PHP and Javascript! PHP is executed on the server, not in the browser. Please learn about the fundamentals of web development. PHP gets run on the server, it generates code that gets sent to the client, which then in turn runs the code locally on the computer (HTML and JavaScript).
CSS codes are style declaration and stylesheets, once the element gets added to the DOM they will be loaded or applied.
Check the name of id, classes and attributes of the generated elements using tools like firebug and see the generated markup.
I have sorted it out.
I need to call the selecbox again on Ajax success.
I have done like this :-
success: function(html) {
jQuery('#loader').empty();
jQuery("#right_search").append(html);
jQuery("SELECT").selectBox(); //Just Added this
initdatepicker();
stat = 0;
}
I'm using the extjs library. I've got a blank panel and I want to load another one of my ext projects into it with an iframe. Here is my function (called from a button), "thepanel" is my blank panel.
function(button){
var div = document.getElementById('thepanel');
div.innerHTML = "<iframe src=\"../../../project2/?&type=grades&gradeitem1=40691&\"></iframe>";
}
I can see the GET request in firebug's console when I run the function and all my second project code/data all shows up in an iframe when I look a the HTML in firebug but nothing new shows up in the browser. Any ideas of what could be keeping my iframe's contents from showing
I am using MVC architecture, here is the code that declares my panel:
items:[{
xtype:'panel',
itemId:'two',
id:'thepanel',
region:'center',
}]
UPDATE: I've tried moving the iframe to the html config option of the panel instead of adding it through jquery with a button click. Again, I can see the code from the url in the iframe show up in firebug but nothing shows up in my application. Here is the code declaring my panel:
xtype:'panel',
itemId:'two',
id:'thepanel',
region:'center',
html:'<iframe src=\"../../../extjproh2/?&type=grades&gradeitem1=40691\"></iframe>',
height:400,
width:400,
Ended up using this plugin from the sencha forums:
http://www.sencha.com/forum/showthread.php?110311-iframePanel&p=943573#post943573
Hello and thanks in advance for any suggestions.
I am using the grouping option in the Kendo UI and i wanted to change the default grouping message :Drag a column header and drop it here to ...
So i changed the text in 3 .js files called: kendo.all.min.js, kendo.web.min.js, and kendo.groupable.min.js, to the desired text and the text does not change.
I think i'm missing something because when i group and un-group i see my message for a sec but then the grid reloads again and i get the original message again. Is the message coming from the dll or just from java script? hope someone can help it is really important.
Thanks.
If you did it correctly and are loading the modified version of the JS it should work BUT that is not the way for localizing the message... KendoUI (in the latest versions) already has support for it. You should have done:
groupable: {
messages: {
empty: "Custom message text"
}
},
as it is shown in their documentation here
Remember that if you modify their code, next time they release a new version you will have to merge their version with yours for having the fixes and new features that KendoUI team developed plus your changes.
EDIT If you want to have it for every Grid in you document, put at the very beginning of the JavaScript code:
kendo.ui.Groupable.prototype.options.messages =
$.extend(kendo.ui.Groupable.prototype.options.messages,
{empty: "Custom message text!"}
);
I am following along the Microsoft tutorial "Quickstart: Adding a ListView" (Can't post link because of spam prevention) for Windows 8 app development and I am attempting to simply show the raw data from my array in ListView format. I have slightly modified the tutorial so that I am using CSS Grids to structure the page (as Microsoft recommends, I believe). The problem I am having is that when the ListView is situated outside of a Grid, it show's and display's perfectly, but, when located inside a CSS Grid, will not show up on my app. I have very limited knowledge in both CSS Grids and the new Windows 8 platforms so I am sure it is a simple mistake that I have made. Below is my CSS and HTML code, all the Javascript should be identical to that used in the Microsoft tutorial...
http://pastebin.com/cgV5PHnf - HTML
http://pastebin.com/HvVPuhkG - CSS
With your HTML and CSS, verbatim, data is showing fine for me. This is my tempData.js:
(function () {
"use strict";
var items = new WinJS.Binding.List();
items.push({ value1: "foo", value2: "bar" });
items.push({ value1: "foo2", value2: "bar2" });
WinJS.Namespace.define("TempData", {
itemList: items.dataSource
});
})();
Note, I included dataSource in the definition of itemList, since your data-win-options did NOT include it (the Quickstart pulls that into the attribute). Without it though you'd be getting a pretty noticeable exception, so suspect you're doing the same in your TempData definition.
One thing you could try is DOM Explorer in Visual Studio or open the application in Blend and use Interactive Mode to see if there is some sort of unexpected CSS class overriding.
I need to create an application in which we are changing the style of the application that is theme of the application based on the button click.
I have download the theme that all contains different CSS file. I need to dynamically declare the CSS for the application to apply that theme.
I have file name Theme1.css, Theme2.css, Theme3.css, Theme4.css, Theme5.css.
when I click on the Theme 1 Button then I need to apply Theme1.css file as source of style. similar like that when I click on the Theme 2 Button then I need to apply Theme2.css file as source of style.
Note : css file contains Style for both application and component of the Application.
Have a Nice DAY....
You would have to use the facility within eclipse/flex builder to compile the CSS into SWF so that the styles can be changed at runtime.
You would also have to maintain the instance variable of the current theme id.
Is this what you are looking for?
public function switchTheme(theme:int):void {
StyleManager.unloadStyleDeclarations("assets/styles/Theme"+currentTheme+".swf");
StyleManager.loadStyleDeclarations("assets/styles/Theme"+theme+".swf");
this.currentTheme = theme;
}
You would then assign the click handlers for each button to the switchTheme function - passing the theme id as a parameter.
I think you have to loop all control one by one and set theme on control.
for Eg.
If you set default theme RED and button is red then you change theme to Blue then you set button color to blue using looping of control.
May be this help to you....
Please ask me if you not getting what i am saying...
Thanks.
You need to compile your CSS files as SWF. You can right-click the CSS files in Flash Builder's explorer window and select "Compile CSS to SWF" from the menu.
Then you use the loadStyleDeclarations() method from StyleManager to load the SWF file with your CSS info.
The previous step will only add the new styles to your style subsystem. If you want to clear the old styles, you need the unloadStyleDeclarations() method first.
If you unload the currently active CSS declarations, use false as the second parameter so StyleManager does not invalidate the styles and rebuilds the style declaration chains/cache for the components on stage. This is not only be slow, but will also result on a screen refresh with the default styles before applying the new styles.
You could have something similar to this, and call applyTheme('url/to/theme.swf') with the appropriate URL whenever you want to change the theme:
private var currentThemeURL:String = 'themes/default.swf';
public function applyTheme(themeURL:String):void
{
StyleManager.unloadStyleDeclarations(currentThemeURL, false);
StyleManager.loadStyleDeclarations(themeURL);
currentTheme = themeURL;
}