There's Ext grid panel with checkbox column.
The purpose is to handle checkbox cell click (which cell clicked & value)
Ext.define('App.Model.Users', {
extend: 'Ext.data.Model',
fields: ['Id', 'Login', 'Fio', 'Organization', 'Locked']
});
var usrstore = Ext.create('App.Data.Lstore', {
model: 'App.Model.Users',
autoLoad: false,
proxy: {
type: 'ajax',
url: '/Admin/GetUsers'
}
});
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: { edit: function(editor, e){console.log('gf')} }
});
var usrgrid = Ext.create('Ext.grid.Panel', {
height: 600,
store: usrstore,
columns: [
Ext.create('Ext.grid.RowNumberer'),
{ dataIndex: 'Login', width: 300, text: 'Логин' },
{ dataIndex: 'Fio', flex: 1, width: 250, text: 'Фамилия И. О.' },
{ dataIndex: 'Organization', flex: 2, width: 200, text: 'Организация' },
{ dataIndex: 'Locked', width: 120, text: 'Блокировка', xtype: 'checkcolumn', align: 'center'}]
});
But no edit event from plugin comes..
What config grid plugin need to start work?
You need to set your 'cellEditing' in the plugins:[] config. You might also want to specify and editor (text,date,number, etc) on each column that you want to edit. See sencha examples for this stuff. Also checkbox is a Row selector not a cell selector - just something to keep in mind.
Related
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 a Grid in a Window. When i click on a row of that window and click on the remove button, that row should get removed from the window. (I think i will have to remove it from Store and reload the grid, so the changes will be picked)
I am unable to get the click event and remove the row from the store. I have added the button for this but not able to get the Grid record and remove it from store and reloading it.
My code is as follows;
Ext.define('MyApp.view.Boy', {
extend: 'Ext.window.Window',
alias: 'widget.boy',
height: 800,
width: 900,
layout: {
type: 'absolute'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
height: 500,
width: 800,
title: 'My Grid Panel',
store: 'School',
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Id',
text: 'id'
},
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'name'
}
]
},
{
xtype: 'button',
height: 40,
width: 150,
text: 'Remove',
listeners: {
click: {
fn: me.removebuttonclick,
scope: me
}
}
}
]
});
me.callParent(arguments);
},
removebuttonclick: function(button, e, options) {
console.log('removebuttonclick');
}
});
Something like:
Ext.define('MyApp.view.Boy', {
extend: 'Ext.window.Window',
alias: 'widget.boy',
height: 800,
width: 900,
layout: {
type: 'absolute'
},
initComponent: function() {
var me = this;
var this.grid = Ext.widget({
xtype: 'gridpanel',
height: 500,
width: 800,
title: 'My Grid Panel',
store: 'School',
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Id',
text: 'id'
},
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'name'
}
]
});
Ext.applyIf(me, {
items: [
this.grid, //oopsie
{
xtype: 'button',
height: 40,
width: 150,
text: 'Remove',
listeners: {
click: {
fn: me.removebuttonclick,
scope: me
}
}
}
]
});
me.callParent(arguments);
},
removebuttonclick: function(button, e, options) {
var me = this;
Ext.Array.each(this.grid.getSelectionModel().selected,function(record, index,selectedRows){
me.grid.getStore().remove(record);
});
}
});
Pardon me if this doesnt make much sense as i am still trying to understand certain aspects of extjs.. I m trying to to dynamically fetch a menu when a page is loaded. But seems like my MenuFetch() function does not get called.
Here is my code and here is the page:
http://srikanthrajan.com/test/
Center = Ext.create('Ext.panel.Panel', {
title: "User Admin",
region: 'center',
layout: 'fit',
dockedItems: {
xtype: 'panel',
dock: 'left',
title: 'Main Menu',
width: 160,
layout: 'anchor',
collapsible: true,
collapseDirection: 'left',
items: [
{
defaults: {
width: 140,
layout: 'vbox',
xtype: 'linkbutton'
},
id: 'MainMenu',
xtype: 'panel',
listeners: {
load: function(menu) {
menu.show()
MenuFetch()
this.load()
}
}
}
]
}
});
//function that uses ajax to fetch menu items and add them
function MenuFetch() {
Ext.getBody().mask('loading')
var menu = Ext.ComponentManager.get('MainMenu')
menu.removeAll(true)
Ext.Ajax.request({
url: 'PanelScripts/getMenu.php',
method: 'POST',
callback: function(opt, success, response) {
var text = response.responseText;
var obj = Ext.JSON.decode(text);
if (success && !obj.failure) {
menu.add(obj)
Ext.getBody().unmask()
menu.show()
} else {
obj = Ext.JSON.decode(response.responseText);
Ext.Msg.alert('Error',obj.Error)
Ext.getBody().unmask()
}
}
});
}
PS: I am not sure if I even need the load listener. Basically I need to call the menuftech function which fetches the menu items in a json format.
Use the Ext.ComponentLoader (or loader config property) to load remote content for the menu. It seems like the xtype should be 'menu' instead of 'panel' based on what you are trying to accomplish. Try something like this:
var adminPanel = Ext.create('Ext.panel.Panel', {
title: 'User Admin',
region: 'center',
layout: 'fit',
dockedItems: {
xtype: 'panel',
dock: 'left',
title: 'Main Menu',
width: 160,
layout: 'anchor',
renderTo: Ext.getBody(),
items:[
{
xtype: 'menu',
width: 100,
loader: {
url: 'foo.bar',
autoLoad: true,
callback: function(loader, success, response, options) {
var menu = adminPanel.down('menu');
if (success) {
menu.add(response.items);
menu.show();
}
},
scope: this
}
}
]
}
});
I did the following code to list the searched items in the grid.
Ext.onReady(function(){
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var searchUsers = new Ext.FormPanel({
renderTo: "searchUsers",
frame: true,
title: 'Search Users',
bodyStyle: 'padding:5px',
width: 500,
items:[{
xtype:'textfield',
fieldLabel: 'Username',
name: 'userName'
}],
buttons:[
{
text:'Search',
formBind: true,
listeners: {
click: function(){
Ext.Ajax.request({
method:'GET',
url : url+'/lochweb/loch/users/getUser',
params : searchUsers.getForm().getValues(),
success : function(response){
console.log(response); //<--- the server response
Ext.define('userList', {
extend: 'Ext.data.Model',
fields: [{ name: 'id', mapping: 'id' },
{ name: 'name', mapping: 'name' },
{ name: 'firstName' ,mapping:'personalInfo.firstName'},
{ name: 'lastName' ,mapping:'personalInfo.lastName'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'userList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/users/getUser',
reader: {
type: 'json',
root: 'Users'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: "searchUsers",
plugins: [rowEditing],
width: 900,
height: 300,
frame: true,
title: 'Users',
store: store,
iconCls: 'icon-user',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
},
{
text: 'Name',
flex: 1,
sortable: true,
dataIndex: 'name',
field: {
xtype: 'textfield'
}
},
{
text: 'FirstName',
flex: 1,
sortable: true,
dataIndex: 'firstName',
field: {
xtype: 'textfield'
}
},
{
text: 'LastName',
flex: 1,
sortable: true,
dataIndex: 'lastName',
field: {
xtype: 'textfield'
}
}]
});
}
});
}
}
}
]
});
var win = new Ext.Window({
layout:'fit',
closable: false,
resizable: true,
plain: true,
border: false,
items: [searchUsers]
});
win.show();
});
How to Fit the grid inside the Search User window
Add an icon in the grid,so that by clicking on that icon the values from the
grid must be populated to entry form for update.
Here with your code, I've found something:
Use renderTo: "searchUsers" for both FormPanel and the Grid: You add the FormPanel to the window, so this config should not exist (Please refer to renderTo document). So remove them.
Use frame: true for both FormPanel and the Grid: There you have the window as container, so the Form and Grid have been framed inside. So remove them.
You dynamically add the Grid on searching: I recommend you create the result Grid as a separate component (not inside success's result) and specify both Form and Grid as items' components of window. You still can config the Grid with hidden. When Ajax is successful, you can fill the Grid with data returned and show it.
"add an icon in the grid": You can specify a new column in columns of the Grid and use renderer config of grid panel to show the button. For example:
renderer: function(v) {
return "<input type='button'.../>";
}
Finally, you can catch the itemclick event of the grid to know if the column of the clicked cell is the cell which contains the button, the entry will be populated to somewhere you want. Don't forget to specify the grid's Selection model as cellmodel
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;
}