Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'MAin Panel',
renderTo:Ext.getBody(),
height:600,
width:600,
bodyStyle: {
background: 'yellow',
position:'absolute ',
'z-index': -1
},
items:[
{
xtype: Ext.create('Ext.window.Window',{
height : 500,
width : 500,
id:'abc',
items : [
{
xtype : 'button',
text : 'Open',
handler : function(){
/* w2.showAt(450,300);
w1.disable(); */
}
},
{
xtype:'panel',
title:'Inner Panel',
height:200,
width:200,
style:{
position:'absolute ',
'z-index': 2
}
}
],
bodyStyle:{
background: '#000000',
opacity: 0.7,
},
style:{
position:'absolute',
'z-index': 1
}
})
}
]
});
Ext.getCmp('abc').show();
w1.setTitle('Window 1');
w1.show();
});
I have the above code, and I want that "Inner Panel" should come over window "abc", and the opacity attribute should not apply on "Inner Panel". Child components of window "abc" is also getting the opcaity. I have tried the style:{ position:'absolute', 'z-index': 1}, same code is working html,but not in extjs.
I suggest you to use ZIndexManager.
First, register all of your containers and then use bringToFront method to show the container you want.
Related
Does anyone know how you go about styling the PDF generated from the Buttons extension? I specifically just want to td align right.How can I use colspan in datatable?
Thank you
my code is
$('#reporTable').DataTable({
"paging" : false,
"ordering": false,
"info" : false,
"searching" : false,
dom: 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "/javascripts/js/dataTables/tools/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "pdf",
"sTitle": $filename,
"sPdfOrientation": "landscape",
"sPdfMessage": $out_name+":" + msg
},
],
}
});
Here is the example code of it.
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [{
extend: 'pdfHtml5',
title: 'My title' + '\n' + 'a new line',
customize: function(doc) {
doc.styles.title = {
color: 'red',
fontSize: '40',
background: 'blue',
alignment: 'center'
}
doc.styles.tableHeader = {
color: 'red',
background: 'blue',
alignment: 'right'
}
doc.styles.tableBodyEven = {
background: 'yellow',
alignment: 'right'
}
doc.styles.tableBodyOdd = {
background: 'blue',
alignment: 'right'
}
doc.styles.tableFooter = {
background: 'blue',
alignment: 'right'
}
doc.styles['td:nth-child(2)'] = {
width: '100px',
'max-width': '100px'
}
}
}]
})
I've got a structure like below.
I can reference (from the button handler) with up.down my component but I'm wondering if there is a more correct way to do this.
Ext.application({
name: 'MyApp',
launch: function () {
Ext.create('Ext.container.Viewport', {
items: [
{
tpl: 'Name: {first} {last}',
data: {
first: 'Peter',
last: 'Kellner'
},
padding: 20,
width: 200,
height: 200,
style: {
border: '2px solid red'
},
resizable: true,
itemId: 'myComponentItemId',
listener: {
resize: {
fn: function(component, width, height) {
console.log("w/h:" + width + " " + height);
}
}
}
},{
xtype: 'button',
text: "Disable",
handler: function () {
debugger;
this.up().down('#myComponentItemId').disable();
}
}
]
});
}
});
It is correct to use .up.down for what you are trying to do. You could use something like :
.up('form').down('button#login')
What you use in your code, on the other hand is not correct : this.up().down('#myComponentItemId'). You must pass a component selector as argument to .up().
Alternatives to .up.down are .nextSibling and .previousSibling. Similar, but more general there are also .nextNode and .previousNode.
I have a quite a complicated layout for my application, using borders, vbox's and hbox's which all seem to fit quite well except for one annoyance. The bottom of the grid in the southern region is not behaving. I want the grid to take up the height of the panel when the browser is above minHeight/maximized but at the moment it look like this:
And when the browser is shrunk (but not below min size) it looks like this and I am unable to get to the bottom of the grid scrollbar :(
You can see the scrollbar cut of (probable min height on the viewport/grid issue) but not sure how to fix this can someone spot what I need to do resolve these two issues? Code below:
<script type="text/javascript" src="../app.js"></script>
<!-- script to warn users when leaving page -->
<?php
$db = Zend_Registry::get('db');
$result = $db->query("select ERROR_ID, ERROR_DESCRIPTION, EMAIL_CONTENT, to_char(\"TIMESTAMP\", 'MM/DD/YYYY HH24:MI:SS') as TIMESTAMP, READ from PI_EMAIL_ERROR where \"TIMESTAMP\" = ( select max(\"TIMESTAMP\") from PI_EMAIL_ERROR ) and READ = 0 and rownum = 1")->FetchAll();
?>
<script type="text/javascript">
var container = Ext.create('Ext.container.Viewport',{
id: 'mainWindow',
minWidth: 800,
minHeight: 640,
layout:'fit',
listeners: {
afterrender: function() {
this.setSize(this.getWidth(), this.getHeight());
},
resize: function(){
var programGrid = Ext.getCmp('programList');
if(this.getHeight() < this.minHeight){
console.log("Height: ", this.getHeight());
console.log("minHeight: ", this.minHeight);
console.log("Grid old height: ", programGrid.height);
programGrid.height = (this.minHeight - programGrid.height)-18;
this.setSize(this.getWidth(), this.getHeight());
console.log("Grid new height: ", programGrid.height);
} else {
programGrid.height = 380;
}
}
},
defaults: {
//collapsible: true, //Add this to true later maybe impliment a lock sam
//when viewport scrolled up, background shows a login.
split: true,
rezisable: false
},
items:[{
layout: 'border',
//height: 640,
//minHeight: 640,
items: [
{
//This panel holds the file menu strip and the show combo
border: false,
region: 'north',
height: 92,
bodyStyle:'background: #DFE8F6;',
/******Toolbar*******/
tbar: [
/****File Button****/
{
xtype: 'button',
text: window.samlanguage.file,
width: 60,
handler: function(btn){
},
menu: [
{
text: window.samlanguage.refreshlist,
action: 'refreshGrid',
icon: '../assets/images/refresh.png',
handler: function(btn){
}
},{
text: window.samlanguage.settings,
icon: '../assets/images/settings.png',
action: 'spawnSettings',
handler: function(Btn){
}
},{
text: window.samlanguage.compose,
icon: '../assets/images/mail--plus.png',
action: 'spawnEmail',
handler: function(Btn){
Ext.create('APP.view.core.forms.Emailform').show();
}
},{
text: window.samlanguage.logout,
action: 'logout',
icon: '../assets/images/exit.png',
handler: function(){
}
}
]
},
/****Help Button****/
{
xtype: 'button',
text: window.samlanguage.help,
width: 60,
handler: function(btn){
},
menu: [
{
text: window.samlanguage.contents,
icon: '../assets/images/contents.png',
action: 'spawnContents',
handler: function(btn){
}
},{
text: window.samlanguage.license,
icon: '../assets/images/licence.png',
handler: function(btn){
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"<b>Retrieving</b> licensing information..."});
myMask.show();
Ext.Ajax.request({
url: '../License/read',
method: 'post',
//params: values,
success: function(response){
myMask.hide();
var numusers = Ext.decode(response.responseText);
Ext.create('APP.view.core.forms.License', {numusers: numusers.numusers}).show();
}
});
}
},{
text: window.samlanguage.about,
icon: '../assets/images/about.png',
//action: 'spawnAbout',
handler: function(btn){
Ext.Msg.show({
title:'About us',
buttons: Ext.Msg.OK,
icon: 'perceptiveLogo'
});
}
}
]
}
],
items: [{
//Comboform with userlist
xtype: 'Comboform',
bodyStyle:'background: #DFE8F6;',
border: false
}]
}//End north region (header) region
,{
region:'center',
type: 'vbox',
align : 'stretch',
items: [
{
//Add the userlist grid
title: 'Currently showing all users',
//id: 'usergridList',
height: 290,
minHeight: 290,
border: false,
xtype: 'Allusers'
},
{
//Add the allprograms grid
title: 'Program Access Permissions',
border: false,
height: 380,
minHeight: 380,
//height: 'auto',
xtype: 'Allprograms'
}
]
} //End center (body) region
,{
region:'east',
type: 'vbox',
align : 'stretch',
split: true,
//collapsible: true,
width: 240,
minWidth: 240,
maxWidth: 240,
//title: 'User Actions',
listeners: {
/*collapse: function() {
this.setTitle("User management");
},
expand: function() {
this.setTitle("User Actions");
},
click: function() {
return false;
},*/
afterrender: function(){
this.splitter.disable();
}
},
//height: 300
items :[
{
title: 'User Actions',
border: false,
height: 168,
xtype: 'Useractionsform'
},
{
title: 'View Audit',
border: false,
height: 122,
xtype: 'Auditform'
},
{
title: 'Program Access',
border: false,
height: 380,
minHeight: 340,
xtype: 'Programactionsform'
}
]
} //End of east region
,{
region: 'south',
height: 20,
bodyStyle:'background: #DFE8F6;',
border: false
}
]
}]
}).show();
});
</script>
Syntax highlighted link:
http://paste.laravel.com/kPr
Thank you kindly
Nathan
I'm referring to lines 87-97 of the syntax highlighted link you posted.
resize: function(){
var programGrid = Ext.getCmp('programList');
if(this.getHeight() < this.minHeight){
console.log("Height: ", this.getHeight());
console.log("minHeight: ", this.minHeight);
console.log("Grid old height: ", programGrid.height);
programGrid.height = (this.minHeight - programGrid.height)-18;
this.setSize(this.getWidth(), this.getHeight());
console.log("Grid new height: ", programGrid.height);
} else {
programGrid.height = 380;
}
}
This is the resize handler for the viewport, so every time the browser is resized, this funciton will explicitly set the grid height. Not sure what the purpose of this code is but it looks like it could be the issue. Generally you shouldn't need code like this - everything should fit together if you have the layouts set up right, and then you can use minHeight/maxHeight for the grid if you want. What happens if you just take this code out?
I think you need to remove the resize event handler completely. It looks like you're trying to create a 'vbox' layout on your center panel, but you're using 'type: vbox'. Try using this:
layout: {
type: 'vbox'
align : 'stretch',
pack : 'start',
}
This was taken from the ExtJS examples (http://docs.sencha.com/ext-js/4-2/extjs-build/examples/layout-browser/layout-browser.html). Then you can just add a 'flex' to your child containers instead of a minheight.
I have implemented a list view for different colors in Sencha Touch.
And implemented a item tap method to push the view in container.
And Implemented 4 views for each 4 color RedPage.js, WhitePage.js, yelloPage.js, GreenPage.js.
View:
{
xtype: 'list',
id : 'ColorsList'
width: '20%',
itemTpl: [
'<div><b>{Color}<b></div>'
],
data: [
{Color: 'Red' },
{Color: 'Blue'},
{Color: 'Yellow},
{Color: 'Green}
]
},
Container:
ColorsList: '#ColorsList',
init function(){
..
..
..
..
'ColorsList' : {
itemtap : 'ColorsPagesSelected'
},
...
...
...
},
ColorsPagesSelected Method:
ColorsPagesSelected: function() {
alert('Color page pushed');
this.getColorrightnavigation().push(Ext.create('ArtGalleryApp.view.RedPage'));
},
Since i used Colorslist id and used to push RedPage for list, it displays RedPage for each item in the list.
I dont know how to get different pages for differnt rows
Can any one help me pls thanks in advance
assuming you defined your colored pages like this:
Ext.define('App.view.RedPage', {
extend: 'Ext.Panel',
xtype: 'RedPage',
...
});
use helpful Ext.widget function
ColorsPagesSelected: function(ct, index, target, record) {
alert('Color page pushed');
var color = record.get('Color'),
pageName = color + 'Page',
page = Ext.widget(pageName);
this.getColorrightnavigation().push(page);
}
My favorite hack for this is to assign functions to records
{
xtype: 'list',
id: 'ColorsList'
width: '20%',
itemTpl: ['<div><b>{Color}<b></div>'],
data: [{
Color: 'Red',
getPage: function() {
return Ext.create('ArtGalleryApp.view.RedPage');
}
}, {
Color: 'Blue'
}, {
Color: 'Yellow},
{Color: '
Green
}]
},
init function(){
'ColorsList' : {
itemtap : 'ColorsPagesSelected'
},
ColorsPagesSelected: function(ct, index, target, record) {
alert('Color page pushed');
this.getColorrightnavigation().push(record.getPage());
}
I have following code that I creating a grid
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{ name: 'company' },
{ name: 'price', type: 'float' },
{ name: 'change', type: 'float' },
{ name: 'pctChange', type: 'float' }
],
data: myData
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
renderTo: 'divGrid',
columns: [
{ text: 'Company',
flex: 1,
dataIndex: 'company'
},
{ text: 'Price',
flex: 1,
dataIndex: 'price'
},
{ text: 'Change',
flex: 1,
dataIndex: 'change'
},
{ text: '% Change',
flex: 1,
dataIndex: 'pctChange'
}],
height: 250,
width: '100%',
title: 'Array Grid',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
});
I want to change color and width of border grid. How can I do it ?
Quick and dirty you can set this config on any grid or really any component that draws a box:
style: 'border: solid Red 2px'
The more correct way is to create a css rule and set cls:'myRedBorderRule' in the config.
EDIT:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
renderTo: 'divGrid',
style: 'border: solid Red 2px',
.....
ExtJS Grid Panel class provides you with parameters to define your custom styles. You can make use of the following class parameters :
border
bodyStyle
bodyCls
bodyBorder
bodyPadding
You can use combination of these parameters to manipulate the grid's border and body styles. Refer to the docs for details of these parameters.
Add below css to remove border
.x-panel-body .x-grid-item-container .x-grid-item {
border: none;
}