extjs4 自定义类
Ext.define('FX.Table.Filter.Condition', {
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'name'},
{type: 'string', name: 'value'}
]
});
Ext.define('FX.Table.Filter',{
extend: 'Ext.panel.Panel',
conditionNumber: 2,
height: 200,
border: false,
filterConditionStore: '',
filterColumnTitleStore: '',
filterOperatorStore: '',
filterAllConditionLabel: 'Match All Conditions',
filterAnyConditionLabel: 'Match Any Condition',
layout: {
type: 'vbox',
// padding: '4',
// marginTop: '10px'
},
defaults: {
margins: '3,0,0,0'
},
/**
* Initialize component method
*/
initComponent: function() {
Ext.tip.QuickTipManager.init();
this.getDefaultStore();
this.items = [{
xtype: 'panel',
width: 694,
height: 35,
layout: {
type: 'hbox',
padding: '4',
pack: 'end'
},
defaults: {
margins: '2,5,2,2'
},
items: [{
xtype: 'textfield',
id: 'filtercondition',
name: 'filtercondition',
fieldLabel: ''
}, {
xtype: 'button',
id: 'filter',
text: 'Filter',
width: 45,
listeners: {
'click': Ext.bind(this.filter,this)
}
}, {
xtype: 'button',
id: 'remove',
text: 'Remove Filter',
disabled: true,
listeners: {
'click': Ext.bind(this.removeFilter, this)
}
}, {
xtype: 'button',
id: 'detail',
text: 'Detailed Conditions>>',
listeners: {
'click': Ext.bind(this.togglePanel, this)
}
}]
}, {
xtype: 'panel',
id : 'displayPanel',
name: 'displayPanel',
hidden: true,
width: 694,
height: 85,
layout: 'border',
items:[{
region: 'north',
xtype: 'panel',
border: false,
layout: 'absolute',
items:[{
xtype: 'combobox',
displayField: 'name',
valueField: 'value',
id:'filterConditionName',
value : this.filterConditionStore.getAt(0).get('value'),
width: 180,
store: this.filterConditionStore,
queryMode: 'local',
x: 355,
y: 5
}, {
xtype: 'button',
id: 'save',
text: 'Save Filter',
x: 540,
y: 5,
listeners: {
'click': Ext.bind(this.saveFilter, this)
}
}, {
xtype: 'button',
id: 'delete',
text: 'Delete Filter',
disabled: true,
x: 610,
y: 5,
listeners: {
'click': Ext.bind(this.deleteFilter,this)
}
}, {
xtype: 'fieldcontainer',
defaultType: 'radiofield',
id:'radiocontainer',
layout: 'hbox',
items: [
{boxLabel: this.filterAllConditionLabel, name: 'filterRadio', id:'filterAllCondition', inputValue: '1'},
{boxLabel: this.filterAnyConditionLabel, name: 'filterRadio', inputValue: '2', checked: true}
],
x: 15,
y: 20
}],
height: 50
}, {
region: 'center',
xtype: 'panel',
id:'centerpanel',
border: false,
layout: {
type: 'table',
columns: 5
},
items:[{
xtype: 'combobox',
id: 'devicegroup1',
displayField: 'name',
valueField: 'value',
value : this.filterColumnTitleStore.getAt(0).get('value'),
width: 220,
store: this.filterColumnTitleStore,
queryMode: 'local',
style: {
marginLeft: '10px',
marginTop: '5px'
}
}, {
xtype: 'combobox',
id: 'condition1',
displayField: 'name',
valueField: 'value',
value : this.filterOperatorStore.getAt(0).get('value'),
width: 220,
store: this.filterOperatorStore,
queryMode: 'local',
style: {
marginLeft: '10px',
marginTop: '5px'
}
}, {
xtype: 'textfield',
id: 'result1',
name: 'result1',
fieldLabel: '',
style:{
marginLeft: '10px',
marginTop: '5px'
}
}, {
xtype: 'button',
id: 'add1',
text: '+',
width: 23,
style:{
marginLeft: '10px'
},
listeners: {
'click': Ext.bind(this.addRules, this)
}
}, {
xtype: 'button',
id: 'delete1',
text: '-',
width: 23,
disabled: true,
style:{
marginLeft: '10px'
},
listeners: {
'click': Ext.bind(this.removeComponent,this)
}
}]
}]
}];
this.callParent(arguments);
},
// private method
addRules: function(addBtn){
var popupbox = addBtn.findParentByType("panel");
var count = this.componentCount(popupbox);
if (count < 5) {
this.createAndAddFilterComponent(addBtn);
var displayPanel = Ext.getCmp("displayPanel");
var height = displayPanel.getHeight();
displayPanel.setHeight(height+32);
var countagain = this.componentCount(popupbox);
if (count == 1) {
var array = popupbox.query('button[text="-"]');
array[0].setDisabled(false);
}
if (countagain >= 5) {
var array = popupbox.query('button[text="+"]');
Ext.Array.each(array, function(btn) {
btn.setDisabled(true);
});
}
}
},
// private method
createAndAddFilterComponent: function(newcmp){
var popupbox = newcmp.findParentByType("panel");
var deviceGroup = new Ext.form.ComboBox({
id: 'devicegroup'+this.conditionNumber,
displayField: 'name',
valueField: 'value',
value: this.filterColumnTitleStore.getAt(0).get('value'),
width: 220,
store: this.filterColumnTitleStore,
queryMode: 'local',
style: {
marginLeft: '10px',
marginTop: '5px'
}
});
var condition = new Ext.form.ComboBox({
id: 'condition'+this.conditionNumber,
displayField: 'name',
valueField: 'value',
value: this.filterOperatorStore.getAt(0).get('value'),
width: 220,
store: this.filterOperatorStore,
queryMode: 'local',
style: {
marginLeft: '10px',
marginTop: '5px'
}
});
var result = new Ext.form.Text({
id: 'result'+this.conditionNumber,
name: 'result'+this.conditionNumber,
fieldLabel: '',
style:{
marginLeft: '10px',
marginTop: '5px'
}
});
var add = new Ext.Button({
id: 'add'+this.conditionNumber,
text: '+',
width: 23,
style:{
marginLeft: '10px'
},
listeners: {
'click': Ext.bind(this.addRules, this)
}
});
var del = new Ext.Button({
id: 'delete'+this.conditionNumber,
text: '-',
width: 23,
style:{
marginLeft: '10px'
},
listeners: {
'click': Ext.bind(this.removeComponent,this)
}
});
this.conditionNumber++;
popupbox.add(deviceGroup);
popupbox.add(condition);
popupbox.add(result);
popupbox.add(add);
popupbox.add(del);
},
// private method
removeComponent: function(removeBtn){
var delid = removeBtn.getId();
var no = delid.substring(6,delid.length);
var popupbox = removeBtn.findParentByType("panel");
popupbox.remove("devicegroup"+no);
popupbox.remove("condition"+no);
popupbox.remove("result"+no);
popupbox.remove("add"+no);
popupbox.remove("delete"+no);
var displaypanel = Ext.getCmp("displayPanel");
displaypanel.setHeight(displaypanel.getHeight() - 32);
var count = this.componentCount(popupbox);
if (count == 1) {
var array = popupbox.query('button[text="-"]');
array[0].setDisabled(true);
}else if(count == 4) {
var array = popupbox.query('button[text="+"]');
Ext.Array.each(array, function(btn) {
btn.setDisabled(false);
});
}
},
// private method
componentCount: function(popupbox){
var array = popupbox.query('button[text="+"]');
return array.length;
},
// private method
setRemoveFilterButtonDisabled: function(disabled){
Ext.getCmp("remove").setDisabled(disabled);
},
// private method
setDeleteFilterButtonDisabled: function(disabled){
Ext.getCmp("delete").setDisabled(disabled);
},
/**
* Detailbutton's click event handling method
*
*/
togglePanel: function(detailBtn){
if (Ext.getCmp("filtercondition").hidden) {
Ext.getCmp("filtercondition").setVisible(true);
} else {
Ext.getCmp("filtercondition").setVisible(false);
}
if (Ext.getCmp("displayPanel").hidden) {
Ext.getCmp("displayPanel").setVisible(true);
detailBtn.setText("Detailed Conditions<<");
} else {
Ext.getCmp("displayPanel").setVisible(false);
detailBtn.setText("Detailed Conditions>>");
}
},
// private method
getDefaultStore: function(){
if (this.filterConditionStore == '') {
var filterConditionCombo = [
{"name":"Enter New Conditions","value":"Enter New Conditions"},
];
this.filterConditionStore = Ext.create('Ext.data.Store', {
model: 'FX.Table.Filter.Condition',
data: filterConditionCombo
});
}
if (this.filterColumnTitleStore == '') {
var mgmtDeviceDisplayTablefilterColumnTitleCombo = [
{"name":"Device/Group ID","value":"Device/Group ID"},
{"name":"Device/Group Name","value":"Device/Group Name"},
{"name":"Remarks","value":"Remarks"}
];
this.filterColumnTitleStore = Ext.create('Ext.data.Store', {
model: 'FX.Table.Filter.Condition',
data: mgmtDeviceDisplayTablefilterColumnTitleCombo
});
}
if (this.filterOperatorStore == '') {
var mgmtDeviceDisplayTablefilterOperatorCombo = [
{"name":"Is equal to test","value":"equal"},
{"name":"Is not equal to test","value":"not equal"},
{"name":"Contains test","value":"contains"},
{"name":"Does not contain test","value":"not contain"}
];
this.filterOperatorStore = Ext.create('Ext.data.Store', {
model: 'FX.Table.Filter.Condition',
data: mgmtDeviceDisplayTablefilterOperatorCombo
});
}
},
/**
* Savefilterbutton's click event handling method
*/
saveFilter: function(){
},
/**
* Deletefilterbutton's click event handling method
*/
deleteFilter: function(){
},
/**
* Removefilterbutton's click event handling method
*/
removeFilter: function(){
},
/**
* Filterbutton's click event handling method
*/
filter: function(){
},
/**
* Get Filter Conditions
*
*/
getConditions: function(){
var popupbox = Ext.getCmp("centerpanel");
var array = popupbox.query('button[text="+"]');
var conditionArrayIndex = 0;
var conditionArray = new Array();
for(i = 0;i < array.length;i++){
conditionArray[i] = new Array();
}
Ext.Array.each(array, function(btn) {
var addId = btn.getId();
var componentNumber = addId.substring(3,addId.length);
var deviceGroupVal = Ext.getCmp("devicegroup"+componentNumber).getValue();
var conditionVal = Ext.getCmp("condition"+componentNumber).getValue();
var result = Ext.getCmp("result"+componentNumber).getValue();
conditionArray[conditionArrayIndex][0] = deviceGroupVal;
conditionArray[conditionArrayIndex][1] = conditionVal;
conditionArray[conditionArrayIndex][2] = result;
conditionArrayIndex++;
});
return conditionArray;
},
/**
*
*/
getConditionName: function(){
var conditionName = Ext.getCmp("filterConditionName").getValue();
return conditionName;
},
/**
* Get all Or Any . all : 1 Any : 2
*/
getAllOrAny: function(){
var allOrAny = Ext.getCmp('filterAllCondition').getGroupValue();
return allOrAny;
},
/**
*
*/
getCondition: function(){
var condition = Ext.getCmp("filtercondition").getValue();
return condition;
}
});
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'name'},
{type: 'string', name: 'value'}
]
});
Ext.define('FX.Table.Filter',{
extend: 'Ext.panel.Panel',
conditionNumber: 2,
height: 200,
border: false,
filterConditionStore: '',
filterColumnTitleStore: '',
filterOperatorStore: '',
filterAllConditionLabel: 'Match All Conditions',
filterAnyConditionLabel: 'Match Any Condition',
layout: {
type: 'vbox',
// padding: '4',
// marginTop: '10px'
},
defaults: {
margins: '3,0,0,0'
},
/**
* Initialize component method
*/
initComponent: function() {
Ext.tip.QuickTipManager.init();
this.getDefaultStore();
this.items = [{
xtype: 'panel',
width: 694,
height: 35,
layout: {
type: 'hbox',
padding: '4',
pack: 'end'
},
defaults: {
margins: '2,5,2,2'
},
items: [{
xtype: 'textfield',
id: 'filtercondition',
name: 'filtercondition',
fieldLabel: ''
}, {
xtype: 'button',
id: 'filter',
text: 'Filter',
width: 45,
listeners: {
'click': Ext.bind(this.filter,this)
}
}, {
xtype: 'button',
id: 'remove',
text: 'Remove Filter',
disabled: true,
listeners: {
'click': Ext.bind(this.removeFilter, this)
}
}, {
xtype: 'button',
id: 'detail',
text: 'Detailed Conditions>>',
listeners: {
'click': Ext.bind(this.togglePanel, this)
}
}]
}, {
xtype: 'panel',
id : 'displayPanel',
name: 'displayPanel',
hidden: true,
width: 694,
height: 85,
layout: 'border',
items:[{
region: 'north',
xtype: 'panel',
border: false,
layout: 'absolute',
items:[{
xtype: 'combobox',
displayField: 'name',
valueField: 'value',
id:'filterConditionName',
value : this.filterConditionStore.getAt(0).get('value'),
width: 180,
store: this.filterConditionStore,
queryMode: 'local',
x: 355,
y: 5
}, {
xtype: 'button',
id: 'save',
text: 'Save Filter',
x: 540,
y: 5,
listeners: {
'click': Ext.bind(this.saveFilter, this)
}
}, {
xtype: 'button',
id: 'delete',
text: 'Delete Filter',
disabled: true,
x: 610,
y: 5,
listeners: {
'click': Ext.bind(this.deleteFilter,this)
}
}, {
xtype: 'fieldcontainer',
defaultType: 'radiofield',
id:'radiocontainer',
layout: 'hbox',
items: [
{boxLabel: this.filterAllConditionLabel, name: 'filterRadio', id:'filterAllCondition', inputValue: '1'},
{boxLabel: this.filterAnyConditionLabel, name: 'filterRadio', inputValue: '2', checked: true}
],
x: 15,
y: 20
}],
height: 50
}, {
region: 'center',
xtype: 'panel',
id:'centerpanel',
border: false,
layout: {
type: 'table',
columns: 5
},
items:[{
xtype: 'combobox',
id: 'devicegroup1',
displayField: 'name',
valueField: 'value',
value : this.filterColumnTitleStore.getAt(0).get('value'),
width: 220,
store: this.filterColumnTitleStore,
queryMode: 'local',
style: {
marginLeft: '10px',
marginTop: '5px'
}
}, {
xtype: 'combobox',
id: 'condition1',
displayField: 'name',
valueField: 'value',
value : this.filterOperatorStore.getAt(0).get('value'),
width: 220,
store: this.filterOperatorStore,
queryMode: 'local',
style: {
marginLeft: '10px',
marginTop: '5px'
}
}, {
xtype: 'textfield',
id: 'result1',
name: 'result1',
fieldLabel: '',
style:{
marginLeft: '10px',
marginTop: '5px'
}
}, {
xtype: 'button',
id: 'add1',
text: '+',
width: 23,
style:{
marginLeft: '10px'
},
listeners: {
'click': Ext.bind(this.addRules, this)
}
}, {
xtype: 'button',
id: 'delete1',
text: '-',
width: 23,
disabled: true,
style:{
marginLeft: '10px'
},
listeners: {
'click': Ext.bind(this.removeComponent,this)
}
}]
}]
}];
this.callParent(arguments);
},
// private method
addRules: function(addBtn){
var popupbox = addBtn.findParentByType("panel");
var count = this.componentCount(popupbox);
if (count < 5) {
this.createAndAddFilterComponent(addBtn);
var displayPanel = Ext.getCmp("displayPanel");
var height = displayPanel.getHeight();
displayPanel.setHeight(height+32);
var countagain = this.componentCount(popupbox);
if (count == 1) {
var array = popupbox.query('button[text="-"]');
array[0].setDisabled(false);
}
if (countagain >= 5) {
var array = popupbox.query('button[text="+"]');
Ext.Array.each(array, function(btn) {
btn.setDisabled(true);
});
}
}
},
// private method
createAndAddFilterComponent: function(newcmp){
var popupbox = newcmp.findParentByType("panel");
var deviceGroup = new Ext.form.ComboBox({
id: 'devicegroup'+this.conditionNumber,
displayField: 'name',
valueField: 'value',
value: this.filterColumnTitleStore.getAt(0).get('value'),
width: 220,
store: this.filterColumnTitleStore,
queryMode: 'local',
style: {
marginLeft: '10px',
marginTop: '5px'
}
});
var condition = new Ext.form.ComboBox({
id: 'condition'+this.conditionNumber,
displayField: 'name',
valueField: 'value',
value: this.filterOperatorStore.getAt(0).get('value'),
width: 220,
store: this.filterOperatorStore,
queryMode: 'local',
style: {
marginLeft: '10px',
marginTop: '5px'
}
});
var result = new Ext.form.Text({
id: 'result'+this.conditionNumber,
name: 'result'+this.conditionNumber,
fieldLabel: '',
style:{
marginLeft: '10px',
marginTop: '5px'
}
});
var add = new Ext.Button({
id: 'add'+this.conditionNumber,
text: '+',
width: 23,
style:{
marginLeft: '10px'
},
listeners: {
'click': Ext.bind(this.addRules, this)
}
});
var del = new Ext.Button({
id: 'delete'+this.conditionNumber,
text: '-',
width: 23,
style:{
marginLeft: '10px'
},
listeners: {
'click': Ext.bind(this.removeComponent,this)
}
});
this.conditionNumber++;
popupbox.add(deviceGroup);
popupbox.add(condition);
popupbox.add(result);
popupbox.add(add);
popupbox.add(del);
},
// private method
removeComponent: function(removeBtn){
var delid = removeBtn.getId();
var no = delid.substring(6,delid.length);
var popupbox = removeBtn.findParentByType("panel");
popupbox.remove("devicegroup"+no);
popupbox.remove("condition"+no);
popupbox.remove("result"+no);
popupbox.remove("add"+no);
popupbox.remove("delete"+no);
var displaypanel = Ext.getCmp("displayPanel");
displaypanel.setHeight(displaypanel.getHeight() - 32);
var count = this.componentCount(popupbox);
if (count == 1) {
var array = popupbox.query('button[text="-"]');
array[0].setDisabled(true);
}else if(count == 4) {
var array = popupbox.query('button[text="+"]');
Ext.Array.each(array, function(btn) {
btn.setDisabled(false);
});
}
},
// private method
componentCount: function(popupbox){
var array = popupbox.query('button[text="+"]');
return array.length;
},
// private method
setRemoveFilterButtonDisabled: function(disabled){
Ext.getCmp("remove").setDisabled(disabled);
},
// private method
setDeleteFilterButtonDisabled: function(disabled){
Ext.getCmp("delete").setDisabled(disabled);
},
/**
* Detailbutton's click event handling method
*
*/
togglePanel: function(detailBtn){
if (Ext.getCmp("filtercondition").hidden) {
Ext.getCmp("filtercondition").setVisible(true);
} else {
Ext.getCmp("filtercondition").setVisible(false);
}
if (Ext.getCmp("displayPanel").hidden) {
Ext.getCmp("displayPanel").setVisible(true);
detailBtn.setText("Detailed Conditions<<");
} else {
Ext.getCmp("displayPanel").setVisible(false);
detailBtn.setText("Detailed Conditions>>");
}
},
// private method
getDefaultStore: function(){
if (this.filterConditionStore == '') {
var filterConditionCombo = [
{"name":"Enter New Conditions","value":"Enter New Conditions"},
];
this.filterConditionStore = Ext.create('Ext.data.Store', {
model: 'FX.Table.Filter.Condition',
data: filterConditionCombo
});
}
if (this.filterColumnTitleStore == '') {
var mgmtDeviceDisplayTablefilterColumnTitleCombo = [
{"name":"Device/Group ID","value":"Device/Group ID"},
{"name":"Device/Group Name","value":"Device/Group Name"},
{"name":"Remarks","value":"Remarks"}
];
this.filterColumnTitleStore = Ext.create('Ext.data.Store', {
model: 'FX.Table.Filter.Condition',
data: mgmtDeviceDisplayTablefilterColumnTitleCombo
});
}
if (this.filterOperatorStore == '') {
var mgmtDeviceDisplayTablefilterOperatorCombo = [
{"name":"Is equal to test","value":"equal"},
{"name":"Is not equal to test","value":"not equal"},
{"name":"Contains test","value":"contains"},
{"name":"Does not contain test","value":"not contain"}
];
this.filterOperatorStore = Ext.create('Ext.data.Store', {
model: 'FX.Table.Filter.Condition',
data: mgmtDeviceDisplayTablefilterOperatorCombo
});
}
},
/**
* Savefilterbutton's click event handling method
*/
saveFilter: function(){
},
/**
* Deletefilterbutton's click event handling method
*/
deleteFilter: function(){
},
/**
* Removefilterbutton's click event handling method
*/
removeFilter: function(){
},
/**
* Filterbutton's click event handling method
*/
filter: function(){
},
/**
* Get Filter Conditions
*
*/
getConditions: function(){
var popupbox = Ext.getCmp("centerpanel");
var array = popupbox.query('button[text="+"]');
var conditionArrayIndex = 0;
var conditionArray = new Array();
for(i = 0;i < array.length;i++){
conditionArray[i] = new Array();
}
Ext.Array.each(array, function(btn) {
var addId = btn.getId();
var componentNumber = addId.substring(3,addId.length);
var deviceGroupVal = Ext.getCmp("devicegroup"+componentNumber).getValue();
var conditionVal = Ext.getCmp("condition"+componentNumber).getValue();
var result = Ext.getCmp("result"+componentNumber).getValue();
conditionArray[conditionArrayIndex][0] = deviceGroupVal;
conditionArray[conditionArrayIndex][1] = conditionVal;
conditionArray[conditionArrayIndex][2] = result;
conditionArrayIndex++;
});
return conditionArray;
},
/**
*
*/
getConditionName: function(){
var conditionName = Ext.getCmp("filterConditionName").getValue();
return conditionName;
},
/**
* Get all Or Any . all : 1 Any : 2
*/
getAllOrAny: function(){
var allOrAny = Ext.getCmp('filterAllCondition').getGroupValue();
return allOrAny;
},
/**
*
*/
getCondition: function(){
var condition = Ext.getCmp("filtercondition").getValue();
return condition;
}
});