I have following code :
var modelForm=[
{
type: 'fieldset',
title: 'Component',
items: [
{
type: 'tabs',
tabs: [
{
title: 'Product',
items: [
'productName',
'releaseVersion',
'distroName',
'stackCategory',
.....
.....
{ type: 'submit', title: 'Update', condition: 'model.id && ! confirmDelete' },
{ type: 'submit', title: 'Create', condition: '!model.id && !confirmDelete' },
{ type: 'button', title: 'Cancel', onClick: 'cancel()', condition: '!confirmDelete' },
{ type: 'button', title: 'Delete', onClick: 'confirmDelete=true' , condition: 'model.id && ! confirmDelete'},
{ type: 'help', helpvalue: '<h1 class=\'\'>Are you sure you want to delete?<h1>', condition: 'confirmDelete' },
{ type: 'button', title: 'Don\'t delete', onClick: 'confirmDelete=false',condition: 'confirmDelete' },
{ type: 'button', title: 'Confirm delete', onClick: 'deleteModel()' , condition: 'confirmDelete'}
Because of using fieldset, all the elements are coming vertically. I want the buttons - Create, Cancel, and Delete described in then end to be in one line.
how can I achieve this?
We solved this for just two buttons ("cancel", "save") by adding the following bootstrap less style:
.schema-form-submit {
display: inline;
}
.schema-form-submit input {
.pull-right;
}
Related
In modern toolkit extjs, how to create context menu for an empty grid(grid with no rows).
Add contextmenu listener to grid element:
Ext.application({
name: 'Fiddle',
launch: function () {
const store = new Ext.data.Store({
fields: ['name', 'email', 'phone'],
data: []
})
const menu = new Ext.menu.Menu({
items: [{
text: 'Menu Item 01'
}, {
text: 'Menu Item 02'
}]
});
Ext.Viewport.add({
xclass: 'Ext.grid.Grid',
store: store,
title: "My Empty Grid",
columns: [{
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Email',
dataIndex: 'email',
width: 250
}, {
text: 'Phone',
dataIndex: 'phone',
width: 120
}],
height: 500,
listeners: {
initialize: function (grid) {
grid.element.dom.addEventListener("contextmenu", function (event) {
menu.showAt(event.pageX, event.pageY);
event.stopImmediatePropagation();
if (event.preventDefault != undefined) {
event.preventDefault();
}
if (event.stopPropagation != undefined) {
event.stopPropagation();
}
return false;
});
}
}
})
}
})
The best solution I've found is to add a context menu to the grid header. Trap the headercontextmenu event to do this.
Regards- Gordon
I have a simple Extjs (5.1.1) Tree menu:
var menu = new Ext.tree.Panel( {
root: {
text: 'My menu',
expanded: true,
listeners: {
itemclick: function(s,r) {
alert(r.data.text);
}
},
children: [{
text: 'System',
expanded: true,
children: [{
text: '',
leaf: true
}, {
text: 'System Users',
leaf: true
}, {
text: 'System Administrators',
leaf: true
}]
}, {
text: 'Settings',
expanded: true,
children: [{
text: 'Passwords',
leaf: true
}, {
text: 'Emails',
leaf: true
}, ]
}, {
text: 'Logs',
leaf: true,
}]
}
});
Ext.application({
name : 'MVC',
launch : function() {
Ext.create('Ext.container.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
items: [
{
title: 'North',
region: 'north',
height: 50,
xtype: 'container'
},
{
title: 'Menu',
region:'west',
floatable: false,
items: menu,
width: 300
},
{
title: 'Center',
region: 'center'
}
]
});
}
});
My problem: The contents (GRID) have some js file. And I would like click one of the tree menu than js load 'Center' item. But I don't know how. :-(
Example system_users.js file: (This file should load on center when I click System Users on the Tree.)
var Users = {
init: function () {
itemdblclick: this.editDocument
},
edit: function(grid, roWindex, e) {
var id = grid.getStore().getAt(rowIndex);
Users.openEditForm(id);
},
openEditForm: function(id){
// form open
}
};
Users.init();
Ext.application({
name : 'Users',
launch : function() {
Ext.widget({
renderTo : Ext.getBody(),
xtype : 'grid',
title : 'Users',
height : 800,
store : {
fields : [ 'login_id',
'login_name',
'login_firstname',
'login_middlename',
'login_lastname',
'login_email',
'login_mobile',
'login_status' ],
autoLoad : true,
proxy: {
type: 'ajax',
api: {
read: 'http://users/select',
create: 'http://users/insert',
update: 'http://users/update',
destroy: 'http://users/delete'
},
reader: {
type: 'json',
successProperty: 'success',
root: 'data',
messageProperty: 'message'
},
writer: {
type: 'json',
writeAllFields: false,
root: 'data'
}
}
},
columns: {
items: [
{ text: 'ID', dataIndex: 'login_id', editor: 'textfield', width: 200 },
{ text: 'Login Name', dataIndex: 'login_name', editor: 'textfield', width: 200 },
{ text: 'Firstname', dataIndex: 'login_firstname', editor: 'textfield', width: 200 },
{ text: 'Middlename', dataIndex: 'login_middlename', editor: 'textfield', width: 200 },
{ text: 'Lastname', dataIndex: 'login_lastname', editor: 'textfield', width: 200 },
{ text: 'Email', dataIndex: 'login_email', editor: 'textfield', width: 200 },
{ text: 'Mobile', dataIndex: 'login_mobile', editor: 'textfield', width: 200 },
{ text: 'Status', dataIndex: 'login_status', editor: 'textfield', width: 200 }
]
},
listeners: {
itemdblclick: function(dv, record, item, index, e) {
// This is row index
alert(index);
}
}
})
}
});
I have been working with web desktop example in ExtJS5. The example has static data and no events. I wanted to implement a click event on 'Remove Something' button on grid window. Here is my modified code:
Ext.define('SampleApp.view.main.GridWindow', {
extend: 'Ext.ux.desktop.Module',
requires: [
'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer'
],
init: function () {
this.launcher = {
text: 'Grid Window',
iconCls: 'icon-grid'
};
},
controller: 'gridwindow',
createWindow: function () {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if (!win) {
win = desktop.createWindow({
id: 'grid-win',
title: 'Grid Window',
width: 740,
height: 480,
iconCls: 'icon-grid',
animCollapse: false,
constrainHeader: true,
layout: 'fit',
items: [
{
border: false,
xtype: 'grid',
store: mock.view.main.GridWindow.getDummyData(),
columns: [{ xtype: 'rownumberer', sortable: false, text: "S.N.", width: 70 }, {
id: 'topic',
text: "Topic",
dataIndex: 'gridTopic',
flex: 1,
align: 'center'
}, {
text: "Author",
dataIndex: 'gridAuthor',
flex: 1,
align: 'center',
sortable: true
}, {
text: "Replies",
dataIndex: 'gridReplies',
align: 'center',
flex: 1,
sortable: true
}, {
id: 'last',
text: "Last Post",
dataIndex: 'gridLastPost',
flex: 1,
align: 'center',
sortable: true
}]
}
],
tbar: [{
text: 'Add Something',
tooltip: 'Add a new row',
iconCls: 'add'
}, '-', {
text: 'Options',
tooltip: 'Modify options',
iconCls: 'option'
}, '-', {
text: 'Remove Something',
tooltip: 'Remove the selected item',
iconCls: 'remove',
listeners: {
click: 'onDeleteClick'
}
}]
});
}
return win;
},
statics: {
getDummyData: function () {
var _store = Ext.create('Ext.data.Store', {
fields: [
{ name: 'gridId', type: 'int' },
{ name: 'gridTopic', type: 'string' },
{ name: 'gridAuthor', type: 'string' },
{ name: 'gridReplies', type: 'string' },
{
name: 'gridLastPost', type: 'date', convert: function (value) {
var _date = new Date(value);
return Ext.Date.format(_date, "Y-m-d H:i:s");
}
}
]
});
var _responseText;
Ext.Ajax.request({
async: false,
url: 'http://localhost/sampleapp/getusers',
method: 'GET',
success: function (resp) {
_responseText = Ext.decode(resp.responseText);
_store.loadData(_responseText);
}
});
return _store;
}
}
});
I am unable to handle 'onDeleteClick' event inside the controller. Here is the controller definition:
Ext.define('SampleApp.view.main.GridWindowController', {
extend: 'Ext.app.ViewController',
alias: 'controller.gridwindow',
onDeleteClick: function (button, evt) {
alert('Clicked');
}
});
Can someone point out the mistake. How can this event be handled?
Ext.ux.desktop.Module does not accept controller config option.
Use your controller on an Ext.Component — in your case either the grid or the window.
UPDATE:
I found if do this
this.add([topToolbar, {
xtype: "fieldset",
items: [showNameEditor, textEditor]
},
showsList, bottomToolbar
]);
and
layout: {
type: 'fit'
}
Then the list shows but the textfields don't appear
Original:
I am trying to get a list to show in my panel the two textFields show but the list doesn't appear. I tried different Stores with the list but still it doesn't show.
var showNameEditor = {
xtype: 'textfield',
name: 'name',
label: 'Name',
required: true
};
var textEditor = {
xtype: 'textfield',
name: 'name',
label: 'Name',
required: true
};
var showsList = {
xtype: 'list',
title: 'Sample',
itemTpl: '{title}',
data: [{
title: 'Item 1'
}, {
title: 'Item 2'
}, {
title: 'Item 3'
}, {
title: 'Item 4'
}
]
};
this.add([topToolbar, {
xtype: "fieldset",
items: [showNameEditor, showsList, textEditor]
},
bottomToolbar
]);
You have to specify dimensions for fieldset & form if you want to display their contents so use width & height configs
i am new to ext, i want to create a custom component containing a form and use it by registering it as a xtype, where i want:
MyComponent = Ext.extend(Ext.FormPanel, {
initComponent: function () {
Ext.apply(this, {
labelWidth: 50,
// label settings here cascade unless overridden
items: [{
xtype: 'label',
text: 'Name'
},
{
xtype: 'textfield',
label: 'First Name',
name: 'firstname',
id: 'firstname',
allowBlank: true
},
{
xtype: 'label',
text: 'Last Name',
style: {
'color': 'black',
'font-size': '10px'
}
},
{
xtype: 'textfield',
label: 'lastname',
name: 'lastname',
id: 'lastname'
},
{
xtype: 'label',
text: 'Teams'
},
{
xtype: 'button',
text: 'Save',
handler: function () {},
id: 'save',
},
{
xtype: 'button',
text: 'cancel',
handler: function () { //Ext.Msg.alert('Status', 'Changes saved successfully.');
Ext.example.msg(' Click', 'You cancelled');
}
}
]
});
MyComponent.superclass.initComponent.apply(this, arguments);
},
onRender: function () {
MyComponent.superclass.onRender.apply(this, arguments);
}
});
Ext.reg('mycomponentxtype', MyComponent); /* paste in your code and press Beautify button */
if ('this_is' == /an_example/) {
do_something();
} else {
var a = b ? (c % d) : e[f];
}
When i create my own Components i do this:
Ext.define('MyApp.view.dialog.MyDialog', {
'extend' : 'Ext.window.Window',
'alias' : 'widget.MyDialog',//declare xour own xtype here
'title' : 'My Dialog',
'items' : [{
'xtype' : 'textfield',
'fieldLabel' : 'Surename',
//other config here
}] // other items here
});
Then you can say:
Ext.widget('MyDialog').show();