PDA

View Full Version : making more complex "add" grid row button (declaring the row place too....)



lironla
14 Apr 2012, 4:38 AM
When I choose to add a record to the grid ,it is added to the top automatically and is given row number 1 (rownumberer) , pushing all the rows one step down.
However , when I push the add button I want it to open a combobox with (top, buttom and above\below selected row) to enable choosing the placing of the new row in the grid.




Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');


Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
'Ext.ux.CheckColumn'
]);






Ext.onReady(function(){
// Define our data model
Ext.define('Rule', {
extend: 'Ext.data.Model',
fields: [
{name: 'number', type: 'float'},
{name: 'track'},
{name: 'comment', type: 'string'},

{ name: 'active', type: 'bool' },
{ name: 'enable', type: 'string' }
]
});





// Generate mock rule data
var data = (function() {
var comments = ['Hit', 'The', 'Road', 'Jack', 'And', 'Dont', 'You', 'Come', 'Back', 'No', 'More'],
tracks = ['Alert','None','Log'],
commentslen = comments.length,

data = [],
start = 0,
end = 20,


getRandomInt = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},


generateComment = function() {
var name = comments[getRandomInt(0, commentslen - 1)];

return name;
};


generateTrack = function() {
var tr = tracks[getRandomInt(0, tracks.length - 1)];

return tr;
};


while (start < end) {
var name = generateComment();
var track = generateTrack();
data.push({
number:start+1,
track : track,
comment: name.toLowerCase().replace(' ', '.'),

active: getRandomInt(0, 1) ,
enable:getRandomInt(0, 1)
});

start = start+1;
}


return data;
})();


// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Rule',
proxy: {
type: 'memory'
},
data: data,
sorters: [{
property: 'number',
direction: 'ASC'
}]
});


var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});


// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
xtype:"grid",
store: store,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'gridDDGroup',
dropGroup: 'gridDDGroup'
}
},
columns: [
new Ext.grid.RowNumberer(),
{
header: 'Rule Number',
dataIndex: 'number',
width: 70,
align: 'right',
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 100000
}
},
{
header: 'Track',
dataIndex: 'track',
width: 130,
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
['Alert','Alert'],
['None','None'],
['Log','Log']
],
lazyRender: true,
listClass: 'x-combo-list-small'
}
},
{
header: 'Comment',
dataIndex: 'comment',
flex: 1,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
},
{
xtype: 'checkcolumn',
header: 'Active?',
dataIndex: 'active',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}


},
{
xtype: 'actioncolumn',
header: 'Enabled/Disabled',
id: 'TestActiveCol',
dataIndex: 'enable',
text: 'Enable',
renderer: function(value, meta, rec){
var items = this.down('actioncolumn[id=TestActiveCol]').items;
if(rec.get('enable') == '0'){ // you can use value instead of rec.get('Active') eg if(value == 0) {

items[0].icon = '../shared/icons/fam/enabled.gif';
items[0].tooltip = 'Enable';
} else {


items[0].icon = '../shared/icons/fam/disabled.gif';
items[0].tooltip = 'Disable';
}
},
handler: function(view, rowIndex){
var record = store.getAt(rowIndex);
record.set('enable', record.get('enable') == '0' ? '1' : '0');
},
items: [{
}]


},

{
xtype: 'actioncolumn',
header: 'Remove Rule',
items: [
{
xtype: 'button',
icon: '../shared/icons/fam/delete.gif',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex)
{
var rec = grid.getStore().getAt(rowIndex);
rowEditing.cancelEdit();
store.remove(rec);
if (store.getCount() > 0) {
sm.select(0);
}
}
}
]
}],
renderTo: 'editor-grid',
width: 600,
height: 400,
title: 'Security Rule Bar',
frame: true,
tbar: [{
text: 'Add Rule',
icon: '../shared/icons/fam/add.gif',
handler : function() {
rowEditing.cancelEdit();


// Create a model instance
var r = Ext.create('Rule', {
number: 1,
track: 'Alert',
comment: 'New One',
active: true
});


store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}, {
itemId: 'removeRule',
text: 'Remove Rule',
icon: '../shared/icons/fam/cross.gif',
handler: function() {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() > 0) {
sm.select(0);
}
},
disabled: true
}],
plugins: [rowEditing],
listeners: {
'selectionchange': function(view, records) {
grid.down('#removeRule').setDisabled(!records.length);



}
}





});



});

lironla
15 Apr 2012, 3:11 PM
How do I add a combobox to choose from but only in the add rule condition ?

it is not necessary to make the combobox a column in the grid or show it in update/cancel mode.... |?

any ideas ?

vietits
15 Apr 2012, 3:44 PM
You just add a combobox to the toolbar next to 'Add Rule' button. Then when user click on Add Rule button, read the value that user selected from the combobox and do the suitable things. Example:


tbar: [{
xtype: 'combobox',
itemId: 'insertOption',
store: [[1, 'Inser at top'], [2, 'Insert at bottom'], [3, 'Insert before selected'], [4, 'Insert after selected']],
forceSelection: true,
value: 0
},{
text: 'Add Rule',
icon: '../shared/icons/fam/add.gif',
handler : function() {
var option = grid.down('#insertOption').getValue();
var insertAt = 0;
// process to get insertAt basing on insertOption here


rowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('Rule', {
number: 1,
track: 'Alert',
comment: 'New One',
active: true
});
store.insert(insertAt, r);
rowEditing.startEdit(insertAt, 0);
}
}, {

lironla
16 Apr 2012, 5:16 AM
var option = grid.down('#insertOption').getValue();
var insertAt = 0;
if(option==1) insertAt = 0;
if(option==2) insertAt = store.getCount();
if(option==3) alert(store.indexOf(this.selections.itemAt(0) ));



not getting the alert in option no 3. How do I get an index of selected row in grid panel ?

I tried couple of code lines. none of them work...:s

lironla
16 Apr 2012, 5:25 AM
maybe it is because the row is not selected by checkbox and only by background color ??? (see pic)

I have no idea...:-?34077

vietits
16 Apr 2012, 5:29 AM
var option = grid.down('#insertOption').getValue();
var insertAt = 0;
var count = store.getCount();
if(option==1){
insertAt = 0;
} else if(option==2) {
insertAt = count;
} else {
var selected = grid.getSelectionModel().getLastSelected();
var selectedIndex = store.indexOf(selected);
insertAt = option == 3 ? selectedIndex: selectedIndex + 1;
}

lironla
16 Apr 2012, 10:13 AM
=D>