Related
I have the next code:
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose one',
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'This is a long text to test the selectfield', value: 'third'}
]
}
]
}
]
});
I want to change the selectfield width since the third option is very long.
There are the width and the maxWidth configs for that.
EDIT:
div.x-select-overlay { width: 15em !important }
The above result would override the select field overlay in entire application.
To be more precise and accurate, you can override the width or height property by using select field defaultPhonePickerConfig or defaultTabletPickerConfig in your specific selectfield.eg`.
{
xtype: 'selectfield',
defaultPhonePickerConfig: {
height: '8em',
width:'10em'
},
defaultTabletPickerConfig: {
height: '8em',
width:'10em'
},
}
I have finally solved this with:
.x-select-overlay{
min-width: 25em !important;
}
in app.scss
I have put two buttons inside a tab Panel in Sencha Touch 2 application. The code is given below:
var btnAttendance = Ext.create('Ext.Button', {
text: 'Take Attendance',
padding: 10,
width: 200,
handler: function () {
alert('a');
}
});
var btnAddUser = Ext.create('Ext.Button', {
text: 'Add User',
padding: 10,
width: 200,
handler: function () {
alert('a');
}
});
var buttonContainer = Ext.create('Ext.Panel', {
fullscreen: true,
title: 'Home',
defaults: {
margin: 5
},
layout: {
type: 'vbox',
align: 'center'
},
padding: 10,
items: [
btnAttendance,
btnAddUser
]
});
Ext.application({
requires: [
'Ext.tab.Panel'
],
launch: function () {
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
buttonContainer,
{
title: 'Present',
items: {
html: '2',
centered: true
},
cls: 'present'
},
{
title: 'Absent',
items: {
html: '3',
centered: true
},
cls: 'absent'
}
]
});
}
});
I have tried modifying the handler function as:
handler: function (button, event)
But this also doesn't work.
Thanks,
Nitin
You need to put all your code inside Ext.application... and launch:function(){...}.... Your code is working fine. See demonstration here.
But then again, buttonContainer is not really being added to any tab panel. If you change the tab, you can see buttonContainer is gone once to change the tabs. If you want to add it inside any tab do this-
First -
Set fullscreen:false to you buttonContainer panel.
var buttonContainer = Ext.create('Ext.Panel', {
fullscreen: false,
....... //rest of the code.
And suppose you want to add those buttons in Present tab. You can do this with following--
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
{
title: 'Present',
cls: 'present',
items: [
{
html: '2',
centered: true
},
buttonContainer
]
},
{
title: 'Absent',
items: {
html: '3',
centered: true
},
cls: 'absent'
}
]
});
Here, buttonContainer is added as an item inside present tab only. You can switch the tabs and can see buttons there with correct event handler.
See this demo here
If you follow MVC architecture, your job becomes much easier writing application having multiple views and user interactions. ST is all about MVC and it's good practice to follow it.
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 added a Panel (i call it My Panel 1), and another panel within this panel (I call it My Panel 2), and then added a grid into the 2nd panel (to My Panel 2). When i click on the Restore Down or the re-sizing button of the browser, it doesn't shrink the components to fit the screen size. How can i solve this ?
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
height: 469,
width: 729,
title: 'My Panel 1',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'panel',
height: 238,
title: 'My Panel 2',
items: [{
xtype: 'gridpanel',
height: 179,
title: 'My Grid Panel 1',
columns: [{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
}, {
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
}, {
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
}, {
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}],
viewConfig: {
}
}]
}]
});
me.callParent(arguments);
}
});
I would suggest using a viewport - it automatically adjusts to the "view port" of your browser :)
Also do not set fixed width and height if you want them to be managed automatically.
Here is a sample: http://jsfiddle.net/dbrin/gWaCv/embedded/result/
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;
}